1 浏览器发送请求
1.1 输入url地址
1.2 获取IP地址
一般访问网站，输入的都是域名，例如: www.baidu.com，这时浏览器需要获取域名对应的IP地址。
首先查找本地hosts文件，如果没找到就需要DNS查询了。DNS查询分为递归查询和迭代查询两种。
这部分可以使用DNS预解析来加快访问速度
2 网络请求
分为两部分，客户端发送HTTP请求、服务端进行相应
2.1 HTTP请求格式
分为三部分:
- 请求行 包含：请求方式 地址 HTTP版本
- 请求头
- 请求体(不必须有)
GET /index.html HTTP/1.1
Accept:image/gif.image/jpeg,*/*
Accept-Language:zh-cn
Connection:Keep-Alive
Host:localhost
User-Agent:Mozila/4.0(compatible;MSIE5.01;Window NT5.0)
Accept-Encoding:gzip,deflate
username=jinqiao&password=1234
2.2 HTTP响应格式
- 状态行
- 响应头(后面有空行)
- 响应体
2.3 状态码分类
- 1xx：指示信息–表示请求已接收，继续处理。
- 2xx：成功–表示请求已被成功接收、理解、接受。
- 3xx：重定向–要完成请求必须进行更进一步的操作。
- 4xx：客户端错误–请求有语法错误或请求无法实现。
- 5xx：服务器端错误–服务器未能实现合法的请求。
2.4 常见状态码
| 状态码 | 英文名称 | 中文描述 |
|---|---|---|
| 200 | OK | 请求成功。一般用于GET与POST请求 |
| 204 | No Content | 无内容。服务器成功处理，但未返回内容。在未更新网页的情况下，可确保浏览器继续显示当前文档 |
| 301 | Moved Permanently | 永久移动。请求的资源已被永久的移动到新URI，返回信息会包括新的URI，浏览器会自动定向到新URI。今后任何新的请求都应使用新的URI代替 |
| 302 | Found | 临时移动。与301类似。但资源只是临时被移动。客户端应继续使用原有URI |
| 304 | Not Modified | 所请求的资源未修改，服务器返回此状态码时，不会返回任何资源。客户端通常会缓存访问过的资源，通过提供一个头信息指出客户端希望只返回在指定日期之后修改的资源 |
| 400 | Bad Request | 客户端请求的语法错误，服务器无法理解 |
| 401 | Unauthorized | 请求要求用户的身份认证 |
| 403 | Forbidden | 服务器理解请求客户端的请求，但是拒绝执行此请求 |
| 404 | Not Found | 服务器无法根据客户端的请求找到资源 |
| 500 | Internal Server Error | 服务器内部错误，无法完成请求 |
2.5 与缓存相关的HTTP头
| HTTP头 | 中文描述 |
|---|---|
| Expires | 告诉浏览器缓存保存的时间。过了这个时间，缓存器就会向源server发送请求。 |
| Cache-Control | max-age指示客户机能够接收生存期不大于指定时间（以秒为单位）的响应。no-cache指示请求或响应消息不能缓存。 |
| Etag / If-None-Match | 根据内容生成hash值来判断资源是否更新 |
| Last-Modified/If-Modified-Since | 根据最后修改时间来判断资源是否更新 |
3 页面渲染
3.1 浏览器渲染流程（关键渲染路径）
- 1 解析HTML，构建DOM树
- 2 加载、解析css，生成CSSOM树
- 3 加载、执行JS(包括内联和外联)
- 4 构建渲染树（render tree）根据DOM树和CSSOM树,生成渲染树
- 5 布局（layout）根据渲染树将节点树的每一个节点布局在屏幕上的正确位置, 也叫回流
- 6 绘制（painting）：遍历渲染树绘制所有节点，为每一个节点适用对应的样式, 也叫重绘
3.2 样式的加载
加载CSS样式表不会阻塞文档的解析,但一般只有CSS文件加载完后JS才执行
3.3 脚本的加载
浏览器以同步方式解析，加载和执行脚本，它会阻塞文档解析
现在HTML5提供defer和async两个属性支持延迟和异步加载JavaScript文件
网友评论