浏览器工作原理与实践
李兵
前盛大创新院高级研究员
立即订阅
6167 人已学习
课程目录
已完结 42 讲
0/4登录后,你可以任选4讲全文学习。
开篇词 (1讲)
开篇词 | 参透了浏览器的工作原理,你就能解决80%的前端难题
免费
宏观视角下的浏览器 (6讲)
01 | Chrome架构:仅仅打开了1个页面,为什么有4个进程?
02 | TCP协议:如何保证页面文件能被完整送达浏览器?
03 | HTTP请求流程:为什么很多站点第二次打开速度会很快?
04 | 导航流程:从输入URL到页面展示,这中间发生了什么?
05 | 渲染流程(上):HTML、CSS和JavaScript,是如何变成页面的?
06 | 渲染流程(下):HTML、CSS和JavaScript,是如何变成页面的?
浏览器中的JavaScript执行机制 (5讲)
07 | 变量提升:JavaScript代码是按顺序执行的吗?
08 | 调用栈:为什么JavaScript代码会出现栈溢出?
09 | 块级作用域:var缺陷以及为什么要引入let和const?
10 | 作用域链和闭包 :代码中出现相同的变量,JavaScript引擎是如何选择的?
11 | this:从JavaScript执行上下文的视角讲清楚this
V8工作原理 (3讲)
12 | 栈空间和堆空间:数据是如何存储的?
13 | 垃圾回收:垃圾数据是如何自动回收的?
14 | 编译器和解释器:V8是如何执行一段JavaScript代码的?
浏览器中的页面循环系统 (6讲)
15 | 消息队列和事件循环:页面是怎么“活”起来的?
16 | WebAPI:setTimeout是如何实现的?
17 | WebAPI:XMLHttpRequest是怎么实现的?
18 | 宏任务和微任务:不是所有任务都是一个待遇
19 | Promise:使用Promise,告别回调函数
20 | async/await:使用同步的方式去写异步代码
浏览器中的页面 (8讲)
21 | Chrome开发者工具:利用网络面板做性能分析
22 | DOM树:JavaScript是如何影响DOM树构建的?
23 | 渲染流水线:CSS如何影响首次加载时的白屏时间?
24 | 分层和合成机制:为什么CSS动画比JavaScript高效?
25 | 页面性能:如何系统地优化页面?
26 | 虚拟DOM:虚拟DOM和实际的DOM有何不同?
27 | 渐进式网页应用(PWA):它究竟解决了Web应用的哪些问题?
28 | WebComponent:像搭积木一样构建Web应用
浏览器中的网络 (3讲)
29 | HTTP/1:HTTP性能优化
30|HTTP/2:如何提升网络速度?
31|HTTP/3:甩掉TCP、TLS 的包袱,构建高效网络
浏览器安全 (5讲)
32 | 同源策略:为什么XMLHttpRequest不能跨域请求资源?
33 | 跨站脚本攻击(XSS):为什么Cookie中有HttpOnly属性?
34 | CSRF攻击:陌生链接不要随便点
35 | 安全沙箱:页面和系统之间的隔离墙
36 | HTTPS:让数据传输更安全
结束语 (1讲)
结束语 | 大道至简
课外加餐 (4讲)
加餐一|浏览上下文组:如何计算Chrome中渲染进程的个数?
加餐二|任务调度:有了setTimeOut,为什么还要使用rAF?
加餐三|加载阶段性能:使用Audits来优化Web性能
加餐四|页面性能工具:如何使用Performance?
浏览器工作原理与实践
登录|注册

26 | 虚拟DOM:虚拟DOM和实际的DOM有何不同?

李兵 2019-10-03
虚拟 DOM 是最近非常火的技术,两大著名前端框架 React 和 Vue 都使用了虚拟 DOM,所以我觉得非常有必要结合浏览器的工作机制对虚拟 DOM 进行一次分析。当然了,React 和 Vue 框架本身所蕴含的知识点非常多,而且也不是我们专栏的重点,所以在这里我们还是把重心聚焦在虚拟 DOM 上。
在本文我们会先聊聊 DOM 的一些缺陷,然后在此基础上介绍虚拟 DOM 是如何解决这些缺陷的,最后再站在双缓存和 MVC 的视角来聊聊虚拟 DOM。理解了这些会让你对目前的前端框架有一个更加底层的认识,这也有助于你更好地理解这些前端框架。

DOM 的缺陷

