Web性能优化

Web性能优化分为服务器端和浏览器端两个方面。

1、浏览器端,关于浏览器端优化,分不少个方面
一、压缩源码和图片
JavaScript文件源代码能够采用混淆压缩的方式,CSS文件源代码进行普通压缩,JPG图片能够根据具体质量来压缩为50%到70%,PNG可使用一些开源压缩软件来压缩,好比24色变成8色、去掉一些PNG格式信息等。

二、选择合适的图片格式
若是图片颜色数较多就使用JPG格式,若是图片颜色数较少就使用PNG格式,若是可以经过服务器端判断浏览器支持WebP,那么就使用WebP格式和SVG格式。

三、合并静态资源
包括CSS、JavaScript和小图片,减小HTTP请求。有很大一部分用户访问会由于这一条而取得最大受益

四、开启服务器端的Gzip压缩
这对文本资源很是有效,对图片资源则没那么大的压缩比率。

五、使用CDN
或者一些公开库使用第三方提供的静态资源地址(好比jQuery、normalize.css)。一方面增长并发下载量,另外一方面可以和其余网站共享缓存。

六、延长静态资源缓存时间
这样,频繁访问网站的访客就可以更快地访问。不过,这里要经过修改文件名的方式,确保在资源更新的时候,用户会拉取到最新的内容。

七、把CSS放在页面头部,把JavaScript放在页面底部
这样就不会阻塞页面渲染,让页面出现长时间的空白。

具体参考:野马程序员:web性能优化

另,其余具体详解:
一、Web 前端优化最佳实践之 内容篇
二、Web 前端优化最佳实践之 Server 篇
三、Web 前端优化最佳实践之 Cookie 篇
四、Web 前端优化最佳实践之 CSS 篇
五、Web 前端优化最佳实践之 JavaScript 篇
六、Web 前端优化最佳实践之 图象篇
七、Web 前端优化最佳实践之 Mobile(iPhone) 篇

如何提升网页效率的14条建议
如何提升网页的效率(下篇)——Use YSlow to know why your web Slow


2、服务器端优化
这里就不详解了,直接看专栏吧Web项目开发性能优化解决方案——服务端

以上内容为整理所得,与各位共同分享javascript

相关文章
相关标签/搜索