从输入地址到页面渲染，浏览器都做了什么

浏览器的主要功能

浏览器的主要功能是把你从服务器请求到的网络资源呈现在浏览器窗口上，资源通常包含了HTML，PDF， 图片等等，资源通常是由用户指定的URI(Unifor resource Identifier 统一资源定位符)来定位的。

浏览器的主要组成部分:

此处引用了《浏览器是如何工作的》，很好的文章

用户界面(The user interface) - 包含地址栏、前进/后退按钮、书签等等。除了主要的窗口之外你所看到的就是请求的页面。
浏览器引擎 - 查询和操作渲染引擎的入口。
渲染引擎 - 负责呈现请求内容。例如请求内容是HTML, 渲染引擎负责解析HTML以及CSS，并且渲染解析后的内容到屏幕上。
网络链接 - 处理形如HTTP的网络请求。它有针对不同平台的实现接口。
用户界面的后台处理程序(UI Backend) - 用于绘制类似于 bombo 盒子的小部件以及一些窗口，它抛出了各个平台通用的接口，它的底层是使用了操作系统的用户界面方法。
Javascript 解释器 - 用于解析和执行Javascrip代码。
数据存储 - 这是一个持久层。浏览器需要在硬盘上保存各种各样的数据，比如coocies。HTNL5规范定义了'web database',针对浏览器的完整的数据库（尽管比较轻量）片等等。

浏览器的多进程

浏览器是多进程的，有一个主控进程，负责协调控制各子进程，子进程包括：

• 第三方插件进程
• GPU进程，用于3D绘制
  • css3支持手动开启硬件加速，也是利用GPU的能力，但是绝大多数都不需要此操作

  • 如果要对一个元素进行硬件加速，可以应用以下任何一个 property (并不是需要全部，任意一个就可以)：
    perspective: 1000px;
    backface-visibility: hidden;
    transform: translateZ(0);

• 浏览器渲染进程，进程之间互不影响独立控制、渲染、事件处理。每开一个tab就是开一个新的子进程，一个页面崩溃了，浏览器不会崩。

当用户输入网址点击回车后：

1. 浏览器开辟出一条进程接收url
2. 在发送请求前会判断是否触发缓存,有缓存读取缓存中的数据（欲知详情请移步）
3. 如果没有缓存，浏览器向 DNS域名服务器查询，把域名解析成IP找到相应主机（配置host可跳过dns域名解析，加速网页渲染）
4. 三次握手建立tcp连接，发送http请求
5. 服务器响应请求，四次挥手返回数据并断开连接。

浏览器获取到 html后 

1. 解析HTML，生成 DOM 树
2. 解析 CSS，生成 CSS 规则树
3. 合并 DOM 树和 CSS 规则树，生成 render 树
4. 布局 render 树（Layout/Reflow）， 负责元素尺寸、位置的计算
5. 绘制render树（Paint），绘制页面像素信息
6. 浏览器将各层的信息发送给GPU，GPU会将各层合成（composite），显示在屏幕上。

遇到外链时的处理 

当遇到外链资源时，会单独开启一个下载线程去下载资源（http1.1中是每一个资源的下载都要开启一个http请求，对应一个tcp/ip链接）。

遇到css样式资源

• css下载异步，不会阻塞构建DOM树
• 会阻塞渲染，因为构建render树时会等到css下载解析完毕后进行（与浏览器优化有关，防止css规则不断改变，避免了重复构建）
• 有例外，媒体查询（media query）声明的css不会阻塞渲染

遇到js资源

• 阻塞html的解析，遇到一个外链脚本时，需等待js下载解析并执行后继续解析html
• 浏览器的优化，一般现代浏览器有优化，在脚本阻塞时，也会继续下载其他资源（有并发上限），虽然脚本可以并行下载，解析过程仍然是阻塞的，也就是说必须这个脚本执行完成后才会进行接下来的解析，并行下载只是一种优化而已。
• defer与async，普通的脚本是会阻塞浏览器解析的，但是加上这两个属性就变成了异步了，可以等到解析完毕后再执行。
• defer和async是有区别的，前者是延迟执行，后者是异步执行。
  • async是异步执行，异步下载结束后就能执行，不确保执行顺序，一定在onload前，不确定在DOMContentLoaded事件的前或后
  • defer是延迟执行，效果看起来像放到body后面一样。

注：loaded 和 domcontentloaded

• load 事件触发时候，页面上的DOM ，css，js，img都加载完了
• DOMContentLoaded 仅当DOM加载完成，不包括css，图片

遇到img图片类资源

直接异步下载，不阻塞解析，下载完成后直接用图片替换原有src的地方（通常后于css，js文件下载）

 

Tips:

1. 浏览器对html的解析是自上而下的,且js的加载又会阻塞html的解析，所以如果我们把js放在header中，如果此脚本操作了还未完成解析的dom，就会报错，这也就是通常我们把script标签置于body后的原因。
2. DOM解析之后的动作：在这一步浏览器将会把文档标记为可交互的，同时开始解析在“defferred”模式下的scripts文件（在文档解析完成之后将会被执行）。文档的状态将会被修改为“complete”，同时触发一个“load”事件。
3. 综上，我们能知道，如果想把script置于header中，最好用load函数包裹一下，即当页面准备就绪后执行该脚本。

window.οnlοad=function(){SomeJavaScriptCode};