JavaScript关于提高网站性能的几点建议(一)


Posted in Javascript onJuly 24, 2016

近在学习《高性能网站建设指南》这本书,本文算是一个学习笔记,将学到的东西进行整理一下,方便后面查看。

性能黄金法则(Performance Golden Rule)解释了只有10%~20%的最终用户响应时间花在接受所请求的用户HTML文档上,剩余的80%~90%时间花在为HTML文档所引用的所有组件(图片、脚本、样式表等)进行的HTTP请求上,最终用户响应时间花费在页面组件上

  ——Steve Sounders

1 文件合并(减少HTTP请求数量)

CSS Sprites

  利用css sprites将网站用到的图片合并成一张图片,通过background-position、width、height控制背景图位置来使用某一个图标,这种方式可以将多个图片请求缩减为一次,生成css sprites的工具也很多,grunt和gulp中都有相关的插件,CssGaga也不错。

合并js和css

  和精灵图一样,合并css和js文件也是减少HTTP请求很重要的方式,对css文件的合并目前来说没有什么争议,但是对于当前js模块化盛行,将所有js文件合并成一个文件,仿佛是一种倒退。正确的方式是遵守编译型语言的模式,保持js的模块化,在生成过程中只对初始请求用到的js文件生成目标文件。

2 使用内容发布网络(减少HTTP请求时间)

  HTTP请求时间另一个影响因素是你与网站web服务器所处的距离,显然距离越远,请求所需的时间也越久,通过CDN可以大大改善这一点。

  CDN是分布在多个不同地理位置的web服务器,用于更加有效的向用户发布内容。CDN最主要的功能是给终端用户存放静态文件,另外也提供下载、安全服务等功能。

3 设置浏览器缓存(避免重复HTTP请求)

使用Expire/Cache-control

  浏览器通过使用缓存可以避免每次都进行重复的请求,HTTP 1.0和HTTP1.1分别有不同的缓存实现方式,Expires(1.0)和Cache-control(1.1)。Web服务器通过expires告诉客户端在指定的时间内,都使用该文件的缓存副本,不再向服务端重复发出请求,例如:

Expires: Thu, 01 Dec 2016 16:00:00 GMT (GMT格式)

  这个设置意味着截止到2016年12月1日,都可以使用该缓存副本,无需再发出请求。

  Expires这种通过截止日期的方式,存在一个限制:要求客户端和服务端时钟严格同步,而HTTP 1.1引入的Cache-Control通过指定一个以秒为单位的时间指定缓存日期,则不存该限制,例如:

Cache-Control: max-age=31536000

  这个设置意味缓存时间为一年,推荐使用Cache-Control,但是在支持HTTP 1.1的情况下,另外要注意的一点:Cache-Control和Expire同时存在时,Cache-Control具有更高的优先级。

配置或移除ETag

  使用Expire/Cache-Control可以避免第二次访问时,使用本地缓存避免重复HTTP请求,提高网站速度。然而,在用户点击了浏览器刷新或者在expire已过期的情况下,仍然会向服务端发出HTTP GET请求,而此时如果该文件并没有发生变化,服务端不会返回整个文件而是会返回304 Not Modified状态码。

  服务端判断该文件是否发生变化的依据有两个:Last-Modified(最新修改日期)和ETag(实体标签);

  ETag(Entity Tags)是在HTTP 1.1引入的,与Last-Modified同时存在时要有更高的优先级。服务端通过对比客户端发来的ETag(If-None-Match)和当前ETag,若相同返回304 Not Modifed,否则返回整个文件以及200 OK。

  ETag存在一个问题:当浏览器向一个服务器发送GET请求原始组件,之后又向另一台服务器请求该组件时,ETag是不匹配的,当然,如果你的网站寄宿在一台服务器上不存在这个问题,而现在很多网站使用多台服务器,ETag的存在就大大降低验证有效性的成功率。

  存在这个问题是时的解决办法是对ETag进行配置,移除服务器innode值只保留修改时间戳和大小作为ETag值,或者直接移除ETag,使用Last-Modified来验证文件有效性。

4 压缩组件(减小HTTP请求大小)

  通过对HTTP传输的文件进行压缩减小HTTP请求的大小,提高请求速度,GZIP是目前最常用也是最有效的压缩方式。

  然而,并非所有的资源文件都需要压缩,压缩的成本包括服务端需要花费CPU周期进行压缩,而客户端也需要对压缩文件进行解压缩,必须结合自己网站进行权衡。现在绝大多数网站都对其HTML文档进行压缩,部分网站选择对js、css进行压缩,几乎没有网站对图片、PDF等文件进行GZIP压缩,原因在于这些文件是已经被压缩过的,采用HTTP压缩已经被过压缩的东西并不能使它更小。事实上,添加标头,压缩字典,并校验响应体实际上使它变得更大,而且还浪费了CPU。

  如何对网站开启GZIP,需要在所使用的web服务器(IIS、Nginx、Apache等)中进行设置。

5 CSS文件放在首部

  将CSS文件放在首部和放在尾部,并不影响HTTP请求,因此从请求时间上来讲是一致的,然而从用户体验的角度,将CSS文件放在首部,会获得更好的用户体验。

  原因在于浏览器是从上到下依次解析html文档,将CSS文件置于头部,页面会首先对CSS文件发出请求,随后加载DOM树并对其进行渲染,页面会逐步呈现在用户面前。

  而与之相反,如果将CSS文件放置在尾部,页面加载完整DOM之后请求CSS文件,然后对整个DOM树渲染并呈现给用户,从用户的角度,在css文件没有请求完成之前,整个页面是出于白屏状态的,白屏是浏览器的一种行为,David Hyatt对其的解释是这样的

