摘要：性能优化网站的性能细线在几个方面网站首页加载速度动画的流畅度通过分析浏览器的渲染原理资源对渲染的影响，得出优化网站性能的办法。查看性能的工具的面板录制网页加载的过程，分析记录浏览器渲染过程中每个过程的耗时。通过引入，可以避免阻塞。
1 Web性能优化
Web网站的性能细线在几个方面：
网站首页加载速度
动画的流畅度
通过分析浏览器的渲染原理、资源对渲染的影响，得出优化网站性能的办法。
2 查看性能的工具Chrome的Timeline面板录制网页加载的过程，分析记录浏览器渲染过程中每个过程的耗时。
2.1 录制时注意事项禁用浏览器缓存：Network Tab下的disable cache
关闭Chrome扩展或者启用隐身模式
根据使用场景，模拟真实的网络加载情况：Network Tab下的throttling下拉按钮
2.2 Timeline工具的各个组成在Main Thread中可以看到页面渲染的整个过程及耗时
3 浏览器渲染原理 3.1 DOM树构建DOM树的构建过程
根据HTML文档的内容，根据标签进行分词Token
根据Token生产对应的节点Node
将节点根据嵌套关系组合为一棵对象节点树DOM
浏览器解析文档对象模型DOM是增量进行的，无需等待整个HTML文档加载完毕，便可以开始解析DOM
CSSOM解析会阻塞HTML Parser；JavaScript脚本文件执行会阻塞HTML解析；CSS、JavaScript、Images和Font等静态资源的异步加载的，渲染页面与CSS解析与JavaScript执行会有相互的依赖
CSSOM的解析依赖于选择器，选择器的匹配是从内到外的。所以选择器嵌套层次越深，匹配的时间会越长。
3.3 RenderTree树的构建CSSOM只解析可视部分body标签中的内容，将所有匹配的元素共同构建一个CSSOM树，从根节点一次向下，所有节点的属性向下继承
利用DOM和CSSOM组合构建生成RenderTree，对应Recaculate Style
3.4 LayoutRenderTree中包含所有渲染网页必须的节点
无需渲染的节点不会被添加到RenderTree中，如head和display:none;的节点
visibility: hidden;的节点会添加到RenderTree中
Layout利用渲染树的信息，计算渲染树中所有节点在页面上的位置和大小。
类似绘画中各个元素位置摆放及尺寸规划
会引起页面重新Layout的操作：所有改变节点位置和大小的操作
屏幕旋转
浏览器视窗改变
与大小、位置相关的CSS属性
增加与删除DOM元素
viewportLayout操作比较耗时，对于动画中频繁引起Layout的操作（元素位置移动），最好使用transform代替，可以使用GPU进行动画处理（将Layout重绘在GPU完成）
如果页面body元素设置的宽度为100%，并且根元素html没有明确设置宽度绝对值，此时body元素的宽度等于viewport的宽度vw
使用meta标签可以设置浏览器viewport的尺寸。
device-width为浏览器的理想视口（屏幕的物理分辨率）
在移动端，如果不设置device-width，默认viewport宽度为980px，导致文字很小，需要放大
3.5 Paintviewport相当于可视内容布局的容器
填充Layout中的具体内容和样式，将Layout生成的区域填充为最终显示在屏幕上的像素
3.6 总结浏览器通过GET请求获取网页HTML，同时将增量解析HTML文档，生成DOM树
解析DOM节点树时，对于需要加载的资源全部执行异步加载，但是CSS的解析、JavaScript的执行与font文件的下载会阻塞HTML Parser
局部DOM树与CSSOM树构建完成后，立即组装RenderTree进行渲染
4 资源对渲染的影响页面中加载的资源主要包括：css、js脚本文件和font字体与images静态资源，不同资源类型对渲染的影响不同。
4.1 浏览器渲染页面的时机增量解析解析DOM树，并且完成相应CSSOM解析后（RenderTree依赖于DOM树，CSSOM树），开始直接渲染页面。
4.2 CSS加载会阻塞初次渲染 4.3 非关键资源对于首页无关的样式，需要使用适当的方式避免其阻塞初次渲染：
document.write()会阻塞页面初次渲染
使用media=print媒体查询，虽然加载样式表，但只针对打印时才应用该样式，不会阻塞初次渲染。
通过DOMAPI引入CSS，可以避免阻塞。
CSS中。
4.4 JS文件输出：先输出Hello，10s之后再输出World。JS脚本执行会阻塞HTML Parser，但是HTML Parser是增量解析的，并且CSS样式的解析会阻塞JS脚本执行，当解析完Hello时，生成对应DOM节点，并且完成其CSSOM，直接开始渲染Hello节点。
脚本执行完成后再解析后续的World
4.5 非关键JS资源解析阻塞的优化方案JS脚本执行会阻塞HTML Parser；
CSS解析会阻塞JS脚本执行：js可能会读、写CSSOM
虽然JS会阻塞HTML Parser解析；但是浏览器的资源异步加载机制Preload会异步加载head标签内的资源
将JS资源文件放在文档底部，延迟JS的执行（但是存在必须解析完HTML才能加载JS资源，相较于head标签中加载会慢）
使用defer延迟脚本执行：scipt标签的defer属性，脚本会在HTML文档解析完毕后再开始执行；被defer的脚本在执行时严格按照HTML文档中出现的顺序执行---优势可以提早加载JS资源，但是解析完HTML再执行
使用async异步执行脚本：
当script标签有async属性时，脚本执行不会阻塞HTML Parser，只要脚本加载完毕便开始执行
被async的脚本，不会严格按照在HTML文档中的顺序执行
async适用于无依赖的外部独立资源（注意不要错误操作状态）
font字体文件会阻塞内容渲染
图片资源的加载不会阻塞渲染，但是最好在HTML标签中设置图片的高度和宽度，可以在Layout时留出图片渲染的空间，避免页面的抖动
5 优化关键渲染路径优化目标是将下列三个指标压缩到最低：
关键资源数---初次渲染时依赖的资源
关键资源的体积最小---压缩文件或图片
关键资源网络来回数---网络传输资源消耗很多时间
HTTP2可以在传输HTML页面后向客户端推送页面内包含的资源
减少资源的大小：压缩
减少请求的来回时间
参考：奇舞团瓜瓜老师
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/86969.html
摘要：想阅读更多优质文章请猛戳博客一年百来篇优质文章等着你这是性能优化的第篇，上一篇在下面看点击查看性能优化使用分离数据的正确方法性能优化图片优化让网站大小减少性能优化缓存事件来提高性能性能优化种优化和加快网站速度的方法随着我们的应用程序的不断增 showImg(https://segmentfault.com/img/bVbp4cY?w=947&h=424); 想阅读更多优质文章请猛戳Gi...
摘要：性能优化是一个比较大的一个问题，不是一天两天就能学会的，需要在日常中思考和学习。毫秒必争，前端网页性能最佳实践这是一篇讲关于性能优化的。和的压缩对页面引用的样式和文件进行压缩，合并一些和文件减少请求等，也是性能优化的一个方法。 web性能优化是一个比较大的一个问题，不是一天两天就能学会的，需要在日常中思考和学习。先收藏一篇文章，以后有时间在慢慢研究。毫秒必争，前端网页性能最佳实践这是一...
摘要：译文地址译唯快不破应用的个优化步骤前端的逆袭知乎专栏原文地址时过境迁，应用比以往任何时候都更具交互性。使用负载均衡方案我们在之前讨论缓存的时候简要提到了内容分发网络。换句话说，元素的串形访问会削弱负载均衡器以最佳形式 欢迎关注知乎专栏 —— 前端的逆袭欢迎关注我的博客，知乎，GitHub。 译文地址：【译】唯快不破：Web 应用的 13 个优化步骤 - 前端的逆袭 - 知乎专栏原文地...
阅读 1281·2021-09-03 10:29
阅读 3318·2019-08-29 16:24
阅读 1788·2019-08-29 11:03
阅读 1224·2019-08-26 13:52
阅读 2805·2019-08-26 11:36
阅读 2696·2019-08-23 17:19
阅读 459·2019-08-23 17:14
阅读 632·2019-08-23 13:59
