前端性能优化，之还在为多种多样的知识点整理苦恼吗，进来看看吧。

通过观看周啸天公开课——深度刨析前端性能优化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浏览器的解析渲染方面的优化就先这样了，你总结一下在网上百度到的优化方法哪些是属于浏览器渲染这一块的，想想。

未完待续~~~

前端性能优化，之还在为多种多样的知识点整理苦恼吗，进来看看吧。相关推荐

前端性能优化，之还在为多种多样的知识点整理苦恼吗，进来看看吧。（转载）
通过观看周啸天公开课--深度刨析前端性能优化CRP对百度到的各种杂七杂八的前端性能优化方面的问题进行梳理先来说一下,前端页面的请求过程有如下几个步骤:(脑子里想一下这个过程哈) 步骤1:对输入地址栏 ...
做前端性能优化，还不知道什么是Preload、Prefetch、Preconnect、Prerendering，你就out了？
做前端性能优化,还不知道什么是Preload.Prefetch.Preconnect? 今天,我们将探讨当前的资源提示和指令,这是提高网站或 Web 应用程序性能的另一种好方法.您可能听说过Prelo ...
gc的原因频繁full_Java性能优化要点之：GC垃圾回收知识点整理
要掌握了GC垃圾回收的相关知识点,程序员在工作中就不用担心内存管理了,因为垃圾收集器会自动进行管理.本文为大家整理了GC垃圾回收的学习笔记,主要内容包括了判断回收条件,虚拟机频繁full GC的解决对 ...
深度讲解：web前端性能优化
一.课程简介: 1.课程大纲涉及到的分类网络层面构建层面浏览器渲染层面服务端层面涉及到的功能点资源的合并与压缩图片编解码原理和类型选择浏览器渲染机制懒加载预加载浏览器存储缓存机 ...
大型网站技术架构（3）：WEB 前端性能优化
上次说到了性能优化策略,根据网站的分层架构,可以大致的分为 web 前端性能优化,应用服务器性能优化,存储服务器性能优化三大类这次来说一下 web 前端性能优化,一般来说,web 前端就是应用服务器 ...
前端性能优化——从 10 多秒到 1.05 秒
https://lishaoy.net 关于性能优化是个大的面,这篇文章主要涉及到前端的几个点,如前端性能优化的流程.常见技术手段.工具等. 提及前端性能优化 ,大家应该都会想到雅虎军 ...
如何给网站瘦身？图文并茂的前端性能优化指南
提高网站的速度对网站的成功有巨大的影响,因为网站的加载速度直接影响到用户体验和搜索引擎排名.Browser Diet 是一个非常好的指南,列出了前端性能优化的各种技巧和工具. 您可能感兴趣的相关文章 ...
前端性能优化：当页面渲染遇上边缘计算
简介: 当前几种常见的前端性能优化方案仍然不可避免地会存在一些缺点.本文在 ESI (Edge Side Include) 的基础上,提出了一种新的优化思路:边缘流式渲染方案(ESR),即借助 CDN ...
前端性能优化 -- 从 10 多秒到 1.05 秒
关于性能优化是个大的面,这篇文章主要涉及到前端的几个点,如前端性能优化的流程.常见技术手段.工具等. 提及前端性能优化 ,大家应该都会想到雅虎军规,本文会结合雅虎军规融入自己的了解 ...

前端性能优化，之还在为多种多样的知识点整理苦恼吗，进来看看吧。

前端性能优化，之还在为多种多样的知识点整理苦恼吗，进来看看吧。相关推荐

最新文章

热门文章