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 相关文章推荐
判断控件是否已加载完成的代码
Feb 24 Javascript
jQuery EasyUI API 中文文档 - Pagination分页
Sep 29 Javascript
jQuery.extend()、jQuery.fn.extend()扩展方法示例详解
May 08 Javascript
jQuery实现企业网站横幅焦点图切换功能实例
Apr 30 Javascript
简介JavaScript中search()方法的使用
Jun 06 Javascript
JavaScript实现数组随机排序的方法
Jun 26 Javascript
jQuery实现的手机发送验证码倒计时效果代码分享
Aug 24 Javascript
JavaScript的设计模式经典之建造者模式
Feb 24 Javascript
jQuery轻松实现无缝轮播效果
Mar 22 jQuery
微信小程序模板template简单用法示例
Dec 04 Javascript
layui form.render('select', 'test2') 更新渲染的方法
Sep 27 Javascript
JavaScript实现音乐导航效果
Nov 19 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中删除变量时unset()和null的区别分析
2011/01/27 PHP
Session的工作机制详解和安全性问题(PHP实例讲解)
2014/04/10 PHP
在WordPress中安装使用视频播放器插件Hana Flv Player
2016/01/04 PHP
浅谈关于PHP解决图片无损压缩的问题
2017/09/01 PHP
Laravel中Facade的加载过程与原理详解
2017/09/22 PHP
Laravel 5.4.36中session没有保存成功问题的解决
2018/02/19 PHP
浅谈PHP无限极分类原理
2019/03/14 PHP
用函数式编程技术编写优美的 JavaScript
2006/11/25 Javascript
网页禁用右键实现代码(JavaScript代码)
2009/10/29 Javascript
Javascript面向对象之四 继承
2011/02/08 Javascript
写得不错的jquery table鼠标经过变色代码
2013/09/27 Javascript
使用ajaxfileupload.js实现ajax上传文件php版
2014/06/26 Javascript
Js数组排序函数sort()介绍
2015/06/08 Javascript
JavaScript实现数组随机排序的方法
2015/06/26 Javascript
jquery实现点击其他区域时隐藏下拉div和遮罩层的方法
2015/12/23 Javascript
JavaScript中点击事件的写法
2016/06/28 Javascript
JS实现同一DOM元素上onClick事件与onDblClick事件并存的解决方法
2018/06/07 Javascript
微信小程序实现通过双向滑动缩放图片大小的方法
2018/12/30 Javascript
详解vue-router导航守卫
2019/01/19 Javascript
vue各种事件监听实例(小结)
2020/06/24 Javascript
解决ant design vue 表格a-table二次封装,slots渲染的问题
2020/10/28 Javascript
vue下拉刷新组件的开发及slot的使用详解
2020/12/23 Vue.js
Python实现购物程序思路及代码
2017/07/24 Python
python爬取拉勾网职位数据的方法
2018/01/24 Python
解决python2 绘图title,xlabel,ylabel出现中文乱码的问题
2019/01/29 Python
Python中函数的基本定义与调用及内置函数详解
2019/05/13 Python
python 计算一个字符串中所有数字的和实例
2019/06/11 Python
Python OrderedDict的使用案例解析
2019/10/25 Python
Mac中PyCharm配置Anaconda环境的方法
2020/03/04 Python
使用numpngw和matplotlib生成png动画的示例代码
2021/01/24 Python
前端实现打印图像功能
2019/08/27 HTML / CSS
美味咖啡的顶级烘焙师:Cafe Britt
2018/03/15 全球购物
本科生详细的自我评价
2013/09/19 职场文书
十佳班主任事迹材料
2014/01/18 职场文书
八荣八耻演讲稿
2014/09/15 职场文书
win10蓝屏0xc0000001安全模式进不了怎么办?win10出现0xc0000001的解决方法
2022/08/05 数码科技