前端性能优化之浏览器渲染原理和关键渲染路径、复合线程、图层及优化、JS 开销及优化和 HTML 和 CSS 优化

一、浏览器渲染原理和关键渲染路径

浏览器构建渲染树，DOM 树和 CSSDOM 树合成为 Render Tree 渲染树。
浏览器的渲染流程，如下所示：
JavaScript -> Style -> Layout -> Paint -> Composite。
布局与绘制，如下所示：

渲染树只包含网页需要的节点
布局计算每个节点精确的位置和大写，盒模型
绘制是像素化每个节点的过程

影响回流的操作，如下所示：

添加、删除元素
操作 styles
display: none
offsetLeft、scrollTop、clientWidth
移动元素位置
修改浏览器大小、字体大小

避免布局抖动 Layout thrashing，如下所示：

避免回流
读写分离

使用 FastDOM 可以批量的对 DOM 的读写操作，进行性能提升。

二、复合线程、图层及优化

复合线程，如下所示：

将页面拆分图层进行绘制再进行复合
利用 DevTools 了解网页的图层拆分情况
哪些样式仅影响复合

减少重绘的方案

利用 DevTools 识别 paint 的瓶颈
利用 will-change 创建新的图层

对于事件处理函数，可以使用防抖处理。
React 时间调度的基本原理，如下所示：

requestIdleCallback 的问题
通过 rAF 模拟 rIC

三、JS 开销及优化

JavaScript 的开销缩短解析时间， JavaScript 的开销会存在于加载、执行、解析和编译中。
JavaScript 开销减少的方案，如下所示：

Code splitting 代码拆分，按需加载
Tree shaking 代码减重

JavaScript 减少主线程工作量，如下所示：

避免长任务
避免超过 1KB 的行间脚本
使用 rAF 和 rIc 进行时间调度

对于渐进式启动 Progressive Bootstrapping，可见不可交互与最小可交互资源集。
V8 优化机制，如下所示：

脚本流
字节码缓存
懒解析

抽象语法树，如下所示：

源码 -> 抽象语法树 -> 字节码 Bytecode -> 机器码
编译过程会进行优化
运行时可能发生反优化

函数的解析方式，如下所示：

lazy parsing 懒解析、eager parsing 饥饿解析
利用 Optimize.js 优化初次加载时间

对象优化，如下

以相同顺序初始化对象成员，避免隐藏类的调整
实例化后避免添加新属性
尽量使用 Array 代替 array-like 对象
避免读取超过数组的长度
避免元素类型转换

四、HTML 和 CSS 优化

HTML 优化，如下所示：

减小 iframes 使用
避免 table 布局
压缩空白符
删除注释
避免节点深层级嵌套
CSS 和 Javascript 尽量外链
删除元素默认属性

如果借助工具，可以使用 html-minifier 去压缩 HTML。
对于样式计算开销，可以利用 DevTools 测量样式计算开销。
对于 CSS 优化，如下所示：

降低 CSS 对渲染的阻塞
利用 GPU 进行完成动画
使用 contain 属性
使用 font-display 属性

前端性能优化之浏览器渲染原理和关键渲染路径、复合线程、图层及优化、JS 开销及优化和 HTML 和 CSS 优化相关推荐

浏览器渲染机制面试_前端面试大全：浏览器渲染原理-文件无法渲染
在这一篇文章中,我们将一起学习浏览器渲染原理这部分的知识.你可能会有疑问,我又不是做浏览器研发的,为什么要来学习这个?其实我们学习浏览器渲染原理更多的是为了解决性能的问题,如果你不了解这部分的知识,你 ...
（三）渲染优化 (与浏览器为友，共进退)
渲染优化浏览器渲染原理和关键渲染路径浏览器的渲染流程 1.浏览器构建对象模型(两棵树) 2.浏览器构建渲染树回流与重绘, 如何避免布局抖动 Layout(布局)与Paint(绘制) 影响回流的操 ...
【优化】1141- 网页渲染性能优化 —— 渲染原理
作者:晨风明悟链接:https://zhuanlan.zhihu.com/p/39879808 渲染原理在讨论性能优化之前,我们有必要了解一些浏览器的渲染原理.不同的浏览器进行渲染有着不同的实现方 ...
一篇文章理解浏览器渲染原理和机制
浏览器渲染原理和网页打开机制举一个例子,如果说JS是工具,前端开发时操作工具的人.如果说JS是一辆汽车,而前端开发是司机,那么高速公路就是浏览器,这是它的工作环境. 为什么很多新人加入前端开发不好找 ...
高性能Web动画和渲染原理系列（2）——渲染管线和CPU渲染
[摘要] 介绍浏览器渲染原理及CPU渲染流程示例代码托管在:http://www.github.com/dashnowords/blogs 博客园地址:<大史住在大前端>原创博文目录一 ...
【React深入】深入分析虚拟DOM的渲染原理和特性
导读 React的虚拟DOM和Diff算法是React的非常重要的核心特性,这部分源码也非常复杂,理解这部分知识的原理对更深入的掌握React是非常必要的. 本来想将虚拟DOM和Diff算法放到一篇文 ...
动画 + 大白话讲清楚React渲染原理
前言相信很多人跟我之前一样,看到源码两个字觉得触不可及,觉得离自己还很遥远,是需要非常多年的工作经验的大佬才能触及到的领域.就在去年我改变了这个想法,当时被react的几个生命周期执行顺序弄的睡不着 ...
【前端性能优化】浏览器渲染原理与性能优化
目录 1. 浏览器渲染基本步骤 2. 构建DOM树.CSSOM树 3. 构建渲染树 4. 计算渲染树的布局 5. 将布局渲染到屏幕上 6. 渲染优化 1. 浏览器渲染基本步骤浏览器主要有以下步骤: ...
从渲染原理谈前端性能优化
前言合格的开发者知道怎么做,而优秀的开发者知道为什么这么做. 这句话来自<web性能权威指南>,我一直很喜欢,而本文尝试从浏览器渲染原理探讨如何进行性能提升. 全文将从网络通信以及页面渲 ...

前端性能优化之浏览器渲染原理和关键渲染路径、复合线程、图层及优化、JS 开销及优化和 HTML 和 CSS 优化

一、浏览器渲染原理和关键渲染路径

二、复合线程、图层及优化

三、JS 开销及优化

四、HTML 和 CSS 优化

前端性能优化之浏览器渲染原理和关键渲染路径、复合线程、图层及优化、JS 开销及优化和 HTML 和 CSS 优化相关推荐

最新文章

热门文章