浏览器入门学习

浏览器加载机制

---

一、如何异步加载脚本

使用defer或async：

• defer：有顺序的，等文档读取和解析完成之后，再开始解析脚本。
• async：不保证顺序，读取和解析文档的过程会和解析脚本的过程同时进行。

二、ES浏览器脚本语言标准

国际标准化组织ECMA（European Computer Manufacturers Association）规定了浏览器脚本语言的标准，并将这种语言称为ECMAScript。

• ES3： 就是1999年12月发布的ECMAScript 3.0版，成为JavaScript的通行标准，得到了广泛支持。
• ES4：2007年10月，ECMAScript 4.0版草案发布，对3.0版做了大幅升级。草案发布后，由于4.0版的目标过于激进，各方对于是否通过这个标准，发生了严重分歧。以Yahoo、Microsoft、Google为首的大公司，反对JavaScript的大幅升级，主张小幅改动；以JavaScript创造者Brendan Eich为首的Mozilla公司，则坚持当前的草案。
• ES5：2008年7月，由于对于下一个版本应该包括哪些功能，各方分歧太大，争论过于激进，ECMA开会决定，中止ECMAScript 4.0的开发（即废除了这个版本），将其中涉及现有功能改善的一小部分，发布为ECMAScript 3.1，而将其他激进的设想扩大范围，放入以后的版本，由于会议的气氛，该版本的项目代号起名为Harmony（和谐）。会后不久，ECMAScript 3.1就改名为ECMAScript 5就是 ES5。
• ES6：Harmony项目则一分为二，一些较为可行的设想定名为JavaScript.next继续开发，后来演变成ECMAScript 6也就是ES6。

三、浏览器渲染机制

1. 浏览器通过请求的URL进行域名解析，向服务器发起请求，接收文件（HTML、CSS、JS、Images等等）。
2. HTML文件加载后，开始构建DOM Tree。
3. CSS样式文件加载后，开始解析和构建CSS Rule Tree。
4. 浏览器引擎通过DOM Tree和CSS Rule Tree构建Rendering Tree。
5. 在构建Rendering Tree的同时，生成Javascript脚本文件，加载后，通过 DOM API 和 CSSOM API 来操作 DOM Tree 和 CSS Rule Tree。
6. 最终通过调用Native GUI的API绘制网页画面，称为Paint。

四、repaint与reflow的区别

• repaint：当元素改变时，元素在页面当中的位置（比如background-color、border-color、visibility等）没有发生变化，浏览器仅仅会应用新的样式重绘此元素。repaint过程可以不发生reflow。
• reflow：当元素改变时，文档内容\结构、元素位置、几何尺寸也发生变化，浏览器需要对页面进行重新布局。reflow过程一般都伴随着repaint。

五、白屏与FOUC的区别

• 白屏：有的浏览器的渲染引擎是需要等待CSS加载完成之后，对HTML元素进行渲染和展示的，那么在CSS加载完成之前，页面上不有任何信息，这种现象称为白屏（谷歌Chrome和苹果Safari）
• FOUC（无样式内容闪烁）：有的浏览器是先对HTML元素进行展示，然后等待CSS加载完成之后重新对样式进行修改，那么在CSS加载完之前，会首先在页面上显示没有任何CSS渲染的信息，这种现象称为FOUC（IE和Firefox火狐）。