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

小灰灰 2023-03-04 11:29 17阅读 0赞

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文件、图片文件、音视频等文件，处理过程类似上面的步骤在此不详述。