从浏览器渲染到canvas优化
背景
浏览器输入url到渲染呈现给用户，是常见的一道面试题，候选人一般都只会答到renderTree这步骤，但是renderTree后面呢？可能关心的人就少了。 主要内容
- 基础概念
- 浏览器加载过程
- canvas上下文
- canvas如何优化
基础概念
什么是rendering(渲染）?
Rendering events are about computing styles associated with each DOM node (i.e. "Style Recalculate") and elements position on the page ("Layout").
if your page spends a lot of time rendering, this is because of the structure of its DOM and CSS (e.g. a large DOM tree),
渲染是确定Dom结构的过程。
什么是Painting(绘制）?
Paint category is about actually painting pixels and includes events like "Paint" itself and "Decode Image" / "Resize Image".
while significant paint times often mean the appearance of the page is affecting the performance (e.g. some styles are expensive to paint or an image is too large).
绘制是转换具体像素坐标的过程。
