网站性能优化可以从下面总结点入手。
background-position
调整图片显示位置。这种方式适用面比较广泛。
缺点是,如果一张小图,需要N个颜色,就必须做N个不同颜色的小图,合并到大图里面。data:URL
展示图片,它可以在页面中渲染图片但无需额外的HTTP请求,请求格式:<img scr="data:image/jpg;base64, xxxxxxxxxxxxxxxx">
缺点是:此方案不适合mobile应用;IE7以下不支持;如果一张图片在多个页面被用到,无法利用浏览器缓存。
为了解决无法缓存问题,可以将data:image
应用到CSS样式中,比如:
.imageA {
background-image: url(data:image/jpg;base64, xxxxxxxxxxxxxxxx);
}
req.responseText
function splitImages(imageString){
var imageData = imageString.split('\u0001');
var imageElement;
for (var i =0, len = imageData.length; i<len; i++){
imageElement = document.createElement('img');
imageElement.src = 'data:image/jpeg;base64,' + imageData[i];
document.getElementById('container').appendChild(imageElement);
}
}
内容发布网络(CDN)是一组分布在多个不同地理位置的WEB服务器,用于更加有效地向用户发布内容。
CDN用于发布静态内容,如图片,脚本,样式表和Flash。
不使用CDN时:
尽量将CDN的域名设置的不同于请求方网站的域名。比如,网站为a.com
,CDN域名可以设置为acdn.com
。为什么呢?
具体内容参考文章前端网络高级篇(三)浏览器缓存
开启HTTP Gzip压缩。
request: Accept-Encoding: gzip, deflate
response:Content-Encoding:gzip
外部脚本文件和CSS文件是并行下载的,把样式表在页面中的位置并不影响下载时间,但会影响页面的呈现!浏览器必须要等样式表加载完毕之后才渲染页面。
因此,应该把样式表放在head中,这样它就能被最先下载使页面逐步呈现。
一般,JS脚本是被禁止并行下载的,因为JS脚本可能使用document.write
来修改页面内容,所以必须保证JS执行顺序。
脚本下载后,必须执行完,才可以继续后面的解析。
但是,Chrome浏览器支持并发下载资源文件,并保证按顺序执行(参考《WebKit技术内幕-朱永盛》)。
CSS表达式是动态设置CSS属性的一种强大(并且危险)的方式。CSS表达式求值频率比人们期望的要高,它们不只在页面呈现和大小变化时求知,甚至用户鼠标在页面上拖拽都要求知。
如,将背景色设置为每小时变化一次:
background-color:expression((new Date()).getHours()%2?"#ccc":"#000");
触发频率太高!不建议使用。
纯粹来讲,内联的JS和CSS可以产生比外部文件文件更快的响应速度。
但是现实中,外部链接的JS和CSS文件会产生较快的页面,是因为JS和CSS文件有可能被缓存。
DNS也是开销。通常浏览器查找一个给定主机名的IP地址要花费20~120毫秒。在DNS查找完成之前,浏览器不能从主机名哪里下载任何东西。
只要cline-server之间保持TCP连接打开状态,就无需DNS查找。所以,我们可以通过使用Keep-Alive
和较少的域名来减少DNS查找。
Keep-Alive
,HTTP1.1协议中推出的持久连接。特点为:只要任意一端没有明确提出断开连接,则保持TCP连接状态。
含有Keep-Alive
首部的response示例:
HTTP/1.1 200 OK
Connection: Keep-Alive
Content-Encoding: gzip
Content-Type: text/html; charset=utf-8
Date: Thu, 11 Aug 2016 15:23:13 GMT
Keep-Alive: timeout=5, max=1000
Last-Modified: Mon, 25 Jul 2016 04:32:39 GMT
Server: Apache
可以用各类构建或者编译工具压缩脚本和样式文件,比如:gulp
,webpack
iframe是开销最高的DOM元素,它的缺点远大于优点。
<iframe id="iframe1" src=""></iframe>
<script>
document.getElementById('iframe1').src = "www.api.a.com";
</script>
table
内容渲染是将table
的DOM渲染树全部生成完并一次绘制到页面上,所以,在渲染长表格时很耗性能,应该尽量避免使用。
可以使用ul
或div
替代。
有多种方式支持JavaScript异步加载。
script
标签,并设置其src
值。如下:function createScript(url){
var scrElem = document.createElement('script');
srcElem.src = url;
document.getElementsByTagName('head')[0].appendChild(scrElem);
}
优点:支持跨域加载脚本文件;兼容性最好、普适性最高的方案
缺点:脚本无序执行;会阻塞onload事件
通过XMLHttpRequest
的方式下载脚本文件,然后使用eva
l或者动态添加<script>
标签并设置其text
属性来执行脚本。
// 不考虑IE
var xhrObj = new XMLHttpRequest();
xhrObj .onreadystatechange = function(){
if (xhrObj .readyState == 4) {
// 方式一
eval(xhrObj.responseText);
// 方式二
var scrElem = document.createElement('script');
srcElem.text= xhrObj.responseText;
document.getElementsByTagName('head')[0].appendChild(scrElem);
}
}
xhrObj .open('GET', 'a.js', true);
xhrObj .send('');
优点:将脚本下载和脚本执行分离开,可以在适当的时候再执行脚本;不会阻塞onload事件
缺点;通过XMLHttpRequest
获取的脚本文件必须和主页面是同一个域名下。也就是说,不支持跨域下载脚本(除非做跨域处理)。因此不适合加载第三方文件;脚本无序执行。
两者都支持异步加载文件,不同之处是,defer
会在全部资源下载完毕后才执行JS文件;async
在脚本文件下载完就立刻执行,并且,async
模式加载的JS文件无法依序执行,对于有顺序依赖的脚本来说,不应该采用这种方式。
defer相对友好一些,并可以保证JS文件按照顺序执行。
<script src="a.js" defer></script>
<script src="a.js" async></script>
defer和async优点:支持跨域加载脚本文件。
defer优点:可以保证JS文件按照顺序执行。
defer和async缺点:IE10以上(包括IE10)才支持。
async缺点:JS文件无法依序执行;会阻塞onload事件
通过图片懒加载可以让一些不可视的图片不去加载,避免一次性加载过多的图片导致请求阻塞(浏览器一般对同一域名下的并发请求的连接数有限制),这样就可以提高网站的加载速度,提高用户体验。
第一步: 懒加载的img标签的src设置缩略图或者不设置src,然后自定义一个属性,值为真正的图片或者原图的地址(比如data-src)。
// https://a.com/logo.png 是图片的真实地址,设置到data-src属性上。
<img data-src="https://a.com/logo.png" class="lazy-image"/>
// 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--
}
}
}
也可以使用三方库处理图片懒加载。
当link
标签中的href
,或者ifram
,script
,img
标签的src
属性为空时,浏览器在渲染过程中仍然会将href
和src
中的空内容进行加载,直到失败为止。这样会阻塞页面中其他资源的下载过程。
页面重定向会延长页面内容返回的等待时间,一次重定向大致需要600毫秒。