前端基础之浏览器(持续更新中)

1. 常见的浏览器兼容性问题

IE9一下版本的浏览器问题较多：

由于IE盒模型不大一样，margin和padding问题；

2. vue项目的浏览器兼容问题

Vue不支持IE8及以下版本，因为Vue使用了IE8无法模拟的Es5特性;

es6语法不支持：

npm install --save-dev -polyfill
通过babel-polyfill将es6代码转成es5

IE11不识别 data(){}定义的方法:

data(){
    return {}
}
修改为：
data: function () {
    return {}
}

IE10不识别let标识符;

Vue不支持IE8, 因为Vue使用了IE8无法模拟的ECMAScript 5 特性, 但它支持所有兼容ECMAScript 5 的浏览器;

Vue+webpack+elementui IE11兼容性问题:

3. 浏览器页面渲染机制

在浏览器中获得HTML CSS，HTML和CSS解释器会对其进行解析，HTML进行解析后在DOM元素的参与下会构建DOM树，DOM树添加CSS规则后生成渲染树，浏览器就可进行页面的绘制啦
绘制完成后就是我们所看到的页面啦。

什么是重排重绘制？
当DOM元素受到影响的时候就会触发一个重排重绘。
重排（回流）可以理解为DOM树改变需要重新绘制DOM树
重绘理解为CSS规则发生改变需要重新绘制渲染树。
重排重绘会影响页面的性能，因此在页面开发过程中我们应该减少页面的重排重绘
可触发重排的常见操作：

添加或删除可见的DOM元素
元素位置改变
元素本身的尺寸发生改变
内容改变
页面渲染器初始化
浏览器窗口大小发生改变

如何减少重排：

批量修改DOM：修改一次DOM会重排重绘一次
减少过渡动画的使用，因为CSS过渡动画每一帧都需要重排
减少DOM的深度
设置display：none，隐藏或展示
样式集中展示
让元素脱离文档

可以触发重绘的操作：

页面样式发生改变，如背景颜色

减少重绘的操作：

页面样式集中显示

4. ---

目前使用的主流浏览器有五个：Internet Explorer、 Firefox、 Safari、 Chrome 和 Opera。
// 浏览器按照引擎分类
Trident引擎：Internet Explorer
Webkit引擎：Chrome（28版本后基于blink，blink是webkit的一个分支）和Safari 
Gecko引擎：Firefox
Presto引擎：早期Opera采用，后用webkit引擎
// 浏览器内核工作
浏览器内核分成两部分：渲染引擎和js引擎；
渲染引擎：首先浏览器解析HTML文档和解析CSS样式表形成DOM树和CSSDOM树 ，然后结合DOM树和CSSDOM树形成 render树。 也就是我们所说的渲染树。然后 浏览器在render树内对每个render节点进行布局处理，计算出每一个元素的大小和位置。确定其在屏幕上的位置 ，最后进行绘制。通过遍历render树将实际的像素显示到屏幕上。
js引擎：

// 浏览器的渲染顺序问题
1.输入url
2.查看浏览器缓存，看是否有缓存，如果有缓存，继续查看缓存是否过期，如果没有过期，直接返回缓存页面，如果没有缓存或者缓存过期，发送一个请求。
3.浏览器解析url地址，获取协议、主机名、端口号和路径。
4.获取主机ip地址过程
（1）浏览器缓存
（2）主机缓存
（3）hosts文件
（4）路由器缓存
（5）DNS缓存
（6）DNS递归查询
5.浏览器发起和服务器的TCP连接，执行三次握手
 5.1 TCP/IP 协议
 TCP/IP 是基于 TCP 和 IP 这两个最初的协议之上的不同的通信协议的大的集合。
 TCP 用于从应用程序到网络的数据传输控制。
 TCP 负责在数据传送之前将它们分割为 IP 包，然后在它们到达的时候将它们重组。
 IP 负责计算机之间的通信。
 IP 负责在因特网上发送和接收数据包。
6.三次握手连接后，浏览器发送一个http请求
 HTTP 负责 web 服务器与 web 浏览器之间的通信。
 HTTP 用于从 web 客户端(浏览器)向 web 服务器发送请求，并从 web 服务器向 web 客户端返回内容(网页)。
7、服务器收到请求，转到相关的服务程序，期间可能需要连接并操作数据库（主要分get和post请求）。
8、服务器看是否需要缓存，服务器处理完请求，发出一个响应（这部分也是重点，请查询资料了解http响应头各个字段的含义）
9、服务器并根据请求头包含信息决定是否需要关闭TCP连接（如需关闭，则需要四次挥手过程）
10、浏览器对接收到的响应进行解码
11、浏览器解析收到的响应并根据响应的内容（假如是HTML文件）进行构建DOM树，构建render树，渲染render树等过程
12、处理嵌入的其他资源如css文件、js文件、图片文件、音视频等文件，处理过程类似上面的步骤在此不详述。