《响应式Web设计性能优化》笔记

Web性能定义：一个终端用户从请求一段内容开始到这段内容显示在用户设备上这段时间的度量值。

运行时性能：应用在运行时对用户输入响应式能力的一个表示。

浏览器请求一个页面的过程：

1. 通过浏览器请求一个web页面，浏览器创建一个线程去执行该请求
2. 发送请求，开始远程DNS查找，远程DNS将输入的URL对应的IP地址返回给浏览器
3. 浏览器与远程web服务器通过三次握手建立一个tcp/ip连接
4. tcp/ip连接建立后，浏览器通过连接发送一个HTTP Get请求到Web服务端。
5. web服务器找到请求的资源，在HTTP响应中将其返回并返回相对应的状态码。（加载一个HTML不只需要一次这个过程，浏览器还要为页面链接的资源发起一个HTTP请求，包括图片、链接的css和js，但只要HTTP请求的源是形同的，浏览器可以重用响相应的tcp连接）

常用状态码：200表示服务端成功响应、301表示永久重定向、302表示临时重定向、403表示请求被拒绝、404表示请求资源不存在、500表示服务端处理请求出错、503表示服务不可用、504表示网关超时

6.浏览器接收HTML页面后开始渲染页面。

现代浏览器的架构：

1. UI层：为浏览器绘制界面
2. 网络层：处理网络连接，建立TCP/IP连接及HTTP请求，处理下载内容并将内容传递给渲染引擎。
3. 渲染引擎：负责将内容绘制到浏览器上，如WebKit
4. JavaScript引擎：负责解析并执行JavaScript，如V8

浏览器内部模型执行过程：

• 用户在浏览器地址栏输入URL，UI层将URL请求传递给网络层
• 网络层建立连接下载页面
• 含有HTML块的数据包到达，传送给渲染引擎，渲染引擎对HTML字符进行解析转换成DOM，然后和CSSOM成渲染树，构建DOM节点，布局DOM元素的位置，描述DOM元素
• 渲染引擎在遇到<script>标签先会暂停下来，其一，<script>指向外部JS文件，解析过程暂停，网络层介入，下载JS文件，然后初始化JS引擎解析，执行该JS 文件；其二，<script>包含的内嵌的JS，渲染引擎暂停，JS引擎被初始化，解析和执行该JS文件。JS文件执行完毕后，之前暂停的渲染引擎恢复运行。所以,JS 会阻塞浏览器渲染。

HTTP响应的五个层次类别:

1. 1XX：信息；请求已收到，正在处理
2. 2XX：成功；请求已经成功接收、解析并执行了
3. 3XX：重定向；需要进一步的跳转和更多的操作来完成当前的请求
4. 4XX：客户端错误；请求包含了语法错误，不能执行
5. 5XX：服务端错误；服务端正在处理一个有效地请求时失败

picture元素是HTML5的新元素，它是一个容器元素，包含多种不同的源标签，基于不同的视口宽度像素密度指定不同的照片，也可以容纳img标签进行降级。<source>元素支持media属性，可以指明关注的媒体类型和目标CSS属性；src属性指明对目标的媒体类型和CSS属性对应下载的图片。

<picture>
<source media=“(min-width:640px,min-device-pixel-ratio:2)” src=“XXX.jpg”>
<source media=“(min-width:1024px,min-device-pixel-ratio:2)” src=“XXX.jpg”>

</picture>