高性能网站建设指南-笔记（七）

2017-11-27

总览

本书介绍了提高网站性能的14条规则：

减少HTTP请求
使用内容发布网络
添加Expires头
压缩组件
将样式表放在顶部
将脚本放在底部展示
避免CSS表达式
使用外部JavaScript和CSS
减少DNS查找
精简JavaScript
避免重定向
移除重复脚本
配置ETag
使Ajax可缓存

本书配套实例：点此访问

规则8-使用外部JavaScript和CSS

提高用户体验

代码示例

内联 VS 外置

内联：减少了HTTP请求次数，但是增大了HTTP文档的大小，难以缓存
外置：增加了HTTP请求次数一次，但是可以缓存
选择：与HTML文档请求数量相关的，外部JavaScript和CSS组件被缓存的频率

纯粹而言，内联快一些

衡量

用户查看

用户产生的页面查看越少，越适合使用内联JS和CSS。（不会造成外部文件的复用，即无需使用缓存）
用户产生很多的页面查看，浏览器很可能将外部文件放入缓存。次数越多，外置JS和CSS的利益越大

空缓存 VS 完整缓存

如果网站本质上能够为用户带来高完整缓存率，使用外部文件的收益就更大。如果不大可能产生完整缓存，则内联是更好的选择。

也就是说，如果一个网站的各个页面的外部文件是公用的，比如用户第一次是空缓存，之后的多次后续页面查看会具有完整缓存。那么使用外部文件是值得的。如果每个页面的可复用外部文件很少，后续页面都相当于一个新页面，那么就选择内联。一般来说，第一种类型的网站更多。

组件重用

这个问题在于：把JS和CSS打包到外部文件时，边界如何划分。分为以下几种：

各个页面的文件独立保存，完全分离。（适用于很少进行跨页访问的网站）
把所有文件打包为一个文件：增大首次下载量；部分代码更新时，影响整体的缓存更新。（适用于每用户每月会话数量较高，普通用户在一个会话中访问多个不同页面的网站。一次下载，多次缓存）
折中方式：部分合并打包，部分单独下载。取决于前端代码中JS和CSS的依赖情况。

最佳方案

根据作者对网站结果的度量，对一般的网站（上述1，2的情况）而言，最好的解决方案通常是将JS和CSS部署到外部文件中，且带有Expires头来保持缓存。

主页

页面查看数量唯一
空缓存比例高
很多主页是用户到网站访问的唯一一个页面，谈不上重用
基于此，对于网站主页来说，更倾向于使用内联的方式。

利用外部文件得到内联的收益

加载后下载

为download加一个延时，确保页面呈现完毕后，再下载。（用于初始页后还需要访问其它页面）

function doOnload(){
  setTimeout("download()", 1000)
}
windows.onload = doOnload;
function download() {
  // 执行下载
  downloadJS(url);
  downloadCSS(url);
}
// 脚本中不应包含立即执行的内容，对用户感知
function downloadJS(url) {
  var elem = document.createElement("script");
  elem.src = url;
  document.body.appendChild(elem);
}
//不应使用相对单位，可能对页面产生影响，将组件放到一个不可见的IFrame中是一种更好的方式（不赞同）
function downloadCSS(url) {
  var elem = document.createElement("link");
  elem.rel = "stylesheet";
  elem.type = "text/css";
  elem.href = url;
  document.body.appendChild(elem);
}

动态内联

利用cookie等作为指示器，来表明使用内联还是外置。没有cookie的时候，使用内联（首次加载），并写cookie。之后从外部加载。
即便cookie的状态和缓存状态不匹配，也不会影响页面工作，只是没有那么优化。