浏览器常用基础知识汇总

一. 浏览器的构成

用户界面：

包括地址栏，后退/前进按钮，书签目录等

浏览器引擎：

用来查询和操作渲染引擎的接口

渲染引擎：

用来显示请求的内容，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属性，此控件自动加一圈粉色边框 解决：

css
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. 所有浏览器 图片默认有间距 解决：img加上float属性（图片是行内属性标签） 详情见/html/special/index.html
8. ie透明度兼容的问题 解决：详情见链接
9. 所有浏览器 高度不适应 解决：详情见/html/ieCompatiable/test.html (给外面的盒子加上border)

五. Chrome的扩展、插件和应用：

扩展：chrome://extensions/(扩展可以有很多插件，但是插件不可能包含扩展) 应用：chrome://apps 插件：chrome://plugins