饥人谷学习进阶第 1 天

JavaScript

• 网页 = Html + CSS + JavaScript
• Html：网页元素内容
• CSS：控制页面样式
• JavaScript：操作网页内容，实现功能或者效果

JavaScirpt 发展历史

参考资料

浏览器的渲染机制

• 解析HTML标签，构建DOM树
• 解析CSS标签，构建CSSOM树
• 把DOM和CSSOM组合成渲染树（render tree）
• 在渲染树的基础上进行布局，计算每个节点的几何结构
• 把每个节点绘制到屏幕上（painting）
  浏览器渲染.png
  浏览器的工作原理,可参考How browsers work

关于 Repaint 和 Reflow

对于DOM结构中的各个元素都有自己的盒子（模型），这些都需要浏览器根据各种样式（浏览器的、开发人员定义的等）来计算并根据计算结果将元素放到它该出现的位置，这个过程称之为reflow；当各种盒子的位置、大小以及其他属性，例如颜色、字体大小等都确定下来后，浏览器于是便把这些元素都按照各自的特性绘制了一遍，于是页面的内容出现了，这个过程称之为repaint。

• Rendering: repaint, reflow/relayout, restyle
• Repaint 、Reflow 的基本认识和优化

CSS 和 JS 放置顺序，异步机制

• 使用 link 标签将样式表放在顶部
• 将 JS 放在底部
• 脚本会阻塞后面内容的呈现
• 脚本会阻塞其后面组件的下载（如：图片）

对于图片和CSS，在加载时会并发加载（如一个域名下同时加载两个文件），但在加载JS时，会禁用并发，并阻止其他内容的下载，所以把JS放在页面顶部会导致白屏现象

白屏 & FOUC（Flash of Unstyled Content）无样式内容闪烁

• 白屏：打开浏览器时白屏，经过一定时间，正确的样式突然出现（白色的时间就是白屏）

• 无样式内容闪烁：
  1.打开一个页面，先是一种样式，突然样式变了或变了几次
  2.打开一个页面，里面的元素先是无样式，然后突然样式出现

不同浏览器对资源加载页面渲染不同的处理方式

异步加载

• 没有 defer 或 async
  <script src="script.js"></script>
  浏览器会立即加载并执行指定的脚本，“立即”指的是在渲染该 script 标签之下的文档元素之前，也就是说不等待后续载入的文档元素，读到就加载并执行。

• deger：脚本延迟到文档解析和显示后执行，有顺序
  <script defer src="script.js"></script>
  有defer，加载后续文档元素的过程将和 script.js 的加载并行进行（异步），但script.js的执行要在所有元素解析完成之后，DOMContentLoaded事件触发之前完成。

• async：不保证顺序
  <script async src="script.js"></script>
  有async，加载和渲染后续文档元素的过程将和script.js的加载与执行并行进行（异步）。