《高性能网站建设指南》读书笔记

HTTP概述

C/S协议，请求与响应构成，短链接协议，请求响应完成后立刻断开链接。
GET请求包含一个URL，而后是请求头，POST除了URL和请求头外，还拥有请求体，请求以前要组装请求体，因此速度上没有GET请求快。
HTTP响应包含请求码、响应头和响应体。

压缩

若是浏览器支持和服务器支持的话，使用压缩来减小响应大小。浏览器使用Accept-Encoding：gzip,deflate来声明它支持压缩。服务器使用Content-Encoding：gzip来确认响应内容已被压缩。

条件GET请求

对缓存的内容进行确认的请求（经过判断Last-Modified），若是服务端确认有效，则进行下一步确认是否使用缓存。

Expires

在次确认是否使用缓存，客户端和服务端的再一次往返确认，以执行有效性检验。

Keep-Alive

使浏览器和客户端能够在一次链接下进行屡次请求，使用Connecttion头来支出对Keep-Alive的支持，使用Connecttion: close来关闭链接。

减小HTTP请求

80%~90%时间花在HTML文档所应用的组件上（图片、脚本、样式等）进行的HTTP请求上，由于是短链接，每次都须要进行重连，因此耗时长。

图片地图

CSS Sprites

合并图片，把css的背景图片合并在一张图片中，经过background-position来控制显示。

内联图片

经过是使用data:URL模式，如使用base64流图片，这样的图片无需进行HTTP请求。

合并脚本和样式表

每一个脚本与样式表都要创建一次HTTP请求，与合并图片相似，把脚本和样式表合并在一块儿，减小HTTP请求次数。

使用内容发布网络（CDN）

内容发布网络

一组分布在多个不一样地理位置的WEB服务器，用于更加有效的向用户发布内容。CDN能够选择地理位置最近的或者响应时间最短的服务器对其内容进行响应。

过程原理

1. 请求域名
2. 浏览器对域名进行理解
3. CDN域名服务器返回指定域名的CNAME
4. 浏览器对CNAME域名进行解析，获得CDN缓存服务器的IP地址
5. 根据CDN缓存服务器的IP地址再一次进行请求
6. 缓存服务器经过Cache内部专用DNS解析获得实际IP，并向该IP提交资源请求
7. 缓存服务器获得资源后进行本地保存和返回给浏览器客户端。

添加Expires头

经过使用长久的Expires头，可使一些资源被缓存，这会会在后续的页面浏览中避免没必要要的HTTP请求。

Expires头

Web服务器用Expires头来告诉客户端，可使用一个组件的当前副本，知道指定时间为止。
如Expires: Thu 15 Apr 2010 20:00:00 GMT
这是一个长久有效的Expires头，告诉浏览器该响应有效性持续到2010年4约14日为止，若是为一个页面中的一张图片返回了这个头，浏览器在后续的页面浏览中会使用缓存的图片，这将减小一个HTTP请求的数量。

Max-Age

Expires用的是一个特定的时间，它要求服务器和客户端的时钟严格同步，Cache-Control：Max-Age能够克服这种限制，Cache-Control使用max-age指令指定组件被缓存多久，它以秒为单位定义了一个更新窗。

压缩组件

若是HTTP请求产生的响应包很小，传输时间就会减小，由于只须要将很小的包从服务器传输到客户端，这样对速度较慢的带宽效果尤为明显。

压缩是如何工做的

从http1.1开始，Web客户端能够经过HTTP请求头中的Accept-Encoding来表示对压缩的支持。gzip是目前最流行和最有效的方法，deflate效果略逊且不太流行。

压缩什么

能够压缩HTML、JSON、XML、脚本和样式（不少网站没有作）。
图片和PDF不该该压缩，由于它们原本就被压缩了。

压缩成本：服务器CPU资源、客户端要对压缩的文件进行解压。

代理缓存

对代理服务器来讲，能够缓存来自web服务器的资源，可是不一样的浏览器对gzip的支持不同，那么假如代理服务器缓存了一份gzip过的组件，可是一个不支持gzip的浏览器请求了这个代理服务器，那么将没法正常解压这个组件，因此须要在空缓存，也就是第一次请求是把给请求头加上Vary：Accept-Encoding，告诉代理服务器，为Accept-Encoding请求头的每一个值多缓存一份，这样有无Accept-Encoding：gzip均可以进行处理了。

