本文主要是介绍前端性能优化，之还在为多种多样的知识点整理苦恼吗，进来看看吧。（转载），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
通过观看周啸天公开课——深度刨析前端性能优化CRP对百度到的各种杂七杂八的前端性能优化方面的问题进行梳理
先来说一下，前端页面的请求过程有如下几个步骤：（脑子里想一下这个过程哈）
步骤1：对输入地址栏的URL进行解析
步骤2：DNS解析
步骤3：TCP的3次握手
步骤4：发送HTTP请求
步骤5：服务器端的响应处理
步骤6：TCP的4次挥手
步骤7：浏览器进行解析渲染
步骤1有关URL解析并未进行深入讲解，主要涉及
1）地址解析与编码
2）HSTS（完全没见过，说是涉及安全问题啥的。）
3）缓存（这个还好，至少见过，应该是与强缓存和协商缓存有关）
4）。。。。。
步骤3和步骤6是网络传输内容，与前端优化的关系不大。
步骤5是后台问题，关系也不大
先重点说一下步骤7，浏览器的解析渲染：
首先，先来说一下步骤7的渲染流程：
DOM树的渲染------>CSSOM树的渲染------>渲染树
1.DOM树渲染步骤：
1）返回的最底层的其实是一些十六进制数的形式（3C 2C 79 3E 6F）
2）通过转化使这些十六进制转化为了‘标签’字符集（html head body p）
3）通过Tokens令牌，对这些字符集进行‘闭合’的处理（比如，哦~这个是html的起始标签，然后中间罗里吧嗦一大堆之后，哦!找到你了，html的闭合标签）
4）通过词法分析，把令牌搞出来的东西生成具体的节点，这个过程已经把DOM的结构搭建好了
5）最后生成了一个有标签，有结构，有层级的树形的DOM结构
ok，分析完了DOM树的渲染步骤了，我们来对他进行优化：
1）.在步骤2到步骤3的过程中，Tokens令牌是W3C规范的，所以，你的标签要语义化，这样才能更快更好的进行分析。
2）.步骤3到步骤4过程中，在进行节点生成时，你的层级结构要尽可能的少，这样才更快。最优的层级应该三四级。
2.CSSOM树的渲染：
大体与DOM的过程相同。
这里不得不说一点，css样式的引入，link外部引入和@import，有什么不同呢？
link是异步的，也是一个http请求。而@import是同步的，回阻碍下边内容的渲染。
优化：
1）选择器的层级问题
2）由不得不说的一点，得出如下如何引入结论：
若样式较少，采用内部样式style标签，因为它不需要http请求
若样式很多，采用link标签，放在顶部，尽早的把css样式下载下来
一般不用@import，除非需求需要（这里可能涉及到了步骤4，发送HTTP请求的内容）
PS：
CSS选择器的渲染是由右向左的，注意层级问题
CSS预编译器（less sass stylus）虽然在开发，维护，复用特别好使，但是一定要注意层级问题
3.渲染树：
当DOM与CSSOM树加载完成后，融合为渲染树（render tree）
根据渲染树，计算视图内的确切位置，这个布局计算称为回流
根据渲染树和回流得到的计算结构，得到节点的绝对像素，称为绘制
因此优化主要就是：减少DOM的回流和重绘
ok，步骤7浏览器的解析渲染方面的优化就先这样了，你总结一下在网上百度到的优化方法哪些是属于浏览器渲染这一块的，想想。
原文链接：https://blog.csdn.net/BWater_monster/java/article/details/106227357
这篇关于前端性能优化，之还在为多种多样的知识点整理苦恼吗，进来看看吧。（转载）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
