WEB网站前端优化经验技巧

web前端优化

WEB网站前端优化的一些经验技巧介绍
随着前端技术的迅猛发展,网站前端性能优化的必要性也逐渐凸显出来。下面我们站在前端的角度上谈谈如何做好网站性能的优化。
前端如何做好网站性能优化

1.尽量减少HTTP请求个数
2.使用CDN(内容分发网络)
现在大致有这样几种CDN实现:镜像、高速缓存、专线、以及智能路由器和负载均衡。
3.和减少HTTP请求类似,将一些文件缓存到客户端浏览器中,网页加载过程中直接读取缓存文件。
4..我们可以合并图片(如css sprites,内置图片使用数据)、合并css、js。这一点对网站来说很重要,减少不必要的请求对服务器来说可以减少很大的压力。当然要考虑合并后的文件体积。
5.为文件头指定Expires或Cache-Control,使内容可以缓存
6.把CSS放到顶部
实现页面的有序加载,这对于用友较多内容的页面和网速较慢的用户来说极为重要。同时,HTML规范也同样清楚的指出样式表要包含在页面的区域内。
7.把JS放到底部
HTTP/1.1 规范建议,浏览器每个主机名的并行下载内容不超过两个,而问题在于脚本阻止了页面的平行下载,即便是主机名不相同。
8.使AJAX可缓存
利用时间戳,更精巧的实现响应可缓存与服务器数据同步更新。
使用GET来完成AJAX请求
当使用XMLHttpRequest时,浏览器中的POST方法是一个“两步走”的过程:首先发送文件头,然后才发送数据。在url小于2K时使用GET获取数据时更加有意义。
预加载
关注下无条件加载,有条件加载和有预期的加载。
尽量减少iframe的个数
9.使用gzip压缩内容
压缩生产环境的代码,减少文件体积,可以减小带宽。
10.favicon.ico要小而且可缓存
avicon.ico是位于服务器根目录下的一个图片文件。它是必定存在的,因为即使你不关心它是否有用,浏览器也会对它发出请求,因此最好不要返回一 个404 Not Found的响应。由于是在同一台服务器上,它每被请求一次coockie就会被发送一次。这个图片文件还会影响下载顺序,例如在IE中当你在 onload中请求额外的文件时,favicon会在这些额外内容被加载前下载。 因此,为了减少favicon.ico带来的弊端,要做到: 文件尽量地小,最好小于1K 在适当的时候(也就是你不要打算再换favicon.ico的时候,因为更换新文件时不能对它进行重命名)为它设置Expires文件头。你可以很安全地 把Expires文件头设置为未来的几个月。你可以通过核对当前favicon.ico的上次编辑时间来作出判断。 Imagemagick可以帮你创建小巧的favicon。
总结一下WEB前端优化一些经验技巧
1.减少HTTP请求次数
2.使用CDN(Content Delivery Network,内容分发网络)
3.增加Expires Header
4.压缩页面元素
5.避免CSS表达式
6.把JavaScript和CSS放到外部文件中
7.减少DNS查询次数
8.最小化JavaScript代码
9.避免重定向
10.把样式表放在头上
11.把脚本文件放在底部
12.删除重复的脚本文件
13.配置ETags
14.缓存Ajax
WEB前端优化的一些经验技巧总结

成为第一个发表评论的人

发表评论

您的电子邮件地址不会被公开.


*