摘要: 虚拟 DOM 是非常火的技术,两大著名前端框架 React 和 Vue 都使用了虚拟 DOM,所以我觉得非常有必要结合浏览器的工作机制对虚拟 DOM 进行一次分析。当然了,React 和 Vue 框架本身所蕴含的知识点非常多,而且也不是我们专栏的重点,所以在这里我们还是把重心聚焦在虚拟 DOM 上。 阅读全文
posted @ 2021-05-10 18:37 古兰精 阅读(367) 评论(0) 推荐(0) 编辑
摘要: 在前面几篇文章中,我们分析了页面加载和 DOM 生成,讨论了 JavaScript 和 CSS 是如何影响到 DOM 生成的,还结合渲染流水线来讲解了分层和合成机制,同时在这些文章里面,我们还穿插说明了很多优化页面性能的最佳实践策略。通过这些知识点的学习,相信你已经知道渲染引擎是怎么绘制出帧的,不过 阅读全文
posted @ 2021-05-10 15:36 古兰精 阅读(573) 评论(0) 推荐(0) 编辑
摘要: 在前面的文章中我们分析了 CSS 和 JavaScript 是如何影响到 DOM 树生成的,今天我们继续沿着渲染流水线向下分析,来聊聊 DOM 树之后所发生的事情。 在前面的文章《浏览器工作原理:浅析浏览器渲染进程 - HTML、CSS和JavaScript是如何变成页面的?(下) 》中,我们介绍过 阅读全文
posted @ 2021-05-10 14:33 古兰精 阅读(867) 评论(0) 推荐(1) 编辑
摘要: 在上篇文章中我们详细介绍了 DOM 的生成过程,并结合具体例子分析了 JavaScript 是如何阻塞 DOM 生成的。那本文我们就继续深入聊聊渲染流水线中的 CSS。因为 CSS 是页面中非常重要的资源,它决定了页面最终显示出来的效果,并影响着用户对整个网站的第一体验。所以,搞清楚浏览器中的 CS 阅读全文
posted @ 2021-05-10 12:27 古兰精 阅读(223) 评论(0) 推荐(0) 编辑