在样式树没有完全加载之前,渲染dom树就是一种浪费,因为在样式树加载完成之后会再次渲染,出现FOUC(无样式内容闪烁)问题。

  另外要注意的一点,使用link而不是@import引入css样式表,使用@import引入的样式即使写在首部,也会在文档最后加载。

6 JS文件放在尾部

  HTTP请求是并行的,不同浏览器并行下载的数目也不一样(2、4、或者8个),并行下载提高了HTTP请求的速度。而将JS文件放在首部,不仅会阻塞后面文件的下载而且会阻塞页面的渲染。

  为什么会这样呢?原因有两个:

JS文件中可能存在document.write修改页面的内容,因此页面会在脚本执行完成之后才可使渲染。

不同JS文件不管大小如何,可能存在依赖关系,因此必须按照顺序进行执行,因此在加载脚本的时候并行下载是禁止的。

所以,最好的方式是讲js文件放置在尾部,等页面所有可视化组件加载完成之后再进行请求,提高用户体验。

以上所述是小编给大家介绍的JavaScript关于提高网站性能的几点建议(一),希望对大家有所帮助,如果大家想了解更多内容,敬请关注三水点靠木。在下篇文章小编给大家介绍javascript提高网站性能优化的建议(二)

Javascript 相关文章推荐
JS 实现导航栏悬停效果(续2)
Sep 24 Javascript
jQuery下的动画处理总结
Oct 10 Javascript
浅谈JS中的!=、== 、!==、===的用法和区别
Sep 24 Javascript
把json格式的字符串转换成javascript对象或数组的方法总结
Nov 03 Javascript
详解Javascript几种跨域方式总结
Feb 27 Javascript
vue实现app页面切换动画效果实例
May 23 Javascript
Vue 事件处理操作实例详解
Mar 05 Javascript
详解在React-Native中持久化redux数据
May 22 Javascript
vue router总结 $router和$route及router与 router与route区别
Jul 05 Javascript
layer实现弹出层自动调节位置
Sep 05 Javascript
转换layUI的数据表格中的日期格式方法
Sep 19 Javascript
Vue表单控件数据绑定方法详解
Feb 05 Javascript
JavaScript提高网站性能优化的建议(二)
Jul 24 #Javascript
JavaScript学习小结之使用canvas画“哆啦A梦”时钟
Jul 24 #Javascript
省市二级联动小案例讲解
Jul 24 #Javascript
基于jQuery实现多标签页切换的效果(web前端开发)
Jul 24 #Javascript
js简单实现调整网页字体大小的方法
Jul 23 #Javascript
jquery实现ajax加载超时提示的方法
Jul 23 #Javascript
数据结构中的各种排序方法小结(JS实现)
Jul 23 #Javascript
You might like
php 破解防盗链图片函数
2008/12/09 PHP
php adodb分页实现代码
2009/03/19 PHP
PHP无限分类(树形类)
2013/09/28 PHP
实现PHP多线程异步请求的3种方法
2014/01/17 PHP
php汉字转拼音的示例
2014/02/27 PHP
ThinkPHP之N方法实例详解
2014/06/20 PHP
php中创建和调用webservice接口示例
2014/07/25 PHP
window.addeventjs事件驱动函数集合addEvent等
2008/02/19 Javascript
锋利的jQuery 要点归纳(三) jQuery中的事件和动画(下:动画篇)
2010/03/24 Javascript
offsetParent 算法分析
2010/04/05 Javascript
js里的prototype使用示例
2010/11/19 Javascript
从数据结构的角度分析 for each in 比 for in 快的多
2013/07/07 Javascript
js数组的基本用法及数组根据下标(数值或字符)移除元素
2013/10/20 Javascript
js中数组排序sort方法的原理分析
2014/11/20 Javascript
JS模拟酷狗音乐播放器收缩折叠关闭效果代码
2015/10/29 Javascript
html5+javascript实现简单上传的注意细节
2016/04/18 Javascript
javascript作用域、作用域链(菜鸟必看)
2016/06/16 Javascript
JavaScript中ES6 Babel正确安装过程
2016/07/18 Javascript
[02:43]中国五虎出征TI3视频
2013/08/02 DOTA
Python处理XML格式数据的方法详解
2017/03/21 Python
python查找指定文件夹下所有文件并按修改时间倒序排列的方法
2018/10/21 Python
python 求某条线上特定x值或y值的点坐标方法
2019/07/09 Python
Python递归求出列表(包括列表中的子列表)的最大值实例
2020/02/27 Python
python如何导出微信公众号文章方法详解
2020/08/31 Python
基于HTML5代码实现折叠菜单附源码下载
2015/11/27 HTML / CSS
美国维生素、补充剂、保健食品购物网站:Vitacost
2016/08/05 全球购物
美国医生配方营养补充剂供应商:Healthy Directions
2019/07/10 全球购物
个人简历自我评价
2014/01/06 职场文书
创先争优制度
2014/01/21 职场文书
《湘夫人》教学反思
2014/02/21 职场文书
2015年农村党员公开承诺事项
2015/04/28 职场文书
聘任通知书
2015/09/21 职场文书
2016抗战胜利71周年红领巾广播稿
2015/12/18 职场文书
社会心理学学习心得体会
2016/01/22 职场文书
Java数据结构之链表相关知识总结
2021/06/18 Java/Android
html中显示特殊符号(附带特殊字符对应表)
2021/06/21 HTML / CSS