一.首先来说说浏览器的构成
（用户界面，浏览器引擎，渲染引擎，js解释器，数据存储，网络，UI后端）
用户界面：包括地址栏，后退/前进按钮，书签目录等
浏览器引擎：用来查询和操作渲染引擎的接口
渲染引擎：用来显示请求的内容，eg.如果请求的内容为html，就负责解析html及 css,并将解析后的结果显示出来
网络：用来完成网络调用，eg.http请求，有与平台无关的接口，可以在不同平台上工作
UI后端
Js解释器：用来解释执行js代码
数据存储：属于持久层，浏览器需要在硬盘中保存类似cookie的各种数据，html5定义了 web database技术，一种轻量级完整的客户端存储技术
二.浏览器内核的理解
浏览器内核主要分成 两部分：渲染引擎和js引擎
最开始渲染引擎和js引擎没有区分的很明确，后来JS引擎越来越独立，内核就倾向于只渲染引擎
1.渲染引擎：负责取得网页的内容（HTML,XML,图像等等），整理讯息（例如加入CSS等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核不同对于网页的语法解释会有不同，所以渲染的效果也不相同
2.JS引擎：解析和执行javascript来实现网页的动态效果
三.浏览器渲染的过程
简单地说，页面渲染就是浏览器将html代码根据CSS定义的规则显示在浏览器窗口中的这个过程。先来大致了解一下浏览器都是怎么工作的：
1. 用户输入网址（假设是个html页面，并且是第一次访问），浏览器向服务器发出请求，服务器返回html文件；
2. 浏览器开始载入html代码，发现head标签内有一个link标签引用外部CSS文件；
3. 浏览器又发出CSS文件的请求，服务器返回这个CSS文件；
4. 浏览器继续载入html中body部分的代码，并且CSS文件已经拿到手了，可以开始渲染页面了；
5. 浏览器在代码中发现一个img标签引用了一张图片，向服务器发出请求。此时浏览器不会等到图片下载完，而是继续渲染后面的代码；
6. 服务器返回图片文件，由于图片占用了一定面积，影响了后面段落的排布，因此浏览器需要回过头来重新渲染这部分代码
7. 浏览器发现了一个包含一行Javascript代码的script标签，赶快运行它
8. Javascript脚本执行了这条语句，它命令浏览器隐藏掉代码中的某个div （style.display=”none”）。杯具啊，突然就少了这么一个元素，浏览器不得不重新渲染这部分代码
四.浏览器兼容问题总结（ie,firefox）
前言：ie兼容性必须要在windows中测，windowXP最高只支持ie8
if 开发环境不是windows,解决：1.开windows虚拟机 2.将开发环境暂时切换到windows
1.str.trim() ie失效
解决：$.trim(str) 代替str.trim()
2.ie placeholder 失效问题，并且当input的type为password时，有部分解决失效的代码会导致placeholder部分的内容变成密码的黑色圆点
解决：详情解析见/html/ieCompatiable/placeholder.html
3.设置背景图片大小background-size ie失效
解决：详情见/html/ieCompatiable/backgroundSize.html(给Ie加ie滤镜)
4.firefox的input 有 required属性，此控件自动加一圈粉色边框
解决：input[required]:invalid, input:focus:invalid, textarea[required]:invalid, textarea:focus:invalid{box-shadow: none;}
5.ie中max-width失效（ie中严格要求父元素的宽度是固定的）
解决：详情见/html/ieCompatiable/maxWidth.html(主要是在table加了table-layout:fixed;)
6.ie中不兼容:first-child , :last-child , :nth-child()
解决：一般情况下给这种列表的ul的宽度加大，或者单独设置这些特殊的个体
7.万能金钥匙，强制使ie8使用最新的内核渲染页面
Google Chrome Frame让IE用上Chrome的引擎
8.所有浏览器 图片默认有间距
解决：img加上float属性（图片是行内属性标签） 详情见/html/special/index.html
9.ie透明度兼容的问题
解决：详情见/html/ieCompatiable/opacity.html
10.所有浏览器 高度不适应
解决：详情见/html/ieCompatiable/test.html (给外面的盒子加上border)
五.Chrome的扩展、插件和应用：
扩展：chrome://extensions/(扩展可以有很多插件，但是插件不可能包含扩展)
应用：chrome://apps
插件：chrome://plugins