阅读器的主要功能是将用户挑选的 web 资本显现出来，它须要从服务器要求资本，并将其显现在阅读器窗口中，资本的花样通常是 HTML，也包括 PDF、image 及其他花样。
阅读器的线程
阅读器是多线程的，它们在内核制控下相互配合以坚持同步。一个阅读器最少完成三个常驻线程：JavaScript 引擎线程，GUI 衬着线程，阅读器事宜触发线程。
- GUI 衬着线程：担任衬着阅读器界面 HTML 元素，当界面须要重绘（Repaint）或由于某种操纵激发回流（reflow）时，该线程就会实行。在 Javascript 引擎运转剧本时期，GUI 衬着线程都是处于挂起状况的，也就是说被”凝结”了。
- JavaScript 引擎线程：主要担任处置惩罚 Javascript 剧本递次
- 定时器触发线程：阅读器定时计数器并非由 JavaScript 引擎计数的， JavaScript 引擎是单线程的， 假如处于壅塞线程状况就会影响记计时的正确， 因而阅读器经由历程零丁线程来计时并触发定时。
- 事宜触发线程：当一个事宜被触发时该线程会把事宜增加到待处置惩罚行列的队尾，守候 JS 引擎的处置惩罚。这些事宜包括当前实行的代码块如定时使命、阅读器内核的其他线程如鼠标点击、AJAX 异步要求等。由于 JS 的单线程关联一切这些事宜都得列队守候 JS 引擎处置惩罚。定时块任何和 ajax 要求等这些异步使命，事宜触发线程只是在抵达定时时候或者是 ajax 要求胜利后，把回调函数放到事宜行列当中。
- 异步 HTTP 要求线程：在 XMLHttpRequest 在衔接后是经由历程阅读器新开一个线程要求， 将检测到状况变动时，假如设置有回调函数，异步线程就发作状况变动事宜放到 JavaScript 引擎的处置惩罚行列中守候处置惩罚。在发起了一个异步要求时，http 要求线程则担任去要求服务器，有了相应今后，事宜触发线程再把回到函数放到事宜行列当中。
阅读器衬着流程
1.剖析 html，构建 dom 树；剖析 CSS 会发作 CSS 划定规矩树
阅读器剖析 HTML 文档的源码，然后组织出一个 DOM 树，DOM 树的构建历程是一个深度遍历的历程，当前节点的一切子节点都构建好今后才会去构建当前节点的下一个兄弟节点。
阅读器对 CSS 文件内容举行剖析，一般来说，阅读器会先查找内联款式，然后是 CSS 文件中定义的款式，末了再是阅读器默许的款式，构建 CSS Rule Tree。
2.构建（construct） render 树
依据 DOM 树和 CSSOM 树来组织 Rendering Tree。注重：Rendering Tree 衬着树并不等同于 DOM 树，由于一些像 Header 或 display:none 的东西就没必要放在衬着树中了。
3.规划（layout） render 树
有了 Render Tree，阅读器已能晓得网页中有哪些节点、各个节点的 CSS 定义以及他们的从属关联，从而去计算出每一个节点在屏幕中的位置。
4.绘制（painting） render 树
根据算出来的划定规矩，经由历程显卡，把内容画到屏幕上。
5.回流（reflow）
当阅读器发明某个部份发作了点变化影响了规划，须要倒回去从新衬着，行家称这个回退的历程叫 reflow。reflow 会从 <html> 这个 root frame 最先递归往下，顺次计算一切的结点多少尺寸和位置。
6.重绘（repaint）
转变某个元素的背景色、笔墨色彩、边框色彩等等不影响它四周或内部规划的属性时，屏幕的一部份要重画，然则元素的多少尺寸没有变。
阅读器对 CSS 和 JS 的剖析划定规矩
CSS：
- CSS 放在 head 中会壅塞页面的衬着（页面的衬着会比及 css 加载完成）
- CSS 壅塞 JS 的实行 （由于 GUI 线程和 JS 线程是互斥的，由于有能够 JS 会操纵 CSS）
- CSS 不壅塞外部剧本的加载（不壅塞 JS 的加载，但壅塞 JS 的实行，由于阅读器都邑有预先扫描器）
JS：
- 直接引入的 JS 会壅塞页面的衬着（GUI 线程和 JS 线程互斥）
- 异步加载的 JS（script 标签中增加 defer 属性） 不壅塞页面的衬着
- 异步加载的 JS（script 标签中增加 async属性），下载历程不壅塞页面衬着，当下载完成后立时实行，壅塞页面衬着
- JS 不壅塞资本的加载
- JS 递次实行，壅塞后续 JS 逻辑的实行
HTML 页面加载和剖析流程
- 用户输入网址（假定是个 html 页面，而且是第一次接见），阅读器向服务器发出要求，服务器返回 html 文件；
- 阅读器最先载入 html 代码，发明＜ head ＞标签内有一个＜ link ＞标签援用外部 CSS 文件；
- 阅读器发出 CSS 文件的要求，服务器返回这个 CSS 文件；（同时 GUI 衬着线程继承实行，互不影响）
- 阅读器继承载入 html 中＜ body ＞部份的代码，而且 CSS 文件已拿到手了，最先衬着页面；
- 阅读器在代码中发明一个＜ img ＞标签援用了一张图片，向服务器发出要求。此时阅读器不会比及图片下载完，而是继承衬着背面的代码；
- 服务器返回图片文件，由于图片占用了肯定面积，影响了背面段落的排布，因而阅读器须要回过头来从新衬着这部份代码；
- 阅读器发明了一个包括一行 Javascript 代码的＜ script ＞标签，直接运转；
- Javascript 剧本操纵某个元素，它敕令阅读器隐蔽掉代码中的某个标签 （style.display=”none”）。阅读器会从新衬着这部份代码；
- 碰到 ＜/html ＞，流程完毕；
- 当用户操纵，页面发作交互，阅读器发明某个部份发作了点变化影响了规划，阅读器回流（reflow）；转变某个元素的背景色、笔墨色彩、边框色彩等等不影响它四周或内部规划的属性时，阅读重视绘（repaint）。
HTML 页面加载优化
- 页面减肥。页面的肥瘦是影响加载速率最主要的要素删除不必要的空格、解释。将 inline 的 script 和 css 移到外部文件，能够运用 HTML Tidy 来给 HTML 减肥，还能够运用一些压缩工具来给 JavaScript 减肥；
- 削减文件数目。削减页面上援用的文件数目能够削减 HTTP 衔接数。很多 JavaScript、CSS 文件能够兼并最好兼并；
- 削减域名查询。DNS 查询和剖析域名也是斲丧时候的，所以要削减对外部 JavaScript、CSS、图片等资本的援用，差别域名的运用越少越好；
- 缓存重用数据；
- 优化页面元素加载递次。起首加载页面最初显现的内容和与之相干的 JavaScript 和 CSS，然后加载 DHTML 相干的东西，像什么不是最初显现相干的图片、flash、视频等很肥的资本就末了加载；
- 削减 inline JavaScript 的数目。阅读器 parser 会假定 inline JavaScript 会转变页面构造，所以运用 inline JavaScript 开支较大，不要运用 document.write()这类输出内容的要领，运用当代 W3C DOM 要领来为当代阅读器处置惩罚页面内容；
- 运用当代 CSS 和正当的标签。运用当代 CSS 来削减标签和图象，比方运用当代 CSS+笔墨完全能够替换一些只要笔墨的图片，运用正当的标签防止阅读器剖析 HTML 时做“error correction”等操纵，还能够被 HTML Tidy 来给 HTML 减肥；
- 不要运用嵌套 tables；
- 指定图象和 tables 的大小。假如阅读器能够立时决议图象或 tables 的大小，那末它就能够立时显现页面而不要从新做一些规划部署的事情，这不仅加快了页面的显现，也预防了页面完成加载后规划的一些不当的转变。
