HTML5性能优化（二）
[加载优化]
加载过程是最为耗时的过程，可能会占到总耗时的80%时间，因此是优化的重点
减少HTTP请求
因为手机浏览器同时响应请求为4个请求（Android支持4个，iOS 5后可支持6个），所以要尽量减少页面的请求数，首次加载同时请求数不能超过4个。a）合并CSS、JavaScript
webpack，gulp
b）合并小图片，使用雪碧图缓存
使用缓存可以减少向服务器的请求数，节省加载时间，所以所有静态资源都要在服务器端设置缓存，并且尽量使用长Cache（长Cache资源的更新可使用时间戳）a） 缓存一切可缓存的资源
b） 使用长Cache（使用时间戳更新Cache）
c） 使用外联式引用CSS、JavaScript
如：
我们可以通过设置页面头的expires来定义页面过期时间，将过期时间定久一点就达到了“永久”缓存。
<meta http-equiv="expires" content="Sunday 26 October 2099 01:00 GMT" />- 压缩HTML、CSS、JavaScript
a） 压缩（例如，多余的空格、换行符和缩进）
b） 启用GZip 无阻塞
写在HTML头部的JavaScript（无异步），和写在HTML标签中的Style会阻塞页面的渲染，因此CSS放在页面头部并使用Link方式引入，避免在HTML标签中写Style，JavaScript放在页面尾部或使用异步方式加载。如：
<head>
<link rel="stylesheet" href="common.css">
......
<script src="example.js"></script>
</body>使用首屏加载
首屏的快速显示，可以大大提升用户对页面速度的感知，因此应尽量针对首屏的快速显示做优化。按需加载
将不影响首屏的资源和当前屏幕资源不用的资源放到用户需要时才加载，可以大大提升重要资源的显示速度和降低总体流量。PS：按需加载会导致大量重绘，影响渲染性能
a） LazyLoad
b） 滚屏加载
c） 通过Media Query加载
如：
1.最大宽度Max Width
<link rel="stylesheet" media="screen and (max-width:600px)" href="small.css" type="text/css" />
上面表示的是：当屏幕小于或等于600px时，将采用small.css样式来渲染Web页面。
2.最小宽度Min Width
<link rel="stylesheet" media="screen and (min-width:900px)" href="big.css" type="text/css" />
上面表示的是：当屏幕大于或等于900px时，将采用big.css样式来渲染Web页面。
3.多个Media Queries使用
<link rel="stylesheet" media="screen and (min-width:600px) and (max-width:900px)" href="style.css" type="text/css" />
预加载
大型重资源页面（如游戏）可使用增加Loading的方法，资源加载完成后再显示页面。但Loading时间过长，会造成用户流失。对用户行为分析，可以在当前页加载下一页资源，提升速度。
如：
CSS预加载
单纯使用CSS，可容易、高效地预加载图片，代码如下：
function preloader() {
if (document.getElementById) {
document.getElementById("preload-01").style.background = "url(http://domain.tld/image-01.png) no-repeat -9999px -9999px";
document.getElementById("preload-02").style.background = "url(http://domain.tld/image-02.png) no-repeat -9999px -9999px";
document.getElementById("preload-03").style.background = "url(http://domain.tld/image-03.png) no-repeat -9999px -9999px";
}
}
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
}
}
}
addLoadEvent(preloader);Javascript预加载
上述方法有时确实很高效，但我们逐渐发现它在实际实现过程中会耗费太多时间。相反，我更喜欢使用纯JavaScript来实现图片的预加载。下面将提供两种这样的预加载方法，它们可以很漂亮地工作于所有现代浏览器之上。
只需简单编辑、加载所需要图片的路径与名称即可，很容易实现：
function preloader() {
if (document.images) {
var img1 = new Image();
var img2 = new Image();
var img3 = new Image();
img1.src = "http://domain.tld/path/to/image-001.gif";
img2.src = "http://domain.tld/path/to/image-002.gif";
img3.src = "http://domain.tld/path/to/image-003.gif";
}
}
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
}
}
}
addLoadEvent(preloader);使用Ajax实现预加载
上面所给出的方法似乎不够酷，那现在来看一个使用Ajax实现图片预加载的方法。该方法利用DOM，不仅仅预加载图片，还会预加载CSS、JavaScript等相关的东西。使用Ajax，比直接使用JavaScript，优越之处在于JavaScript和CSS的加载不会影响到当前页面。该方法简洁、高效。
下面，我们看看如何用JavaScript来实现该加载过程：
window.onload = function() {
setTimeout(function() {
// reference to <head>
var head = document.getElementsByTagName('head')[0];
// a new CSS
var css = document.createElement('link');
css.type = "text/css";
css.rel = "stylesheet";
css.href = "http://domain.tld/preload.css";
// a new JS
var js = document.createElement("script");
js.type = "text/javascript";
js.src = "http://domain.tld/preload.js";
// preload JS and CSS
head.appendChild(css);
head.appendChild(js);
// preload image
new Image().src = "http://domain.tld/preload.png";
}, 1000);
};这里，我们通过DOM创建三个元素来实现三个文件的预加载。正如上面提到的那样，使用Ajax，加载文件不会应用到加载页面上。从这点上看，Ajax方法优越于JavaScript。
压缩图片
图片是最占流量的资源，因此尽量避免使用他，使用时选择最合适的格式（实现需求的前提下，以大小判断），合适的大小，然后使用智图压缩，同时在代码中用Srcset来按需显示。PS：过度压缩图片大小影响图片显示效果
a） 使用智图（http://isux.tencent.com/zhitu.html ， http://zhitu.isux.us/）
b） 使用其它方式代替图片(1. 使用CSS3 2. 使用SVG 3. 使用IconFont）
c） 使用Srcset
<img src="source.jpg" srcset="source_2x.jpg 2x, source_3x.jpg 3x">
<img src="source.jpg" width="100%"
srcset="source_400.jpg 400w, source_600.jpg 600w, source_1280.jpg 1280w">2x、3x 表示目标屏幕的像素密度；400w、600w表示目标浏览器的宽度的限度，如浏览器宽度550w时，匹配600w的src。
d） 选择合适的图片(1. webP优于JPG 2. PNG8优于GIF）
e） 选择合适的大小（1. 首次加载不大于1014KB 2. 不宽于640（基于手机屏幕一般宽度））
延伸阅读：[《WebP 探寻之路》](http://isux.tencent.com/introduction-of-webp.html)
- 减少Cookie
Cookie会影响加载速度，所以静态资源域名不使用Cookie。 避免重定向
在定义链接地址的href属性的时候，尽量使用最完整的、直接的地址。例如使用www.cnblogs.com 而不是cnblogs.com
使用cn.bing.com 而不是bing.com
使用www.google.com.hk 而不是google.com
使用www.mysite.com/products/ 而不是 www.mysite.com/products异步加载第三方资源
第三方资源不可控会影响页面的加载和显示，因此要异步加载第三方资源。
智能推荐
注意！
本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系我们删除。