浏览器

标签：导致   网页   font   缓存   win   ima   span   mod   处理   

浏览器的核心

• 渲染引擎：将网页代码渲染为用户视觉可以感知的平面文档
• JavaScript解释器（又称JavaScript引擎）：读取网页中的 JavaScript 代码，对其处理后运行

渲染引擎

网页处理，通常分成四个阶段：（并非严格按顺序执行）

• 解析代码：HTML 代码解析为 DOM，CSS 代码解析为 CSSOM（CSS Object Model）
• 对象合成：将 DOM 和 CSSOM 合成一棵渲染树（render tree）
• 布局：计算出渲染树的布局（layout）
• 绘制：将渲染树绘制到屏幕

其中，渲染树转换为网页布局，称为“布局流”（flow）；布局显示到页面的过程，称为“绘制”（paint）。两者均有阻塞效应。

注意，重流（reflow）和重绘（repaint）不一定一起发生，重流必然导致重绘，重绘不一定需要重流。

优化技巧

• 使用documentFragment操作DOM
• 缓存 DOM 信息
• 使用 CSS class 一次性改变样式
• 使用window.requestAnimationFrame()，因为它可以把代码推迟到下一次重流时执行，而不是立即要求页面重流
• 使用虚拟DOM（virtual DOM）库

浏览器

标签：导致   网页   font   缓存   win   ima   span   mod   处理   

原文地址：https://www.cnblogs.com/wjcx-sqh/p/9222335.html