直播课-渲染原理,虚拟DOM-笔记

image.png

影响性能,体验的宏观因素

• 响应时间 0~1000
• 动画 16ms
• 加载时间

微观层面的因素

• javascript setTimeout/setInterval, 操作DOM
• css
• layout 布局 在页面中DOM元素的大小,以及位置. reflow 重排, 回流
• paint 绘图 元素颜色, 图片, 文本... repaint , 重绘
• composite 渲染曾合并.

javascript

• 优化javascript 执行效率
• setTimeout/ setInterval 不准
• 用requestAnimationFrame 替换涉 setTimeout的 动画
• Workers (异步执行计算量大的任务)

Css

• css选择器层级不要过深
• layout 尽量用 流式布局 flex
• paint 区域缩小
• innerHtml 比 createElement 要好

渲染页面 DOM -> VDOM

• DOM 占用内存较大
• 用一个相对较小的js对象(虚拟DOM) 捆绑 真是DOM

相关博客

• 浏览器的渲染：过程与原理
  1.要理解, 加载和渲染是两个过程,
  首先渲染是不会影响 加载的, 即, 所有资源的加载 都是并行加载的.
  但加载资源则是有可能影响渲染的.
  渲染中的一个步骤是 解析 dom 和css
  所以 html的加载, css的加载都会阻塞渲染,
  而js是有可能会操作dom和css 所以默认script src 标签的加载也是会阻塞渲染的

2. 其次, js执行和渲染是互相影响的, js执行会阻塞渲染(解析),
   渲染(解析)会阻塞js执行
   所以如果把 script src 放在 link css 的前面,
   script 的加载首先会阻塞渲染, 但即使 script 加载完, 应该也不能执行,
   因为后面还有 link css资源, 要等css 加载完, 解析完 才会 执行 script 里面的 代码.
   所以 一般把 script 标签放在 link 标签的后面?

• 浏览器渲染原理
  相对更细致的描述了一遍,如何构建domtree,csstree,renderTree
  相对更细致的讲了一下, reflow 和repaint,
  什么是reflow, 什么造成reflow, 什么情形会reflow,
  如何尽量避免reflow?
• 《高性能JavaScript》阅读总结
  这本书还没看过,但作者把要点抽出来了. 可以多看两遍
  -你应该知道的前端--渲染原理
  这篇文章和上面的浏览器渲染原理很相似, 大部分内容重复, 但细节方面互相有所补余.
  这篇文章最后的加载时间线上的相关事件整理的是非常的清晰.
• 深入浅出浏览器渲染原理
  这篇文章和前面的文章多有重复, 应该是前面的文章借鉴了这篇文章的部分内容?
  总之,总结的也很nice