前端网络高级篇（六）网站性能优化
网站性能优化可以从下面总结点入手。
1. 减少HTTP请求
使用雪碧图 - CSS Sprites，把多个图片合并到一个单独的图片中，利用CSS -background-position调整图片显示位置。这种方式适用面比较广泛。
缺点是，如果一张小图，需要N个颜色，就必须做N个不同颜色的小图，合并到大图里面。
使用data:URL展示图片，它可以在页面中渲染图片但无需额外的HTTP请求，请求格式：
![]()
缺点是：此方案不适合mobile应用；IE7以下不支持；如果一张图片在多个页面被用到，无法利用浏览器缓存。
为了解决无法缓存问题，可以将data:image应用到CSS样式中，比如：
.imageA {
background-image: url(data:image/jpg;base64, xxxxxxxxxxxxxxxx);
}
合并脚本和样式表
Multipart XHR
运行客户端用一个HTTP请求就可以从服务端传递多个资源。它通过在服务端将资源（CSS文件，HTML片段，Javascript代码或者base64编码的图片）打包成一个由双方约定的字符串分割的长字符串，并发送到客户端。
然后用Javascript代码处理这个长字符串，并根据他的mime-type类型和传入的其他‘头信息’解析出每个资源。
例如，解析一串图片编码，输入为req.responseText
function splitImages(imageString){
var imageData = imageString.split('\u0001');
var imageElement;
for (var i =0, len = imageData.length; i
12.少用Table
table内容渲染是将table的DOM渲染树全部生成完并一次绘制到页面上，所以，在渲染长表格时很耗性能，应该尽量避免使用。
可以使用ul或div替代。
13. JS文件异步/按需加载
有多种方式支持JavaScript异步加载。
Script DOM Element
这恐怕是最常见的异步加载脚本方法，即，动态创建一个script标签，并设置其src值。如下：
function createScript(url){
var scrElem = document.createElement('script');
srcElem.src = url;
document.getElementsByTagName('head')[0].appendChild(scrElem);
}
优点：支持跨域加载脚本文件；兼容性最好、普适性最高的方案
缺点：脚本无序执行；会阻塞onload事件
XMLHttpRequest
通过XMLHttpRequest的方式下载脚本文件，然后使用eval或者动态添加
defer和async优点：支持跨域加载脚本文件。
defer优点：可以保证JS文件按照顺序执行。
defer和async缺点：IE10以上（包括IE10）才支持。
async缺点：JS文件无法依序执行；会阻塞onload事件
14. 图片懒加载
通过图片懒加载可以让一些不可视的图片不去加载，避免一次性加载过多的图片导致请求阻塞（浏览器一般对同一域名下的并发请求的连接数有限制），这样就可以提高网站的加载速度，提高用户体验。
第一步: 懒加载的img标签的src设置缩略图或者不设置src，然后自定义一个属性，值为真正的图片或者原图的地址（比如data-src）。
// https://a.com/logo.png 是图片的真实地址，设置到data-src属性上。
![]()
// css部分
.lazy-image {
background: url('loading.gif') no-repeat center;
}
第二步：页面加载完后，获取所有需要懒加载的图片的元素集合，判断是否在可视区域，如果是在可视区域的话，设置元素的src属性值为真正图片的地址。
// 监听滚动事件
document.addEventListener('scroll', inViewShow);
// 显示图片
inViewShow() {
let imageElements = Array.prototype.slice.call(document.querySelectorAll('.lazy-image'))
let len = imageElements.length
for(let i = 0; i < len; i++) {
let imageElement = imageElements[i]
const rect = imageElement.getBoundingClientRect() // 出现在视野的时候加载图片
if(rect.top < document.documentElement.clientHeight) {
imageElement.src = imageElement.dataset.src // 赋值到真正的src上
imageElements.splice(i, 1)
len--
i--
}
}
}
也可以使用三方库处理图片懒加载。
15. 避免页面中空的href和src
当link标签中的href，或者ifram，script，img标签的src属性为空时，浏览器在渲染过程中仍然会将href和src中的空内容进行加载，直到失败为止。这样会阻塞页面中其他资源的下载过程。
16. 减少页面重定向
页面重定向会延长页面内容返回的等待时间，一次重定向大致需要600毫秒。
// css部分
.lazy-image {
background: url('loading.gif') no-repeat center;
}
第二步：页面加载完后，获取所有需要懒加载的图片的元素集合，判断是否在可视区域，如果是在可视区域的话，设置元素的src属性值为真正图片的地址。
// 监听滚动事件
document.addEventListener('scroll', inViewShow);
// 显示图片
inViewShow() {
let imageElements = Array.prototype.slice.call(document.querySelectorAll('.lazy-image'))
let len = imageElements.length
for(let i = 0; i < len; i++) {
let imageElement = imageElements[i]
const rect = imageElement.getBoundingClientRect() // 出现在视野的时候加载图片
if(rect.top < document.documentElement.clientHeight) {
imageElement.src = imageElement.dataset.src // 赋值到真正的src上
imageElements.splice(i, 1)
len--
i--
}
}
}
也可以使用三方库处理图片懒加载。
15. 避免页面中空的href和src
当link标签中的href，或者ifram，script，img标签的src属性为空时，浏览器在渲染过程中仍然会将href和src中的空内容进行加载，直到失败为止。这样会阻塞页面中其他资源的下载过程。
16. 减少页面重定向
页面重定向会延长页面内容返回的等待时间，一次重定向大致需要600毫秒。
发表评论 (审核通过后显示评论)：