页面加速优化

内联 CSS

优点

使用内联 CSS 可以减少浏览器去服务端去下载 CSS 文件
关键 CSS 内联到 HTML 文件中

缺点

CSS 文件没法被缓存

注意：该方法只适用于很小的 CSS 文件，如果你的 CSS 文件足够大以及复杂，应该使用外部 CSS 的方法。

优化 CSS 交付

优化策略

外部的 CSS 不要超过一个，大小应该小于 50k
对于下拉区域以上的内容，使用 style 标记内联小 CSS 到 HTML
不要使用 @import 调用 CSS
不要把 CSS 元素放在 HTML 的 divs 或者你的 h1s 中

以上步骤可以最小化渲染阻塞 CSS，使得页面加载非常快速。

如果你有多个 CSS 文件，应该把他们合并成一个。

延迟加载 javascript

当我们调用外部 javascript 的时候，使用 "onload" 事件
在页面内部被加载前，外部 javascript 将不被加载T
External javascript will then run and affect page

脚本调用外部 javascript 文件

<script type="text/javascript">
function downloadJSAtOnload() {
var element = document.createElement("script");
element.src = "defer.js";
document.body.appendChild(element);
}
if (window.addEventListener)
window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;
</script>

拷贝以上代码。
把代码粘贴到你的 HTML，放置在 </body> 标签之前（靠近 HTML 文件的底部）。
把 "defer.js" 变更为你外部 JS 文件的名字。
确保文件路径是正确的。例如：如果你仅仅放置 "defer.js"，这时 "defer.js" 必须与你的 HTML 文件在同一目录下面。

把 javascript 分为两组，一组是加载页面必须的，一组是加载完成页面后需要使用到的（比如分析数据的 js，交互用的等等）。

示例证明：

Page with script inline - here
Page with external script using "defer" - here
Page using the recommended code above - here

延迟图片

可能存在的问题

延迟加载会引起性能问题
延迟加载对于某些页面是不可行的
延迟加载对于 mobile 性能是不理想的

不使用延迟加载或 jQuery 延迟图片

延迟加载实际会做的事情：

观察一个滚动位置
监控一个滚动位置
对一个滚动位置起作用R
延迟图片

在以上 4 个事情中，仅仅只有一个是延迟图片。

HTML 代码：

<img src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="your-image-here">

javascript 代码片段：

<script>
function init() {
var imgDefer = document.getElementsByTagName('img');
for (var i=0; i<imgDefer.length; i++) {
if(imgDefer[i].getAttribute('data-src')) {
imgDefer[i].setAttribute('src',imgDefer[i].getAttribute('data-src'));
} } }
window.onload = init;
</script>

内联 CSS

优点

缺点

优化 CSS 交付

优化策略

延迟加载 javascript

脚本调用外部 javascript 文件

延迟图片

可能存在的问题

不使用延迟加载或 jQuery 延迟图片

组合外部 CSS

工具列表

扩展阅读