将样式表放在顶部

样式表与脚本的放置顺序决定了下载的优先级，因为CSS会阻塞DOM的渲染，因此CSS放在顶部，可使页面第一次渲染的时候把样式呈现完整，若是CSS放在底部，页面会先呈现没有样式的页面，等CSS样式加载完成，在进行一次回流重绘，下降了用户体验。

将脚本放在底部

浏览器为了保证脚本的执行顺序，在解析html的时候，遇到JavaScript脚本标签，会阻止浏览器的并行加载。假如脚本放在页面顶部的话，会阻塞对其余内容的下载和呈现，直至脚本加载完毕，因此须要把脚本放在页面底部，这样不会阻止页面内容的呈现，并且页面中的可视组件能够今早下载。

避免CSS表达式

CSS表达式，即在CSS中是用JavaScript表达式，以下

background-color: expression((new Date()).getHours() % 2 ?  "#b8d4ff" : "#f08a00")

更新表达式

表达式的问题在于对其进行求值的频率比人们指望的要高，它不仅在页面呈现的大小改变时求值，当页面滚动、甚至用户鼠标在页面上移动时都要求值。也正由于更新频率过高，因此会验证影响页面的性能。

一次性表达式

使用代码处理，让更新频率只执行一次，以下

background-color: expression(altBgcolor(this))

function altBgcolor(elem) {
    Elem.style.backgroundColor = (new Date()).getHours() % 2 ?  "#b8d4ff" : "#f08a00"
}

使用外部JavaScript和CSS

内联的优势：

• 能够减小http请求

缺点：

• 缺点为没法使用浏览器缓存
• 没法并行下载。

外部JavaScript与CSS的优势：

• 能够利用浏览器的缓存，加快完整缓存，可是对空缓存无效。
• 对文件能够并行下载。
• 可使用cdn。

缺点：

• ​增长http请求。

纯粹而言（空缓存），内联的效率要比外部文件要快得多，由于减小了不少http请求，可是当用户屡次访问的时候（完整缓存），内联的效率会明显低于外部文件。

减小DNS查询

DNS：Domain Name System，将域名映射到IP地址，URL和实际宿主它们的服务器之间的间接层。一般，浏览器查找一个给定的主机名的IP地址要话费20~120毫秒，故DNS查询次数越多，页面效率越慢。

DNS缓存与TTL

DNS查找能够被缓存起来以提升性能，浏览器、操做系统均可以对DNS进行缓存，当咱们浏览器缓存DNS后，就不会麻烦操做系统来解析这个域名。

TTL（Time-to-live），影响DNS缓存的因素，该值告诉客户端能够对该记录缓存多久，浏览器一般会忽略该值，操做系统才会考虑TTL。HTTP协议中的keep-alive能够同时覆盖TTL和浏览器的时间限制，也就是说只要浏览器与服务器保持这TCP链接的打开状态，就不会进行DNS查询。

减小DNS查找

当客户端的DNS缓存为空时候，DNS的查找数量与web页面中惟一主机名的数量相同，包括URL、图片、脚本、样式表等主机名。减小惟一主机名的数量就能够减小DNS查找数量（每一个主机名并行下载的组件有限）。

精简JavaScript

经过工具构造静态资源文件，减小JavaScript与CSS文件大小来加快加载速度。

避免重定向

重定向会增长http请求的次数，会影响到整个网站的性能，可是必要的重定向又能够提升用户体验，因此咱们须要在性能和用户体验之间去权衡，达到最好的目的。

以百度为例：用户在浏览器中输入网址 http://www.baidu.com/ 或者 http://www.baidu.com/index.php，实际上访问的都是本站的首页；用户在浏览器中输入网址 http://www.baidu.com/ 或者 http://baidu.com/，访问的依然都是本站的首页。

移除重复脚本

配置ETag

实体标签（Entity Tag）是Web服务器和浏览器用于确认缓存组件的有效性的一种机制。ETag是惟一表示了一个组件的一个特定版本的字符串。惟一的格式约束是该字符串必须用引号引发来。ETag的假如为验证明体提供了比最新更新时间更灵活的机制，即若是ETag不一致，则使用不使用缓存。