浏览器渲染过程
目录
流程图
选择浏览器--->输入URL:协议、域名（介绍dns）、端口、文件路径、传输字符串--->
向服务器发出请求（请求行（传输方式、文件路径、协议/版本号）、请求头（Host、Accept、User-Agent、Content-Type）回车、消息体--->通过dns找到ip所在服务器--->服务器给出响应（状态行（协议/版本号、状态码、状态描述）、响应头（Content-Type、Server、Date）、回车、消息体）
具体流程是：
第一步是，在浏览器输入URL,URL是用来寻找资源用的，如果在网络上寻找资源一般会用到http协议，如果是在本地寻找资源会用到file协议。一般在浏览器上输入的是域名，而不是IP，是为了方便和保密性。
第二步是对域名进行解析，域名被解析后会解析出资源所在机器的ip地址，多个域名可能有同一个ip地址。在解析域名时，会按照从浏览器的缓存、系统的hosts文件、路由器缓存、电信服务商的顺序寻找资源所在的ip地址。
第三步，找到ip地址后，在资源所在服务器里进行处理，通过系统里名为Web server的应用对请求进行处理，又或是Web server接收请求反向代理到其他web server。
第四步，网站处理流程，是指通过控制器统合请求和数据、模型管理数据库、视图制作网页模板，然后在浏览器上显示网站的MVC（模型视图控制器）。
第五步，浏览器的处理，html的字符串被解析、比如link的css、script的js、img的图片。然后得到渲染树，绘制在屏幕上。
准备工作
工具：
服务器（我使用阿里云服务器）
浏览器（Chrome、IE）
git bash（在Windows系统环境下操作，Linux和Mac系统可以直接用终端操作）
需要的知识点
URL、DNS、请求、响应、浏览器渲染方式
URL是什么？
Url是统一资源定位符，包含模式（或称协议）、服务器名称（或IP地址）、路径和文件名，如“协议://授权/路径?查询”。完整的、带有授权部分的普通统一资源标志符语法看上去如下：协议://用户名:密码@子域名.域名.顶级域名:端口号/目录/文件名.文件后缀?参数=值#标志
第一部分
http——超文本传输协议资源
https——用安全套接字层传送的超文本传输协议（加密的HTTP）
ftp——文件传输协议
file——当地电脑或网上分享的文件
第二部分
文件所在的服务器的名称或IP地址，后面是到达这个文件的路径和文件本身的名称。服务器的名称或IP地址后面有时还跟一个冒号和一个端口号。
TCP 或 UDP 协议的规则，一个端口对应一个服务
0 到 1023 号端口是保留端口
常用端口：
21 端口 - FTP
80 端口 - HTTP
53 端口 - DNS
443 端口 - HTTPS
1080 端口 - SOCKS 代理
分类
绝对URL，显示文件的完整路径，这意味着绝对URL本身所在的位置与被引用的实际文件的位置无关。
相对URL以包含URL本身的文件夹的位置为参考点，描述目标文件夹的位置。
Dns 是什么？
域名系统，因特网上作为域名和IP地址相互映射的一个分布式数据库，能够使用户更方便的访问互联网，而不用去记住能够被机器直接读取的IP数串。通过主机名，最终得到该主机名对应的IP地址的过程叫做域名解析（或主机名解析）。Dns协议运行在UDP协议之上，使用端口号53。在RFC文档中RFC 2181对Dns有规范说明，RFC 2136对Dns的动态更新进行说明，RFC 2308对Dns查询的反向缓存进行说明。
浏览器输入：域名
Dns输出：IP
baidu.com 对应的 ip 有很多，是因为不同的Dns服务器解析的ip不同
一个域名对应的 ip 是由域名所有者指定的
改 hosts 可以手动指定域名对应的 IP，Windows 的 hosts 文件位于 C:\Windows\System32\drivers\etc
DNS 可能有缓存在：浏览器的缓存、系统的hosts文件、路由器缓存、电信服务商缓存
Dns劫持是什么？
黑客攻击某些域名服务器，将域名对应IP修改。当网友使用浏览器在这些域名浏览器输入域名的，浏览器将会打开黑客指定IP的网页，而不是真正需要的IP网页。
电脑上不了网,为什么修改dns为8.8.8.8或者114.114.114.114？
8.8.8.8是百度提供的一个服务器，114.114.114.114是国内一个比较权威的服务商。当正常的域名解析过程出现问题，可以忽略过程直接在这两个服务器寻找资源。
浏览器请求的格式是怎样的？
1 请求行：动词 路径 协议/版本号 比如： GET /index.html HTTP/1.1
2 请求头：
Host: 1.2.3.4
Accept: html, xhtml, xml
User-Agent: Chrome / Mac
Content-Type： application/x-www-form-urlencoded
3 回车
4 消息体：username=xxxx&password=yyyyy
服务器响应的格式是怎样的？
一个响应
1 状态行：协议/版本号 状态码 状态描述
2 响应头：
Content-Type: text/html;charset=utf-8
server:apache tomcat [告诉浏览器我是tomcat]
Content-Encoding:gzip[告诉浏览器我使用了gzip]
Content-Lenght:80 [告诉浏览器回送的数据大小]
Content-Language:zh-cn[支持中文]
Content-Type:text/html;charset=gb2312[内容格式和编码]
Date: Thu, 23 Feb 2017 13:57:26
3 回车
4 消息体
<!doctype html>
<html>....
<head>... <body>...
常见的状态码由哪些？
200：OK，表示服务器成功返回用户请求的数据，该操作是幂等的（Idempotent）。
301：Moved Permanently， 被请求的资源已永久移动到新位置，并且将来任何对此资源的引用都应该使用本响应返回的若干个URI之一。
302：Found，临时移动。与301类似。但资源只是临时被移动。请求的资源现在临时从不同的URI响应请求。由于这样的重定向是临时的，客户端应当继续向原有地址发送以后的请求。
304 Not Modified 未修改。所请求的资源未修改，服务器返回此状态码时，不会返回任何资源。客户端通常会缓存访问过的资源，通过提供一个头信息指出客户端希望只返回在指定日期之后修改的资源
403：Forbidden ，表示用户得到授权，但是访问是被禁止的。服务器理解请求客户端的请求，但是拒绝执行此请求。
404：NOT FOUND ，用户发出的请求针对的是不存在的记录，服务器没有进行操作，该操作是幂等的。
414 Request-URI Too Large 请求的URI过长（URI通常为网址），服务器无法处理
500 Internal Server Error 内部服务器错误
Web服务器有什么用？
处理用户的Request,寻找域名对应的目录的资源。这些不同的域名在一台机器下，则IP是一致的。
分析请求
curl 发请求，得到响应
curl -L http://baidu.com
curl http://101.200.33.143:8888/index.html
curl 得到响应头
curl --head http://101.200.33.143:8888/index.html
curl 得到头和体
curl -D - http://101.200.33.143:8888/index.html
浏览器解析、渲染顺序
解析：浏览器理解下载到的文件里的字符串
渲染：将节点描绘在屏幕上（DOM树里）
结论
CSS 和 JS 都会阻塞页面渲染，但不会阻塞解析
CSS 有时候会阻塞它前面标签的渲染，有时候不会
Chrome 要等所有 CSS 下载完了，才开始渲染页面（除了动态加载的 CSS）
IE 看到标签就渲染，不等后面的 CSS 下载
JS 不会阻塞它前面的标签的渲染
为什么 CSS 写在 head 里
CSS 下载完之前，不会去展示 后面 的 HTML
CSS 可以预加载，以节约下载时间
一个域名同一时间最多请求4个链接（IE）、20个（Chrome）、10个（其他）
为了好看，不出现白屏（FOUC），避免页面闪烁。
是否要等 CSS 全都下载完再显示页面？
Chrome 不管 HTML 在 CSS 前面还是后面，都要等 CSS 下载完再 展示 HTML
IE 只要看到一个 HTML 标签，就解析渲染。
Firefox（兼容Chrome和IE的特性）
如果 link 在 head 里，那么一定要等 CSS 下载完再展示 HTML；
如果 link 在 body 里，那么看到一个 HTML 标签就展示。
为什么 JS 写在 body 最后
1、JS不影响渲染，可以等渲染完后，再下JS，可以让页面被阻塞时间减少，不会太影响用户体验。
2、JS在前面，可能会获取不到html元素，当然可以通过添加onload函数，等解析后再获取。
技巧
使用 Chrome 开发者工具模拟低网速
将文件变大，使得下载速度变长，便于观察实验结果
