浏览器渲染原理
一、将html文档构建成一棵DOM树
1.可以借助开发者工具里面的TimeLine录制浏览器的工作过程,TimeLine的组成部分
- 控制条:开始记录,停止记录,配置记录期间捕获的信息
- 总览:页面性能高级汇总
- 火焰图(Main Thread):CPU堆叠追踪的可视化
- 详情(Summary):每个CPU任务的详情报告
2.录制时需要注意的是
- 禁用缓存,以便测试首次浏览性能(在Network选项卡中勾选Disabled cache)
- 关闭chrome扩展或使用隐身模式
- 模拟真实网络情况 (在Network选项卡中选择offline自定义模拟网络)
- chrome canary
二、对CSS文档解析生成CSS对象模型(CSSOM)
CSS选择器越详细,匹配工作越多
三、结合DOM和CSSOM生成渲染树(RenderTree),渲染树包括了需要渲染的节点
1.RanderTree只包含渲染网页所需要的节点
2.无需渲染的节点不会被添加到RanderTree中,比如、display:none的节点
3.visibility:hidden的元素会被添加到RenderTree中,因为它虽然不可见,但是占有位置
四、Layout,画出页面轮廓,计算渲染树中节点的位置和大小
1、节点位置和大小是基于viewport计算的
2、在移动端通常将viewport设为浏览器推荐的理想窗口,以保证字体显示大小易于阅读。
3、 触发Layout的场景:
- 屏幕旋转(会改变viewport)
- 浏览器视窗改变
- 与大小位置相关的CSS 属性改变
五、Paint,填充。在Layout画出的轮廓里填充像素
根据background,border,box-shadow等样式,将Layout生成的区域填充为最终将显示在屏幕上的像素
资源对渲染的影响
一、CSS
1.CSS阻塞初次渲染
- 通过style和link两种方式定义的CSS,均会阻塞初次渲染
- 浏览器会在解析完CSS后,再进行渲染。这是为了防止样式突变带来的抖动
- 不管CSS出现在文档中的哪个位置,都会阻塞整个文档的初次渲染
- 通过link标签引入的CSS阻塞时间可能更长,因为加载它需要一个网络来回时间
2.可以针对不同媒体环境拆分CSS文件,并为link标签添加媒体查询(media=”“),当媒体查询不匹配时,不会阻塞初次渲染。
3.通过DOM API动态插入HTMLLinkElement对象,不会阻塞初次渲染。
二、JS
1.通过inline js和external js引入js均会阻塞HTML parse(解析器),因而会阻塞出现在脚本后面的HTML标记的渲染
2.外部script阻塞的时间一般更长,因为可能包含了一个网络来回的时间。
3.JS可以通过document.write修改HTML文档流,因此在执行JS时,浏览器会暂停解析HTML文档流。
4.由于javascript可能会读取或修改CSSOM,因此需等待CSSOM构造完成后,它们才能执行。
5.将JS脚本放到body底部,延迟JS执行
6.使用defer延迟脚本执行<script src="index.js" defer></script>
- 当script标签拥有defer属性时,该脚本会被推迟到整个HTML文档解析完后,再开始执行
- 被defer的脚本,在执行时会严格按照HTML文档中出现的顺序执行
7.使用async异步加载脚本<script src="index.js" async></script>
- 当script标签拥有async属性时,该脚本不会再阻塞HTML parse,且不会被CSS阻塞。
- 脚本只要加载完成,便可开始执行
- 被async的脚本,在执行时不会严格按照在HTML文档中出现的顺序执行
- async适用于无依赖的独立资源
三、font
1、font阻塞内容渲染
- 浏览器为了避免FOUT(flash of unstyled text),会尽量等待字体加载完成后,再显示应用了该字体的内容
- 只有当字体超过一段时间仍未加载成功时,浏览器才会降低使用系统字体,每个浏览器都规定了自己的超时时间
- 但这也带来了FOIT(flash of invisible text)问题,内容无法尽快的被展示,导致空白。
2、异步加载CSS文件,即可避免字体阻塞渲染<link href="index.css" rel="preload">
四、img
图片资源不会阻塞首次渲染
优化关键渲染路径
1、优化目标
将一下指标压缩到最低:
- 关键资源数
- 关键资源体积
- 关键资源网络来回数
2、关键呈现路径优化思路
- 延迟或异步加载资源、从而减少关键资源数量
- 减少资源大小
- 针对关键资源,减少网络请求时间
3、减少关键资源数金额关键资源网络来回数
- 当前页面没有CSS和JS文件时,页面的渲染过程
- 页面中只有CSS文件时
优化方法:使用inline css或者添加media=”print”,改进之后为:
- 当页面中有CSS和JS文件时
优化方法:添加async,异步加载JS脚本,优化之后为:
4、减少内容大小
- 避免返回无用内容
- 针对特定语言的源码压缩(压缩CSS和JS文件)
- 通用文本压缩(使用gzip等)
- 图片压缩
5、减少请求来回时间
- 服务器优化
-chunked encoding
-尽早返回数据
-服务端渲染 - 合理利用缓存
-catch control
-ETag
-localStorage
-Service worker - 优化网络
-HTTP2.0
-CDN
-域名分割
-减少重定向
resource-hint