浏览器的加载机制&白屏&FOUC演示

浏览器和JavaScript的基础：

####### 网页是什么：
网页=Html+CSS+JavaScript；
Html：网页内容元素
CSS：控制网页样式；
JavaScript：操作网页内容，实现功能和效果

JavaScript的历史：

ECMAscript和JavaScript的关系：

• 前者是后者的规格，后者是前者的实现。
• JavaScript和java：两者是不同的语言，但存在一定的联系。
• ECMAscript 3和ECMAscript 5的语法是我们现在主要使用的语法；

JavaScript的引用：

• 一般是使用标签或者引入外部文件，一般写在body后面也可以写在前面；

<scrippt src="cssgo.js"> <script>

或者

<script>
alert(1);
</script>

• 注意使用了前者的写法js不能再写在标签内；

浏览器的渲染机制：

从资源请求完成到页面的显示：

1. 解析HTML字符串构建DOM树
2. 解析CSS样式，产生CSSOM树
3. 执行js脚本文件，js加载完成，通过DOM API 和 CSSOM API 来操作DOM树和CSSOM树
4. 浏览器根据DOM树和CSSOM树构建渲染树（rendering tree），渲染树包括显示的节点和节点显示的样式信息，如果某个节点设置了样式 display: none，那么就不会在渲染树中显示，如果设置visibility:hidden渲染树中存在该节点，但不显示。
5. 根据渲染树对每一个节点在页面上进行布局。（reflow）

6. 遍历渲染树，为每一个节点绘制对应的样式，显示到屏幕。(repaint)

   
   浏览器渲染机制

关于Repaint和Reflow

什么是Repaint和Reflow:

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

Reflow的影响：

• Reflow 的成本比 Repaint 的成本高得多的多。DOM Tree 里的每个结点都会有 reflow 方法，一个结点的 reflow 很有可能导致子结点，甚至父点以及同级结点的 reflow。在一些高性能的电脑上也许还没什么，但是如果 reflow 发生在手机上，那么这个过程是非常痛苦和耗电的。
  所以，下面这些动作有很大可能会是成本比较高的:
  1. 当你增加、删除、修改 DOM 结点时，会导致 Reflow 或 Repaint。
  2. 当你移动 DOM 的位置，或是搞个动画的时候。
  3. 当你修改 CSS 样式的时候。
  4. 当你 Resize 窗口的时候（移动端没有这个问题），或是滚动的时候。
  5. 当你修改网页的默认字体时。
• 注：display:none（使此元素不会显示）会触发 reflow，而 visibility:hidden （使元素隐藏）只会触发 repaint，因为没有发现位置变化。

如何优化：

• Reflow是不可避免的，只能将Reflow对性能的影响减到最小,给出下面几条建议：
  1. 不要一条一条地修改 DOM 的样式。与其这样，还不如预先定义好 css 的 class，然后修改 DOM 的 className：
     不好的写法 :

     var left = 10, top = 10; el.style.left = left + "px"; el.style.top = top + "px"; 
     

     推荐写法 :

     el.className += " theclassname";
     

  2. 把 DOM 离线后修改。如：
     (1) 使用 documentFragment 对象在内存里操作 DOM。
     (2) 先把 DOM 给 display:none (有一次 repaint)，然后你想怎么改就怎么改。比如修改 100 次，然后再把他显示出来。
     (3) clone 一个 DOM 节点到内存里，然后想怎么改就怎么改，改完后，和在线的那个的交换一下。
  3. 不要把 DOM 节点的属性值放在一个循环里当成循环里的变量。不然这会导致大量地读写这个结点的属性。
  4. 尽可能的修改层级比较低的 DOM节点。当然，改变层级比较底的 DOM节点有可能会造成大面积的 reflow，但是也可能影响范围很小。
  5. 为动画的 HTML 元件使用 fixed 或 absoult 的 position，那么修改他们的 CSS 是会大大减小 reflow 。
  6. 千万不要使用 table 布局。因为可能很小的一个小改动会造成整个 table 的重新布局。

白屏&FOUC演示

• 白屏和FOUC主要是由于不同浏览器在加载资源是产生的不同问题。
• 在使用一些使用了国外框架的网站时，网页加载很慢就会产生白屏或者FOUC。

FOUC（无样式内容闪烁）

• FOUC是浏览器在加载资源时，加载多少渲染多少，直至完全加载成功并计算渲染成功为止。

白屏

• 白屏是浏览器在加载资源时，出现未加载完全部资源时，选择等待全部资源加载完成之后再进行计算和渲染的等待加载过程。

关于CSS和JS的放置顺序：

• 使用link标签将样式表放在顶部，是为了让css优先加载，防止页面上其他元素（图片，音频，视频等）的加载影响css的加载，同时css也会影响这些元素的加载（例如：浏览器的队列时间等）
• 将js文件放在底部
  1. 脚本会阻塞后面内容的呈现（需要等待脚本加载完成之后页面内的元素才会被呈现）
  2. 脚本会阻塞后面组件的下载（主要是影响图片和其他音频视频等资源的加载）
  3. 脚本用于操作页面上的元素，放在顶部时，元素仍未加载，未出现在文档流中容易出现报错。
  4. 脚本加载完成之后立即执行，如若碰到执行时间比较长，大量计算，循环甚至死循环时会影响后面资源的加载。
  5. 当我们使用一个决定页面上所有元素的呈现的框架时，可以将其放置于顶部，因为该框架不加载好、未执行，页面都是一片空白或是以混乱的样式呈现。
• 对于图片和和css，在加载时会并发加载（如一个域名下同时加载两个文件）。但是加载JavaScript时，会禁用并发，并且阻止其他内容的下载，所以将JavaScript放在页面顶部也会导致白屏现象。

加载异步：

<script src="script.js"> </script>

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

<script async src="script.js"></script>

• 有async，加载后续文档元素的过程和script.js的加载和执行并行进行（异步）。

<script defer src="script.js"></script>

• 有defer，加载后续文档的过程和script.js的加载并行进行（异步），但script.js的执行要在所有元素解析完成之后，DOMContentLoaded事件触发之前完成.

defer和async:

• defer：脚本延迟到文档解析和显示后执行，有顺序；
• async：不保证顺序（加载异步，并在其它资源加载时加载并执行）。