-
Notifications
You must be signed in to change notification settings - Fork 1
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
浏览器渲染原理 #49
Comments
关于浏览器本文内容大部分参考自 解锁浏览器背后的运行机制 浏览器内核可以分成两部分:渲染引擎(Layout Engine 或者 Rendering Engine)和 JS 引擎。早期渲染引擎和 JS 引擎并没有十分明确的区分,但随着 JS 引擎越来越独立,内核也成了渲染引擎的代称(下文我们将沿用这种叫法)。渲染引擎又包括了 HTML 解释器、CSS 解释器、布局、网络、存储、图形、音视频、图片解码器等等零部件。 目前市面上常见的浏览器内核可以分为这四种:Trident(IE)、Gecko(火狐)、Blink(Chrome、Opera)、Webkit(Safari)。 浏览器渲染会使用以下几个关键的概念:
浏览器渲染过程每个页面的渲染都经过了下面几个阶段:
浏览器的 performance 指标:
相关的事件可以参考 chrome-performance页面性能分析使用教程 |
script 的三种加载模式正常 这种加载模式会阻塞浏览器,浏览器需要加载并执行完脚本才会继续往下面解析,这种脚本如果放在 async
也就是说, defer
从应用的角度来说,一般当我们的脚本与 DOM 元素和其它脚本之间的依赖关系不强时,我们会选用 |
JS 操作 DOM 时的性能优化JS 操作 DOM 是有代价的,JS 操作 DOM 本质上是 JS 引擎和渲染引擎之间进行了跨界交流,交流依赖于桥接接口。所以频繁操作 DOM 会产生大量的过桥开销,导致整体运行效率低下。 另一个问题是 DOM 元素被更改之后可能触发浏览器重新布局和绘制,也就是回流和重绘。 缓存变量操作 DOM 时一定要注意不要在循环中频繁地获取 DOM,例如下面,每次循环都要获取一次然后再赋值一次,这其实很没有必要。 for(let i =0;i < 100000; i++) {
document.querySelector('#count').innerHTML += '<span>添加内容</span>'
} 解决办法 let counter = document.querySelector('#count')
let countText = counter.innerHTML
for(let i =0;i < 100000; i++) {
count += '<span>添加内容</span>'
}
counter.innerHTML = countText
|
ref
关注公众号
形成文章
https://mp.weixin.qq.com/s?__biz=MzU3MzcxMzg2Mw==&mid=2247483899&idx=1&sn=7c30a7f988b849dcf78c53d31047b53c&chksm=fd3c3d53ca4bb445fb0f2daef575e692ad02de4b15d605577d05261ba626283cb6ca2b6acdcd&token=797905730&lang=zh_CN#rd
浏览器渲染原理
The text was updated successfully, but these errors were encountered: