提高网站第一次加载速度

特别是在手机端访问，用户第一次打开网站，如果得到反馈的时间太久，用户很可能在页面完成加载之前就离开，不会再次访问。所以，网站、web App，提高首次访问的加载速度就显得特别重要了。第一次加载速度是用"首字节的时间"测量的，即从用户点击访问到从服务器返回第一个字节所用的时间，绝大多数情况下，真正的原因在于前端，PageSpeed YSlow和其他无数的工具和服务用来解决这些问题。

浏览器是如何加载页面的

解析域名à发起请求à下载响应à渲染页面

当浏览器要渲染页面的时候，如果页面中有CSS或脚本外链，浏览器会等到这些文件加载和解析完再渲染页面。

为什么页面会加载缓慢

以下是可能的原因

HTTP连接数à接连不断请求很多次小文件比一次请求一个大文件慢很多，即使现代浏览器已经支持并行下载，但是每次请求还是需要承担HTTP层面的开销，创建新请求不仅需要新的开销，还需要耗费CPU和内存，所以，并行下载两个文件的时间并不等于串行下载时速度的两倍。而对于较大文件，比如一些比较大的图片，情况有些不同，因为这个时候，下载占据了请求时间的绝大部分，所以，并行下载的效果会更好。出于这个原因，在网站上将图片与其他资源置于不同的域下是合理的，雅虎的Steve Souders和YSlow团队发现，为当前域创建两个别名，能允许更多的下载并行，会使大文件下载的性能明显改善。使用至少两个最多五个域名是YSlow的经验法则。

另一个需要考虑的是浏览器的cookie，如果一个cookie与请求的域名或路径相匹配，它会伴随着每次请求发送（上传），所以，如果你的域名下有几千字节的cookie，那么此后发送到这个域的每次请求都将把这些字节包含在请求头里，然后发送（这些字节还是未压缩状态）。服务器在读取请求体之前读取这些cookie。cookie可以把一个很小的请求变得很大。

总的字节数à这个原因是显而易见的，被下载的资源的大小

等待时的渲染阻塞à有时候，并不是真的提升性能，但是有一些小技巧，可以让用户觉得网页加载的很快。例如，不管什么时候，给用户一个及时的反馈，让用户知道页面在加载，链接还在，没有断开。

延迟à一个典型的家庭网络链接可能有15ms的网络延迟，一个典型的3G链接有100ms的延迟，3G网络与家庭网络相比，不但下载速度慢了很多，延时也高很多。

缓存能力差à正确的缓存设置，确保浏览器最终不会重复获取已有的资源，是解决这个问题的关键。

PageSpeed为解决页面加载性能问题，提出六个基本规则

1. 缓存优化：使页面应用的逻辑实现和所需数据一并离线保存
2. 往返时间最小化：减少请求响应的周期次数
3. 请求开销最小化：减少上传数据包大小
4. 有效负载最小化：减少响应包、下载包和缓存页面的大小
5. 浏览器渲染优化：改进浏览器的页面布局
6. 移动设备优化：为移动网络和移动设备调整网站

目前移动类别包含两条建议：延迟JavaScript解析和使首页的重定向可缓存

 

除此以外，在实际工作中，我们还会遇到一些细节问题

1. 为所有尺寸的浏览器使用同一个高分辨率的图像可以大大减少工作量，但是用户却不但要为此买单（流量费用），还要忍受这种下载性能下降的局面。如果不能合理的生成每一种尺寸的图像，也许选择一种折中的，大多数设备上用得到的尺寸，算是一种优化。
2. 针对不同设备，为了有更合适的布局，我们会采用媒体查询来解决这个问题

   <link rel="stylesheet" media="only screen and (max-width: 800px)" href=""table.css">

   但如果将媒体布局置于css文件内部，把不同布局的代码合并到一个文件中，一次来减少http请求的次数

   @media only screen and (max-width: 800) {}