浅谈网站的性能优化1
程序员文章站
2022-07-02 13:18:32
...
1.减少http请求
这个应该是最容易想到的了，减少http请求的方法有很多：
(1).css sprites、字库文件（自己一般使用阿里矢量图标库）；
(2).减少外链的js脚本文件，比如使用requeir.js，它不仅可以帮你把众多的js脚本文件加载变为一个脚本文件的加载还可以实现js的模块化编程。
2.压缩文件
(1).css和js文件的压缩，比如就像最常见到的jquery一样，我们一般使用时都会用压缩版（min）对于自己编写的js文件和css文件一样可以进行压缩处理；
(2).图片的压缩和选择：对于图片的质量，也可以做一定的处理，并且对于移动端和pc端可以采用选择不同质量的图片。
3.避免使用css express
其实这个我还真的很少用，但是如果频繁使用css express的话，页面的性能会有明显的下降（尽量别用吧）。
4.脚本文件和样式表的位置
将脚本文件置底（也就是放在body标签内的最下方），将样式表文件放在head区域，这样做符合浏览器的解析过程不会导致渲染延迟等问题带来的糟糕体验。
5.避免重定向
无论是301还是302都会导致多余的跳转和请求，应该尽量避免。（听说有些网站还因此损失了不少的用户）。
6.使用CDN（内容分发网络）
使用CDN可以提升网站的加载速度，如果一个网站是面向世界的话，我觉得CDN是必不可少的。
7.Gzip
使用Gzip可以提高网页浏览速度，Gzip通常可以减少70%的网页体积。
8.代码书写方面
(1).通过事件委托；
(2).减少dom和js的交互，什么意思呢？看看下面的例子：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
window.onload=function(){
var li=document.getElementsByTagName('li')[0];
console.time();
for (var i=0;i<5000;i++) {
li.innerHTML+='n';
}
console.timeEnd();//default: 298.387939453125ms
console.time();
var str='';
for (var i=0;i<5000;i++) {
str+='n';
}
li.innerHTML=str;
console.timeEnd();//default: 0.68212890625ms
}
</script>
</head>
<body>
<ul>
<li></li>
</ul>
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
window.onload=function(){
var ul=document.getElementsByTagName('ul')[0];
console.time();
for (var i=0;i<5000;i++) {
var newli=document.createElement('li');
newli.innerHTML='我是li';
ul.appendChild(newli);
}
console.timeEnd();//default: 42.875ms
var newli=document.createElement('li');
newli.innerHTML='我是li';
console.time();
for (var i=0;i<5000;i++) {
var cli=newli.cloneNode(true);
ul.appendChild(cli);
}
console.timeEnd();//default: 11.708984375ms
}
</script>
</head>
<body>
<ul>
</ul>
</body>
</html>
10.待续...