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

时间:2020-10-13 13:33:42 来源:SEO 作者:曾庆平SEO 点击量:

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

  尽量减少HTTP请求个数

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

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

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

  使用CDN(内容分发网络)

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

  把CSS放到顶部

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

  把JS放到底部

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

  使用gzip压缩内容

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

  favicon.ico要小而且可缓存

  avicon.ico是位于服务器根目录下的一个图片文件。它是必定存在的,因为即使你不关心它是否有用,浏览器也会对它发出请求,因此最好不要返回一个404 Not Found的响应。由于是在同一台服务器上,它每被请求一次coockie就会被发送一次。这个图片文件还会影响下载顺序,例如在IE中当你在onload中请求额外的文件时,favicon会在这些额外内容被加载前下载。因此,为了减少favicon.ico带来的弊端,要做到:文件尽量地小,最好小于1K在适当的时候(也就是你不要打算再换favicon.ico的时候,因为更换新文件时不能对它进行重命名)为它设置Expires文件头。你可以很安全地把Expires文件头设置为未来的几个月。你可以通过核对当前favicon.ico的上次编辑时间来作出判断。Imagemagick可以帮你创建小巧的favicon。

  使AJAX可缓存

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

  使用GET来完成AJAX请求

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

  预加载

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

  尽量减少iframe的个数

  考虑即使内容为空,加载也需要时间,会阻止页面加载,没有语意,注意iframe相对于其他DOM元素高出1-2个数量级的开销,它会在典型方式下阻塞onload事件,IE和Firefox中主页面样式表会阻塞它的下载。

当前位置:SEO > SEO优化技术 >

声明:本文由江西SEO和SEO教程网整理不代表个人观点,转载请注明原文,点击还能查看更多SEO培训的文章;本文网址: http://www.yongfengseo.com/taobaoseo/12851.html

围观: 1000次 | 责任编辑:曾庆平SEO

点击关闭
  • SEO在线客服代码 SEO在线客服代码 SEO在线客服代码