一 页面的加载和渲染过程
- 一 页面的加载和渲染过程
- 1.1 HTML 加载
- 1.2 其他静态资源下载
- 1.3 DOM树构建
- 1.4 CSSOM 树构建
- 1.5 渲染树构建
- 1.6 布局计算
- 1.7 绘制(Paint)
- 1.8 重排(Reflow)与重绘(Replain)
- 二.前段性能优化总结
- 2.1 页面加载优化
- 2.2 执行优化
- 2.3 样式优化
- 2.4 渲染优化
- 2.5 JavaScript执行优化
当我们在浏览器地址输入一个URL,最终会呈现一个完整页面,大概会经历以下步骤：
域名解析 --> 发起TCP的3次握手 --> 建立TCP连接后发起http请求 --> 服务器响应http请求，浏览器得到html代码 --> 浏览器解析html代码，并请求html代码中的资源（如js、css、图片等） --> 浏览器对页面进行渲染呈现给用户
1.1 HTML 加载
输入URL后首先拿到的是HTML,所以最先下载的是HTML,下载以后会对它进行解析.
1.2 其他静态资源下载
HTML在解析过程中,如果HTML引用其他的外部资源链接,如:JS和CSS和图片时,会启动别的线程来下载这些资源. 特殊的是,当遇到js文件时,HTML的解析会停下来,等JS文件下载完后再进行解析,因为JS有可能改变DOM的结果,重复操作,有白白浪费资源的风险，因此HTML解析器等JS下载完后再进行解析
1.3 DOM树构建
在HTML解析时候,解析器会把HTML解析成一个个DOM对象,而这些DOM最终会构建DOM 树。
1.display的元素,注释存在于DOM树中
2.js会阻塞DOM树的构建从而阻塞其他资源的并发加载,因此最好把JS放在最后加载
3.对可能异步加载的JS使用 async 和defer
复制代码
1.4 CSSOM 树构建
在CSS下载完后,CSS解析器会对CSS进行解析,会CSS解析成CSS对象，最终构建把这些CSS组装起来,构建CSSOM树。
1\. js 会阻塞cssom的构建,只有js访问才会阻塞
2\. cssom树的构建和dom树的构建是并行的
3\. 减少css的嵌套(最好6层以内)和定义合理的css可以提高解析速度
复制代码
1.5 渲染树构建
DOM树和CSS构建完成后,浏览器会根据这两棵树再构建一颗渲染树,它包含了可见的dom节点和节点的样式
1.渲染树的根节点是HTML节点
2.renderObject和dom不是完全对应的,不可见元素display:none是不会放入渲染树中的
3.visibility:hidden 的元素在Render Tree中
复制代码
1.6 布局计算
渲染树构建完成后,所有的元素关系需要和应用样式关联,计算器会计算元素的大小和绝对位置.
1.float,flexd,absolute的元素会发生偏移
2.我们常说的脱离文档流,就是脱离布局。
复制代码
1.7 绘制(Paint)
布局计算完成后,浏览器就可以在页面上渲染了,整个页面就呈现在屏幕上了.
1.8 重排(Reflow)与重绘(Replain)
渲染树是动态构建的,DOM节点和CSS节点的任何改变都会导致渲染树的重新构建,渲染树的改动就会导致重排与重绘
-
重排
当我们在DOM树中新增,修改,删除,或者改变某些元素大小,位置,布局方式的时候,都要重新计算. 在改动发生时,要重新经历DOM的改动,CSSOM的构建,渲染树的构建,布局计算和绘制整个流程,这个过程就叫 "重排" ,有点也就 "回流"
回流的触发
1.dom元素的位置和大小发生改变
2.dom元素的增加和删除
3.伪类的激活
4.窗口大小的改变
5.增加和删除class样式
6.动态计算修改class样式
浏览器并不会每一次reflow都会执行,而是会积攒一部分,这个过程也被成为异步reflow,或者增量异步reflow. 但是有些情况浏览器是不这样做的,比如 resize 窗口,改变页面默认的字体等这些操作,浏览器会马上 reflow
复制代码
-
重绘
重绘是我们改动元素的字体颜色,背景色等外观元素时候,并不会改变它的大小,也不会影响其他元素的布局,这个时候就不需要重新构建渲染树。浏览器会对元素的样式重新绘制,这个过程叫做 "重绘"
重绘的触发： 任何对元素样式,如color,background-color等熟悉的改变,JS和CSS都会引起重绘。
二.前段性能优化总结
2.1 页面加载优化
-
减少HPPT 请求
尽量减少 页面的请求数(首次加载同时请求数不能超过4个),移动设备浏览器同时响应请求为四个请求(Android支持四个,IOS 5+ 支持6个)
合并JS和CSS
使用 CSS 精灵图
-
使用CDN
CDN（内容发布网络）是一组分布在多个不同地理位置的Web服务器，用于更加有效地向用户发布内容。在优化性能时，向特定用户发布内容的服务器的选择基于对网络慕课拥堵的测量
-
缓存资源 添加Expires头
使用缓存可减少向服务器的请求数,节省加载时间,所有的静态资源都要在服务器端设置缓存,并且使用长缓存(使用时间戳更新缓存)
-
压缩代码
减少资源大小可以加快网页显示速度,对代码进行压缩,并在服务器端设置Gzip
-
无阻赛
头部内联的样式的样式和脚本会阻塞页面的渲染,样式放在头部并用 link 方式引入,脚本放在尾部 并用异步方式加载
-
按需加载
讲不影响首屏的资源和当前屏幕不用的资源放在用户需要时才加载,可大大提升显示速度和降低总体流量
-
减少Cookie
Cookie会影响加载速度,静态资源域名不适用Cookie
-
避免重定向
当页面发生了重定向，就会延迟整个HTML文档的传输。在HTML文档到达之前，页面中不会呈现任何东西，也没有任何组件会被下载。
2.2 执行优化
-
CSS 写在头部,JS写在尾部异步执行
将样式表放在头部对于实际页面加载的时间并不能造成太大影响，但是这会减少页面首屏出现的时间，使页面内容逐步呈现，改善用户体验，防止“白屏”
脚本放在底部对于实际页面加载的时间并不能造成太大影响，但是这会减少页面首屏出现的时间，使页面内容逐步呈现。
js的下载和执行会阻塞Dom树的构建（严谨地说是中断了Dom树的更新），所以script标签放在首屏范围内的HTML代码段里会截断首屏的内容。
避免img,iframe 等的src为空,为空会重新加载当前页面,影响速度和效率
尽量避免重置图像大小：多次重置图像大小会引发图像的多次重绘，影响性能
图像尽量避免使用DataURL
2.3 样式优化
避免在HTML 中书写style
避免CSS 表达式
使用flexbox 代替传统的布局模型
正确使用 display熟悉
不声明过多的 font-size
值为0时不需要任何单位
避免让选择符看起来像正则表达式：高级选择符执行耗时长且不易读懂，避免使用
2.4 渲染优化
HTML 使用 viewport ：viewport 可以加速页面的渲染
减少 DOM 节点：DOM 节点太多影响页面的渲染，应尽量减少 DOM 节点
动画优化 尽量使用 CSS3 动画
合理使用 requestAnimationFrame 动画代替 setTimeout
使用 requestAnimationFrame 监听帧变化，使得在正确的时间进行渲染；
-
高频事件优化：Touchmove 和 Scroll 事件可导致多次渲染
函数节流
函数防抖
使用requestAnimationFrame监听帧变化：使得在正确的时间进行渲染
增加响应变化的时间间隔：减少重绘次数
-
GPU加速：使用某些HTML5标签和CSS3属性会触发GPU渲染，请合理使用(过渡使用会引发手机耗电量增加)
HTML标签：video、canvas、webgl
CSS属性：opacity、transform、transition
2.5 JavaScript执行优化
减少重绘和回流
减少不必要的DOM操作
尽量改变class 而不是Style,使用classList 代替 className
缓存DOM与计算,每次DOM 选择都要计算,用一个变量保存这个值
尽量使用事件代理
转载自：https://juejin.im/post/6844904004300832775#11-html-%E5%8A%A0%E8%BD%BD