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

2017-11-22

总览

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

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

本书配套实例：点此访问

规则5-将样式表放在顶部

提高用户体验

代码示例

可视化

可视化回馈对用户来说很重要，它可以告诉用户

系统是否崩溃
还需要等多久
可以看到进度的变化，使得等待不那么无聊

对web来说，HTML页面就是进度指示器，当浏览器逐步加载的时候，会为等待页面的用户提供视觉反馈，改善整体体验。

按照逻辑上讲，将样式放在页面的底部（<body>之前），可以使HTML先加载，用户体验会变好。但实际上并非如此，浏览器和用户等待位于底部的样式表时，浏览器会延迟加载显示任何可视化组件，导致白屏（只发生在Internet Explorer中，并且依赖于页面如何加载）。将样式表放在文档底部会导致在浏览器中组织内容逐步呈现。为避免当样式变化是重绘页面中的元素，浏览器会阻塞内容的逐步呈现。

如果样式表仍在加载，构建呈现树就是一种浪费，因为在所有样式表加载并解析完全之前无需绘制任何东西。否则，在其准备好之前显示内容会遇到FOUC（无样式内容的闪烁，Flash of Unstyled Content）问题

Sleep.cgi

为了展示延迟组件如何影响Web页面，作者开发了一个Perl CGI脚本。下载和源码

参数：

sleep: 将响应延时多少s。默认0s
type: 返回的组件类型，可取值gif、js、css、html、swf。默认gif
expires: -1:返回一个已经过时的Expires头(避免被缓存)；0:不返回Expires头；1:返回一个未来的Expires头。默认值为1
last: -1：返回一个Last-Modified头，其时间戳和文件的时间相等；0：不返回Last-Modified头。默认值为-1
redir: 1:产生302响应，重定向回同样的不带redir=1的URL

使用方法：

1
2
3

<!-- 做一个慢速的图片和样式加载 -->
<img src="/bin/sleep.cgi?type=gif&amp;sleep=2&amp;expires=-1&amp;last=0&amp;imagenum=1&amp;t=1511320646" height="20">
<link rel="stylesheet" href="/bin/sleep.cgi?type=css&amp;sleep=1&amp;expires=-1&amp;last=0">

最佳实践

使用<link>标签将样式表放在文档的HEAD中

将样式表包含在文档中有Link和@import两种方式。经样例测试，@import的样式表即使放在head中，也依然是最后下载的（@import导致的组件下载无序性），所以会产生白屏。所以推荐使用Link的方式加载外部样式。

唯一例外：

如果你的样式表不要求呈现页面，可以想办法在文档加载完毕后动态加载进来，详见规则8

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