浏览器的渲染过程及页面加载的优化方案

痛定思痛。 2021-09-15 20:44 381阅读 0赞

首先要感谢趣链的大佬在礼拜六还抽时间来给我面试，虽然个人表现不佳，但本来就是抱着去看看世界的心态面试的，不如先解决一下面试中的问题吧。本文原题为前端面试题，由于每题都可以做深入研究，文章内容较长，而且一次性也写不完，故分成独立文章，每章最后都会预告下一个问题，解决时间，随缘随缘。

### 1.页面的渲染过程及页面优化 ###

本来是想说浏览器的渲染过程，总觉得哪里不对，故改成页面的渲染过程，至于优化，是我总结了网上的参考后自己加的。

先来探讨下一张页面是如何通过浏览器呈现到用户的屏幕上的。（[参考链接][Link 1]）

第一大步骤：网络通信

用户输入网址（www.baidu.com) => DNS域名解析（将www.baidu.com解析成百度服务器的地址，如192.168.1.123，这个过程本 身也十分复杂，如果想了解的可以继续看括号里的内容，首先为什么需要DNS解析域名，因为网络间的通信有一个自己的规则，那  就是每台机器都有自己的ip，如果两台机器需要互相访问，那么首先你就得拿到对方的ip，而不是对方叫什么名字，就跟身份证号码和你的名字一样，号码才是关键信息，名字你可能说改就改了。那么浏览器是如何解析域名的呢，首先浏览器会有一个自己的域名存储器，里面存储了你常用的域名和对应的ip，如果找到了，那就立马去访问这个ip，如果找不到，则去本地代理商的DNS存储器里找，如果找不到，那就去代理商的代理商找，一直找到对应的根节点，最后再找到对应的子节点，所以有时候你访问一个新的页面会觉得很慢，就是因为DNS解析占用了许多时间）=> 发起TCP三次握手（两台计算机确立一种“我们俩之间的桥已经完全连通了“的信任关系，这样就可以在上面开车了）=> 浏览器发出http请求  => 服务器响应http请求，把文件中的内容/代码返回给浏览器

第二大步骤：页面渲染

解析HTML文件，得到DOM树和CSS样式树（在这个步骤中，DOM树和CSS树的计算是同时执行的，因此我们通常需要把CSS放到head里让他先进行解析，当然在这个步骤里我们忽略了前端代码块中一位重要的兄弟，就是JavaScript，当浏览器解析到script标签的时候，他会终止HTML文档的解析，这是为了防止JavaScript脚本可能会改变现有的dom结构，因此我们一般需要把script标签放到dom的最后部分，以防止HTML解析阻塞，页面出来的较慢） => 将DOM树和CSS样式树"整合"成渲染树(在这里需要注意，渲染树的生成并不是和dom节点一一对应的，如display:none的节点就不会进入渲染树，这样确实可以提供一些性能的优化，同时你需要知道visibility：hidden的节点是会进入渲染树的 ) => 通过已知的HTML标签和他对应的样式去计算布局 （已经得到了dom节点以及dom之间的相对关系，浏览器就可以通过流模型的layout算法对页面中的各个节点进行定位）=> 将计算好的渲染树渲染到显示器上（你可能以为这一步骤只是单纯的将上一步骤得到的计算好的渲染树渲染到显示器是，其实这一步骤中还包含其他复杂的操作，比如你考虑一下z-index属性，这里我不详细说明，如有需要请看上面的参考链接）

其他步骤：页面重绘和页面重排

这两个步骤是很难避免的，只要涉及到dom的动态操作，都会导致页面重绘或者重排，页面重绘一般是由颜色变化导致的，而页面重排则是由于部分元素尺寸，定位变化导致的。因此对于需要操作定位或者大小的元素，尽量使其脱离文档流，防止其关联元素的定位甚至导致全局的定位重排。

请不要觉得浏览器是按照上面的步骤一步步的执行下来得到最终显示屏上的页面的，页面的渲染过程并不是完全独立的，所以你可以经常看到页面一点点出来的情况就是一边解析，一边加载，一边渲染的工作现象。

页面优化的一些方案

1.防止css的过多嵌套，合理的css选择器可以避免这个问题。这里多提一句，现在新出的CSS解析器，如LESS,SASS,STYLES基本都是通过嵌套来写CSS，所以不知道他里面是怎么优化这个问题的。

2.减少http的请求次数，将资源文件如（图片）进行整合，将其他文件通过打包工具打包。（为什么要这样做呢？因为加载两张50K的图片的速度没有加载一张100K的图片快，这是由于加载一张图片不需要切换工作，省下了部分切换工作时所需要的时间）

3.减少dom操作，让经常需要改动的节点脱离文档流

4.使用json格式进行数据交换，json格式是JavaScript的原生格式，因此使用的过程中不需要借助额外的工具包

5.解决阻塞渲染，优先加载HTML再解析js

### 2.vue中是如何实现双向数据绑定的 ###

[Link 1]: https://blog.csdn.net/riddle1981/article/details/78681191