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

2017-11-20

总览

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

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

本书配套实例：点此访问

规则2-使用内容发布网络(CDN)

缩短http的响应时间

使用CDN优于尝试使用分布式架构重新设计你的web程序，后者会出现同步会话状态，数据库同步等复杂问题
知名的付费CDN供应商：Akamai、Mirror Image、SAVVIS、Limelight
免费CDN供应商：Globule，CoDeeN，CoralCDN
CDN用于发布静态内容，如图片、脚本、样式表、Flash，不用于动态（数据库连接、状态管理、验证等）
优点：缩短响应时间、备份、扩展存储、缓存等
缺点：可能会受其他网站影响，因为节点是公用的；有些配置需要依赖于供应商
方式：可以同时接入两家CDN供应商，用于backup和防灾

测试CDN的功能需要在多个地理位置上测量响应时间。国内可以使用免费测试工具如17CE，奇云测。还有付费测试工具基调

规则3-添加Expires头

减少http请求

目的：利用浏览器的缓存能力,减少HTTP请求

Expires

Response Header
优点：请求到期前不会再发送HTTP请求
缺点：需要服务器和客户端时钟严格同步；过期时间需要检查；过期时间定期更新

什么时候304，什么时候200（from cache）？？？

Max-Age && mod_expires

Max-Age

Response Header
为了解决Expires头的缺点，HTTP1.1（注：之前的版本不支持）引入Cache-Control头。可以使用头的Max-Age指令指定组件被缓存多久，以s为单位。如果从组件被请求开始过去的秒数少于max-age，浏览器就使用缓存版本。
1
Cache-Control: max-age=315360000
HTTP规范规定，如果max-age和Expires同时出现，max-age将重写Expires头。

mod_expires

mod_expires是Apache提供的一种配置方法，可以通过ExpiresDefault指令来设置Expires头。（Apache进行了封装，使能够像max-age那样以相对日期设置Expires头）

空缓存 VS 完整缓存

空缓存和完整缓存指的是与页面相关的浏览器缓存的状态。页面组件没在缓存中则为空缓存，对立的是完整缓存。
提出这两个概念的作用是告诉你缓存很重要……，然后请优化完整缓存（对所有的请求都尽可能使用缓存）

不仅仅是图片

长久的Expires头应该包括图片、及不经常变化的JS、CSS、Flash等。
大部分网站图片、JS、CSS可缓存30天以上，可以根据网站的需要自己定义。

修订文件名

为了获取更新，可以更新组件的文件名来使浏览器重新获取资源，例如加入版本号

一个具有长久Expires头的组件会被缓存后续浏览器可从硬盘上直接读取。如果一个组件没有Expires头，它仍然会存储在缓存中，在后续请求时，浏览器会检查缓存并发现这个组件已过期。为了提高效率，浏览器会向原始服务器发送一个get请求，如果组件虽然过期但是没有改变，原始服务器可以免于发送整个组件，而是发送一个很小的头（304 Not Modified）告诉浏览器可以使用缓存的组件。

缺失模块。
1、请确保node版本大于6.2
2、在博客根目录（注意不是yilia根目录）执行以下命令：
npm i hexo-generator-json-content --save

3、在根目录_config.yml里添加配置：

  jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

爱前端、爱小说、爱音乐、爱产品、爱游泳、爱动漫、爱家务、爱安静、爱萧萧。人生这么短，且行且努力。