浏览器线程

1.浏览器线程

1.JS引擎线程

JS内核，也称JS引擎，负责处理执行javascript脚本。这是JS中的主线程，所以JS是单线程的编程语言，但是实际上JS属于单线程异步。异步是由子线程进行完成，主线程负责调度子线程。所以JS不严格的说也也属于多线程的编程语言

与GUI线程是互斥

2.GUI渲染线程

负责渲染浏览器界面，包括解析HTML、CSS、构建DOM树、Render树、布局与绘制等

当界面需要重绘（Repaint）或由于某种操作引发回流(reflow)时，该线程就会执行

与JS主线程互斥

3.事件监听线程

用来完成事件处理的，例如：click，mouseover…

4.计时器线程

负责处理定时器。setInterval和setTimeout

5.网络线程

负责处理http网络请求的

6.线程的优先级

哪个线程所绑定的处理函数被先触发，谁就先执行
发送请求：经历了哪些过程 五层网络模型 ：物理层、数据链路层、网络层（IP）、传输层(TCP、udp)、应用层
建立连接：三次握手四次挥手

2.浏览器的渲染流程

每个浏览器内核的渲染流程不一样，下面我们主要以webkit为主。

渲染前奏

1. 浏览器输入url，浏览器主进程接管，开了一个下载线程
2. 然后进行HTTP请求（DNS查询、IP寻址等等），等待响应，开始下载响应报文。
3. 将下载完的内容转交给Renderer进程管理
4. 开始渲染…

渲染前置概念

1.DOM Tree： 浏览器将HTML解析成树形的数据结构。

2.CSS Rule Tree：浏览器将CSS解析成树形的数据结构。

3.Render Tree：DOM树和CSS规则树合并后生产Render树。

4.layout：有了Render Tree，浏览器已经能知道网页中有哪些节点、各个节点的CSS定义以及他们的从属关系，从而去计算出每个节点在屏幕中的位置。

5.painting: 按照算出来的规则，通过显卡，把内容画到屏幕上。

6.reflow（回流）：当浏览器发现某个部分发生了点变化影响了布局，需要倒回去重新渲染，内行称这个回退的过程叫 reflow。reflow 会从  这个 root frame 开始递归往下，依次计算所有的结点几何尺寸和位置。reflow 几乎是无法避免的。现在界面上流行的一些效果，比如树状目录的折叠、展开（实质上是元素的显 示与隐藏）等，都将引起浏览器的 reflow。鼠标滑过、点击……只要这些行为引起了页面上某些元素的占位面积、定位方式、边距等属性的变化，都会引起它内部、周围甚至整个页面的重新渲 染。通常我们都无法预估浏览器到底会 reflow 哪一部分的代码，它们都彼此相互影响着。

7.repaint（重绘）：改变某个元素的背景色、文字颜色、边框颜色等等不影响它周围或内部布局的属性时，屏幕的一部分要重画，但是元素的几何尺寸没有变。

注意：display:none的节点不会被加入Render Tree，而visibility: hidden则会，所以display:none会触发reflow，visibility: hidden会触发repaint。

渲染步骤

浏览器内核拿到响应报文之后，渲染大概分为以下步骤

1. 解析html生产DOM树。
2. 解析CSS规则。
3. 根据DOM Tree和CSS Tree生成Render Tree。
4. 根据Render树进行layout，负责各个元素节点的尺寸、位置计算。
5. 绘制Render树(painting)，绘制页面像素信息。
6. 浏览器会将各层的信息发送给GPU，GPU会将各层合成（composite），显示在屏幕上。

JS异步加载方案

由于JS会阻塞后续代码执行，所以希望执行不会阻塞代码。所以官方和开发者设计出了很多解决方案。

1.defer

script标签中增加defer属性，异步加载

1.但要等dom文档全部解析完（dom树生成）才会被执行。

2.只有IE能用;

2.async

script标签中增加async属性，异步加载

1.加载完就执行;async只能加载外部脚本

2.不能把js写在script标签里。

3.w3c标准，IE9以下不支持

3.按需加载

			// 按需加载 封装代码
        function loadScript(url,callback){
            // 1. 创建script标签
            var script = document.createElement('script');
            // 4. 监听script是否下载完成
            // ie中  onreadystatechange 监听对象的状态改变
            if(script.readyState){
                // 如果当前浏览器中有readState这个属性 再去监听script标签的状态改变
                script.onreadystatechange = function(){
                    // 判断script是否加载完成
                    if(script.readyState == 'loaded' || script.readyState == 'complate'){
                        callback();
                    }
                }
            }else{
                script.onload = function(){
                    callback();
                }
            }
            // 2. 
            script.src = url;  // 异步加载js文件  已经变了下载完成,状态不会再发生变化，所以监听事件不会被触发
            // 3. 将标签追加到body中
            document.body.appendChild(script);
        }

        loadScript('01.js',demo);

4.总结

实际开发中我们只需把script标签放在页面的最下面。完全没有必要写赘余代码。

5.js时间线

步骤

1、创建Document对象，开始解析web页面。解析HTML元素和他们的文本内容后添加Element对象和Text节点到文档中。这个阶段document.readyState = ‘loading’，正在加载中。

2、遇到link外部css，创建线程加载，并继续解析文档。

3、遇到script外部js，并且没有设置async、defer，浏览器加载，并阻塞，等待js加载完成并执行该脚本，然后继续解析文档。

4、遇到script外部js，并且设置有async、defer，浏览器创建线程加载，并继续解析文档。
对于async属性的脚本，脚本加载完成后立即执行。（异步禁止使用document.write()）

5、遇到img等，先正常解析dom结构，然后浏览器异步加载src，并继续解析文档。

img 、input、video 、 audio 可替换元素
div 不可替换素

6、当文档解析完成，document.readyState = ‘interactive’，解析完成状态。

7、文档解析完成后，所有设置有defer的脚本会按照顺序执行。（注意与async的不同,但同样禁止使用document.write()）;

8、document对象触发DOMContentLoaded事件，这也标志着程序执行从同步脚本执行阶段，转化为事件驱动阶段。

9、当所有async的脚本加载完成并执行后、img等加载完成后，document.readyState = ‘complete’，window对象触发load事件。

10、从此，以异步响应方式处理用户输入、网络事件等。

总结

1.document三个状态

loading        加载中状态，dom树正在绘制中

interactive   活跃状态，dom树绘制完成

complete    完成状态（老版本的浏览器可能是loaded），dom树绘制完成并且所有的资源下载完成

2.两个事件

DOMContentLoaded    dom树绘制完成触发该事件（这是js中唯一一个含有大写字母的事件，该事件只能使用事件监听器进行绑定）。

load         dom树绘制完成并且所有资源下载完成以后触发的事件