网站优化加速的一些方法
HTML优化
避免内联式/嵌入式代码
你可以通过三种方式在HTML页面中引入CSS或Javascript代码.
- 内联式: 在HTML标签的style属性中定义样式,在onclick这样的属性中定义Javascript代码.
- 嵌入式: 在页面中使用style标签定义样式,使用script标签定义Javascript代码.
- 引用外部文件: 在link标签中定义href属性引用CSS文件,在script标签中定义src属性引入Javascript文件.
尽管前两种方式减少了HTTP请求数,可是实际上却增加了HTML文档的体积。不过,当你的页面中的CSS或者Javascript代码足够少,反而是开启一个HTTP请求的花费要更大时,采用这两种方式却是最有用的。因此,你需要测试评估这种方式是否真的提升了速度。同时也要考虑到你的页面的目标和它的受众:如果你期望人们只会访问它一次,例如对一些临时活动来说,你决不会期望有回访客出现,那么使用内联式/嵌入式代码能够帮助减少HTTP请求数。第三种方式不仅使你的代码更有序,而且使得浏览器能够缓存它。这种方式在大多数的情况下都是首选,特别是一些大文件和多页面的情况。
样式在上,脚本在下
当我们把样式放在标签中时,浏览器在渲染页面时就能尽早的知道每个标签的样式,我们的用户就会感觉这个页面加载的很快。但是如果我们将样式放在页面的结尾,浏览器在渲染页面时就无法知道每个标签的样式,直到CSS被下载执行后。
另一方面,对于Javascript来说,因为它在执行过程中会阻塞页面的渲染,所以大多数情况下把它放在页面的结尾。
使用async
为了解释这个属性对于性能优化是多么有用,我们应该先明白,当不使用它时会发生什么。
<script src="example.js"></script>
使用上面这种方式时,页面会在这个脚本文件被完全下载、解析、执行完后才去渲染之后的HTML,在这之前会一直处于阻塞状态。这就意味着会增加你的页面的加载时间。有时这种行为是我们希望的,而大多数时候则不想要。
<script async src="example.js"></script>
使用上面这种方式时,脚本的加载是异步的,不会影响到这之后的页面解析。脚本会在下载完之后立即执行。需要注意的是,如果有多个使用这种方式异步加载的脚本,他们是没有特定的执行顺序的。
CSS优化
压缩样式表
为了保持代码的可读性,最好的方法是在代码中添加注释和使用缩进。
.center {
width: 960px;
margin: 0 auto;
}
/* --- Structure --- */
.intro {
margin: 100px;
position: relative;
}
但是对于浏览器来说,这些都是不重要的。正因为如此,通过自动化工具压缩你的CSS是非常有用的。
.center{width:960px;margin:0 auto}.intro{margin:100px;position:relative}
这样做能够减小文件的大小,从而得到更快的下载、解析和执行。
而对于使用预处理器例如 Sass, Less, and Stylus, 你可以通过配置缩小编译输出的CSS代码。
合并css文件
合并你的CSS文件。文件数量的减少就会带来请求数量的减少和更快的页面加载速度。
使用link而不是@import
有两种方式可以引入一个外部的样式表:通过 link 标签,或者通过 @import 指令 (使用在一个外部样式表中或者页面内嵌的 style 标签中),当你在一个外部样式表中使用第二种方式时,浏览器无法通过并行下载的方式下载这个资源,这样就会导致其他资源的下载被阻塞。
JAVASCRIPT优化
异步加载第三方内容
为了避免这些在页面加载时成为问题,或者阻塞了全部页面的加载,应该异步加载这些代码
var script = document.createElement('script'),
scripts = document.getElementsByTagName('script')[0];
script.async = true;
script.src = url;
scripts.parentNode.insertBefore(script, scripts);
不过这是老办法了。
避免使用document.write
最小化重绘和回流
当有任何属性或元素发生改变时,都会引起DOM元素的重绘和回流。
当一个元素的布局不变,外观发生改变时,就会引起重绘。Nicole Sullivan描述这个就像是样式的改变,例如改变background-color。
回流的代价是最高的,当改变一个页面的布局时就会发生回流,例如改变一个元素的宽。
毫无疑问,应当避免过多的重绘和回流,所以,对于下面的代码:
var div = document.getElementById("to-measure"),
lis = document.getElementsByTagName('li'),
i, len;
for (i = 0, len = lis.length; i < len; i++) {
lis[i].style.width = div.offsetWidth + 'px';
}
应当变为:
var div = document.getElementById("to-measure"),
lis = document.getElementsByTagName('li'),
widthToSet = div.offsetWidth,
i, len;
for (i = 0, len = lis.length; i < len; i++) {
lis[i].style.width = widthToSet + 'px';
}
当你设置style.width时,浏览器需要重新计算布局。通常,浏览器暂时是不需要知道改变了元素的样式的,直到它需要更新屏幕时,正因为如此,改变多个元素的样式只会产生一次回流。然而,在第一个例子中,我们每次请求offsetWidth时,都会使浏览器重新计算布局。
如果需要得到页面中的布局数据,那么请参照第二个例子,将这些操作放在任何会改变布局的设置前.。
避免不必要的dom操作
当你获得DOM而又什么都不做时,这简直就是在杀死宝贵的生命。
说真的,浏览器遍历DOM元素的代价是昂贵的。虽然Javascript引擎变得越来越强大,越来越快速,但是还是应该最大化的优化查询DOM树的操作。
最简单的替代方案就是,当一个元素会出现多次时,将它保存在一个变量中,这样的话你就没必要每次都去查询DOM树了。
// really bad!
for (var i = 0; i < 100; i++) {
document.getElementById("myList").innerHTML += "<span>" + i + "</span>";
}
// much better :)
var myList = "";
for (var i = 0; i < 100; i++) {
myList += "<span>" + i + "</span>";
}
document.getElementById("myList").innerHTML = myList;
// much *much* better :)
var myListHTML = document.getElementById("myList").innerHTML;
for (var i = 0; i < 100; i++) {
myListHTML += "<span>" + i + "</span>";
}
压缩你的脚本
和CSS一样,为了保持代码的可读性,最好的方法是在代码中添加注释和使用缩进:
BrowserDiet.app = function() {
var foo = true;
return {
bar: function() {
// do something
}
};
};
但是对于浏览器来说,这些都是不重要的。正因为如此,请记住用自动化工具压缩你的Javascript代码。
BrowserDiet.app=function(){var a=!0;return{bar:function(){}}}
这样做能够减小文件的大小,从而得到更快的下载、解析和执行。
将多个js文件合并
对于脚本的组织和维护,另一个好方法是将他们模块化。
<script src="navbar.js"></script>
<script src="component.js"></script>
<script src="page.js"></script>
<script src="framework.js"></script>
<script src="plugin.js"></script>
然而,这样每个文件就是一个HTTP请求(我们都知道,浏览器的并行下载数是有限的)
<script src="main.js"></script>
合并你的JS文件,文件数量的减少就会带来请求数量的减少和更快的页面加载速度。
想要两全其美?通过构建工具自动化这个过程吧。
图片
使用css-sprites
这个技术就是将各种图片整合到一个文件中去,俗称雪碧图,然后通过CSS去定位它们。
在使用sprite时,应当避免在每个图片之间的空隙过大。这个虽然不会影响到文件的大小,但是会影响到内存的消耗。
Data-URI
这种技术是CSS Sprites的替代方法。是指使用图片的数据代替通常使用的图片URI,在下面的例子中,我们就使用它减少了HTTP请求数。
使用前:
.icon-foo {
background-image: url('foo.png');
}
使用后:
.icon-foo {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAACnej3aAAAAAXRSTlMAQObYZgAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII%3D');
}
所有的现代浏览器和IE8及以上版本的IE都支持这个方法,图片需要使用base64方法编码。
这种技术和CSS Sprites技术都是可以使用构建工具得到的。使用构建工具的好处是不用手工去进行图片的拼合替换,在开发时使用单独的文件就可以。
然而坏处是,随着你的HTML/CSS文件的增大增多,你必须考虑你可能会有一个非常大的图片。如果你在HTTP请求中没有使用gzip技术压缩你的HTML/CSS,那么我们不推荐使用这种方法,因为减少HTTP请求数得到的大文件对于速度来说可能带来相反的结果。
不要在
标签中调整图像
总是在img标签中设置width和height属性。这样可以防止渲染过程中的重绘和回流。
<img width="100" height="100" src="logo.jpg" alt="Logo">
知道这个之后,一个开发者将一个700x700px的图像设置为50x50px来显示。
但是这个开发者不知道的是,大量的没有用的数据也发送到了客户端。
所以请记住:你可以在标签中定义一个图片的寬高,但不意味着你应该通过这么做来(等比)缩放大图。
优化图片
图片文件中包含许多对于Web来说没有用的东西。举例来说,一个JPEG图片中可能包含一些Exif元数据(数据,相机型号,坐标等等)。一个PNG图片会包含有关颜色,元数据的信息,有时甚至还包含一个缩略图。这些只会增加文件的大小,而对于浏览器来说却毫无用处。
有很多工具能够帮你从图片中去除这些信息,并且不会降低图片的质量。我们把这个称做无损压缩。
另一种优化图片的方式是,以图片质量为代价进行压缩。我们称之为有损压缩。举例来说,当你导出一个JPEG图片时,你可以选择导出的图片质量(从0到100)。考虑到性能,总是选择可接受范围内的最低值。在PNG图片中,另一个常见的有损技术是减少颜色数量,或者将PNG-24格式转换为PNG-8格式。
为了提升用户的体验,你还应该将你的JPEG文件转换为渐进式的。现在大多数的浏览器都支持渐进式JPEG文件,并且这种格式的文件创建简单,没有明显的性能损失问题。页面中的这种格式的图片能够更快的展现。
其他
合理设置 HTTP缓存
缓存的力量是强大的,恰当的缓存设置可以大大的减少 HTTP请求。以有啊首页为例,当浏览器没有缓存的时候访问一共会发出 78个请求,共 600多 K数据 (如图 1.1),而当第二次访问即浏览器已缓存之后访问则仅有 10个请求,共 20多 K数据 (如图 1.2)。 (这里需要说明的是,如果直接 F5刷新页面的话效果是不一样的,这种情况下请求数还是一样,不过被缓存资源的请求服务器是 304响应,只有 Header没有Body ,可以节省带宽 ) 怎样才算合理设置 ?原则很简单,能缓存越多越好,能缓存越久越好。例如,很少变化的图片资源可以直接通过 HTTP Header中的Expires设置一个很长的过期头 ;变化不频繁而又可能会变的资源可以使用 Last-Modifed来做请求验证。尽可能的让资源能够在缓存中待得更久。
总结
以上就是网站优化的一些技巧,主要参考点击这里