网站访问速度优化之二 - JS和CSS优化

网站访问速度优化之二 - JS和CSS优化

如需转载请标明出处：http://blog.csdn.net/itas109

QQ技术交流群：12951803

1.去除无用的JS和CSS引用

好多时候，开发时可能会进行复制粘贴操作，这时就有可能导致无用的JS和CSS引用。去掉没有用到的，也是会对网站速度有一定提高的。

2.JS和CSS压缩

我们在写JS和CSS时，为了便于阅读会加好多空格、换行等，但是对于机器而言，并没有却别。但是，这些空格、换行等也是占空间的。所以，发布的时候，JS和CSS压缩还是有必要的。另外，缩短变量名也是一种压缩方式。

在线工具：

http://tool.oschina.net/jscompress

勾选”JS标识符混淆”，代码会更精简

精简前

/*示例代码*/

function echo(stringA,stringB){

var hello="你好";

alert("hello world");

}

/*示例代码*/

精简后：

function echo(c,b){var a="你好";alert("hello world")};

3.合并JS和CSS文件

网站中每使用一个文件，都会让页面加载速度慢一点。

可以css delivery工具，来检测页面代码中css文件。然后通过复制粘贴合并成一个。

可以用resource check来检测页面中所引用的js文件数，然后可以通过复制粘贴的方法将多个文件合并成一个。

4.尽量减少HTTP请求

当一个网站一下子收到太多的HTTP请求，它的访客就会有响应时间延迟的体验，这不仅增加了CPU使用率也增加了页面的加载时间。那么，又该如何减少HTTP请求？请见以下步骤。

减少网站上的对象数量。

最小化网站上的重定向数量。

使用CSS Sprites技术（只要你需要的那部分图片内容）。

整合JavaScripts和CSS。

5.延迟js加载

浏览器在执行js代码时，会停止处理页面。当页面中很多js文件或者代码要加载时，将导致严重的延迟。

尽管可以使用defer，异步或将js代码放在页面底部来延迟js的加载，但这些都不是一个好的解决方案。

比较好的解决方案：

<script>
function downloadJSAtOnload(){
varelement=document.createElement("script");
element.src="defer.js";
document.body.appendChild(element);
}
if(window.addEventListener){
window.addEventListener('load',downloadJSAtOnload,false);
}else if(window.attachEvent){
window.attachEvent('onload',downloadJSAtOnload);
}else{
window.onload=downloadJSAtOnload;
}
</script>

6.启用压缩/Gzip

使用gzip对html和css文件进行压缩，通常可以大约节省50%到70%，这样加载页面只需要更少的带宽和更少的时间。

7.指定图像尺寸

当浏览器加载页面的html时，有时候需要在图片下载完成前，对页面布局进行定位。如果hmtl里的图片没有指定尺寸，或者代码描述的尺寸和实际的图片尺寸不符合时，浏览器需要在图片下载完成后在回溯到该图片，并重新显示，这将消耗额外的时间。

最好的页面中每一张图片都指定尺寸，不管在html里的img中，还是在css中。

8.优化页面元素加载顺序

首先加载页面最初显示的内容和与之相关的JS和CSS，然后加载HTML相关的东西，最后加载不是最初显示相关的图片、flash、视频等资源。

HTML头部的JavaScript和写在HTML标签中的Style会阻塞页面的渲染，因此CSS放在页面头部并使用Link方式引入，JavaScript的引入放在页面尾。

9.CDN加速

一般我们会把JS和CSS放到自己服务器上面，其实我们完全可以寻找一些访问速度快的CDN地址替换下，例如：把jquery.x.x.js 替换为 http://apps.bdimg.com/libs/jquery/1.7.2/jquery.min.js等，这样就大大的提高了这些库的加载速度。

百度静态资源公共库

新浪云计算CDN公共库

Reference:

http://blog.csdn.net/lululul123/article/details/76167861

http://blog.csdn.net/qq_34789775/article/details/71302309

觉得文章对你有帮助，可以用微信扫描二维码捐赠给博主，谢谢！



如需转载请标明出处：http://blog.csdn.net/itas109

QQ技术交流群：12951803