通过前面一系列文章的学习,你对 DOM 的生成过程应该已经有了比较深刻的理解,并且也知道了通过 JavaScript 操纵 DOM 是会影响到整个渲染流水线的。另外,DOM 还提供了一组 JavaScript 接口用来遍历或者修改节点,这套接口包含了 getElementById、removeChild、appendChild 等方法。
比如,我们可以调用document.body.appendChild(node)往 body 节点上添加一个元素,调用该 API 之后会引发一系列的连锁反应。首先渲染引擎会将 node 节点添加到 body 节点之上,然后触发样式计算、布局、绘制、栅格化、合成等任务,我们把这一过程称为重排。除了重排之外,还有可能引起重绘或者合成操作,形象地理解就是“牵一发而动全身”。另外,对于 DOM 的不当操作还有可能引发强制同步布局布局抖动的问题,这些操作都会大大降低渲染效率。因此,对于 DOM 的操作我们时刻都需要非常小心谨慎。
取消
完成
0/1000字
划线
笔记
复制
© 版权归极客邦科技所有,未经许可不得传播售卖。 页面已增加防盗追踪,如有侵权极客邦将依法追究其法律责任。
该试读文章来自付费专栏《浏览器工作原理与实践》,如需阅读全部文章,
请订阅文章所属专栏。
立即订阅
登录 后留言

精选留言(13)

  • mfist
    1. 频繁更新dom引起的性能问题
    2. 将真实DOM和js操作解耦,减少js操作dom复杂性。
    老师答疑的时候可以介绍下react的fiber吗?感觉李老师的文章通俗易懂,很受益(网上文章分析参差不齐的)
    今日总结:
    为什么会出现虚拟DOM?javascript直接操作DOM可能会引起重排 重绘等操作(强制同步布局和布局抖动)引起性能问题。这是需要一个中间层来优化dom的操作(批量更新dom,优化更新dom细节),虚拟DOM就呼之欲出了。之后从双缓存和MVC模型的角度来解析了虚拟DOM。
    2019-10-03
    2
    4
  • 小兵
    老师,文中的虚拟Dom收集到足够的变化是什么意思?会不会导致页面的响应变慢?
    2019-10-03
    1
    4
  • 柒月
    主要还是解决频繁操作DOM引起页面响应慢的问题。
    虚拟DOM就是一个JS对象,通过diff算法比较新老DOM树的差别,来达到最小化局部更新的目的。
    其本质不过是用JS的运算性能的消耗来换取操作DOM的性能消耗。
    2019-10-03
    1
    2
  • 桃翁
    老师,为什么 React 的 Fiber 不用 async/await 来实现呢?
    2019-10-22
    1
    1
  • 老师,你好。我有两个小疑问:
    1.就是说到新算法的时候,使用协程说让出主线程。前面课程里说道线程同一时刻只能有一个协程能执行,这里说的协程如果还属于主线程的话,我理解的依然会卡主线程,如果不属于相当于新开线程来执行diff算法。请问我是不是哪里理解错了?
    2.就是分析React更新dom,第一步说监听DOM的变化,后面又说React变化的虚拟DOM同步更新到实际DOM,触发DOM的更新。我理解第一步应该是监听虚拟DOM变更函数调用,但是这样由于示例图又不一样了,如果是实际DOM的变化都已经变化了就没后面什么事了吧?
    2019-10-08
    3
    1
  • cn.hfuu.zhou
    老师,能不能举一个例子详细说明一下,虚拟dom怎么就比直接操作dom的效率高一些。
    2019-10-15
  • Luke
    老师能深入分析一下,MVC MVP MVVM这三种架的构演变过程吗?为什么提出这三种架构,主要是解决什么问题,它们之间的区别和联系?网上有很多相关的文章,但是感觉都解释的得不是很清晰。
    2019-10-14
  • Luke
    期待老师新的课程!
    2019-10-14
  • Angus
    我觉主要是更新收集和更新比对这两个方面让虚拟DOM减少了很多直接操作带来的频繁渲染
    2019-10-12
  • code-artist
    哪位有没有vdom更新算法介绍的文章推荐
    2019-10-07
    2
  • 宇宙全栈
    基于 React 和 Redux 构建 MVC 模型的配图中,控制器是不是不能直接改变视图?因为 redux 模型是单向数据流吧
    2019-10-04
  • 隔夜果酱
    李老师后面会考虑React源码类的专栏么?
    网上的视频和文章很多都流于表面,或者生搬硬套的进行解释,看的让人头大.
    如果李老师有精力和兴趣的话,希望可以开专栏为我们指点迷津呀.
    2019-10-03
  • Hurry
    频繁DOM操作是非常消耗浏览器性能的,虚拟DOM核心还是将批量DOM操作后的变化一次性更新到浏览器。
    2019-10-03
    1
收起评论
13
返回
顶部