如何做好网站前端的性能优化

  • A+
所属分类:黑白帽技巧

前端性能,即页面性能,简单来说就是能看到页面内容的时间以及可以开始在页面上操作的时间。关于前端性能优化的总结,随处都可以看到这方面的文章,而优化方法,也无外乎那些“固定”方面,当然,有些方面已经过时,所以,在这里,成都SEO也总结了一遍,加深理解,也希望是一种不同的总结形式。

如何做好网站前端的性能优化

什么是前端性能优化?

从用户访问资源到资源完整的展现在用户面前的过程中,通过技术手段和优化策略,缩短每个步骤的处理时间从而提升整个资源的访问和呈现速度。

为什么要做前端性能优化?

在构建web站点的过程中,任何一个细节都有可能影响网站的访问速度,如果不了解性能优化知识,很多不利网站访问速度的因素会形成累加,从而严重影响网站的性能,导致网站访问速度变慢,用户体验低下,最终导致用户流失。

尽量减少HTTP请求个数

我们可以合并图片(如css sprites,内置图片使用数据)、合并css、js。这一点对网站来说很重要,减少不必要的请求对服务器来说可以减少很大的压力。当然要考虑合并后的文件体积。

为文件头指定企业推广Expires或Cache-Control,使内容可以缓存

和减少HTTP请求类似,将一些文件缓存到客户端浏览器中,网页加载过程中直接读取缓存文件。

使用CDN

现在大致有这样几种CDN实现:镜像、高速缓存、专线、以及智能路由器和负载均衡。

把CSS放到顶部

实现页面的有序加载,这对于用友较多内容的页面和网速较慢的用户来说极为重要。同时,HTML规范也同样清楚的指出样式表要包含在页面的区域内。

把JS放到底部

HTTP/1.1 规范建议,浏览器每个主机名的并行下载内容不超过两个,而问题在于脚本阻止了页面的平行下载,即便是主机名不相同。

使用g网站seo诊断zip压缩内容

压缩生产环境的代码,减少文件体积,可以减小带宽。

favicon.ico要小而且可缓存

avicon.ico是位于服务器根目录下的一个图片文件。它是必定存在的,因为即使你不关心它是否有用,浏览器也会对它发出请求,因此最好不要返回一 个404 Not Found的响应。由于是在同一台服务器上,它每被请求一次coockie就会被robots协议发送一次。这个图片文件还会影响下载顺序,例如在IE中当你在 onload中请求额外的文件时,favicon会在这些额外内容被加载前下载。 因此,为了减少favicon.ico带来的弊端,要做到: 文件尽量地小,最好小于1K 在适当的时候为它设置Expires文件头。

使AJAX可缓存

利用时间戳,更精巧的实现响应可缓存与服务器数据同步更新。

使用GET来完成AJAX请求

当使用XMLHttpRequest时,浏览器中的POST方法是一个“两步走”的过程:首先发送文件头,然后才发送数据。在url小于2K时使用GET获取数据时更加有意义。

预加载

关注下无条件加载,有条件加载和有预期的加载。

weinxin
我的微信
这是我的微信扫一扫

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: