文档章节

网页加载速度优化方法总结

Jack088
 Jack088
发布于 07/19 20:53
字数 1796
阅读 10
收藏 0

1、减少请求

 

最大的性能漏洞就是一个页面需要发起几十个网络请求来获取诸如样式表、脚本或者图片这样的资源,这个在相对低带宽和高延迟的移动设备连接上来说影响更严重。

 

2、整合资源

 

对开发者来说,将Javascript代码和CSS样式放到公共的文件中供多个页面共享是一种标准的优化方法,这个方法能很简单的维护代码,并且提高客户端缓存的使用效率。

在Javascript文件中,要确保在一个页面中相同的脚本不会被加载多次,当大团队或者多个团队合作开发的时候,这种冗余的脚本就很容易出现,你可能会对它的发生频率并不低感到非常吃惊。

Sprites是css中处理图片的一项技术,Sprites就是将多张图片整合到一个线性的网状的大图片中,页面就可以将这个大图片一次性获取回来并且做为css的背景图,然后使用css的背景定位属性展示页面需要的图片部分,这种技术将多个请求整合成一个,能显著地改善性能。

 

 

3、使用浏览器缓存和本地缓存

 

现在所有的浏览器都会使用本地资源去缓存住那些被Cache一Control或者Expires头标记的资源,这些头能标记资源需要缓存的时间,另外,ETag(实体标签)和Last一Modified头来标识当资源过期后是否需要重新请求,浏览器为了减少不必要的服务器请求,尽可能地从本地缓存中获取资源,并且将那些已经过期的、或者当缓存空间减小的时候将那些很久不用的资源进行清理,浏览器缓存通常包括图片,CSS,Javascript代码,这些缓存能合理地提高网站的性能(比如为了支持后退和前进的按钮,使用一个单独的缓存来保存整个渲染的页面)。

 

 

4、首次使用的时候在HTML中嵌入资源

 

 

HTML的标准是使用链接来加载外部资源,这使得更容易在服务器上(或者在CDN上)操作更新这些资源,而不是在每个页面上修改更新这些资源,根据上文讨论的,这种模式也使得浏览器能从本地缓存而不是服务器上获取资源。

 

 

5、使用HTML5服务端发送事件

Web应用已经使用了各种从服务器上轮询资源的方法来持续地更新页面,HTML5的EventSource对象和Server一Sent事件能通过浏览器端的JavaScript代码打开一个服务端连接客户端的单向通道,服务端可以使用这个写通道来发送数据,这样能节省了HTTP创建多个轮询请求的消耗。

这种方式比HTML的WebSocket更高效,WebSocket的使用场景是,当有许多客户端和服务端的交互的时候(比如消息或者游戏),在全双工连接上建立一个双向通道。

这个技术是基于具体的技术实现的,如果你的网站当前是使用其他的Ajax或者Comet技术来轮询的,转变成Server一Sent事件需要重构网站的Javascript代码。

6、消除重定向

 

当用户在一个移动设备上访问桌面PC网站的时候,Web网站应用通常读取HTTP的user一agent头来判断这个用户是否是来自移动设备的,然后应用会发送带有空HTTP body和重定向HTTP地址头的HTTP 301(或者302)请求,把用户重定向到网站的移动版本上去,但是这个额外的客户端和服务端的交互通常在移动网络上会消耗几百毫秒,因此,在原先的请求上传递移动的web页会比传递一个重定向的信息并让客户端再请求移动页面更快。

7、减少资源负载

关于移动端页面的大小问题,渲染小页面更快,获取小资源也更快,减小每个请求的大小通常不如减少页面请求个数那么显著地提高性能。

但是有些技术在性能方面,特别是在需要对带宽和处理器性能精打细算的移动设备环境下,仍然是能带来很大利益的。

8、压缩文本和图像

诸如gzip这样的压缩技术,依靠增加服务端压缩和浏览器解压的步骤,来减少资源的负载,但是,一般来说,这些操作都是被高度优化过了,而且测试表明,压缩对网站还是起到优化性能的作用的,那些基于文本的响应,包括HTML,XML,JSON(Javascript Object Notation),Javascript,和CSS可以减少大约70%的大小。

9、代码简化

 

简化带来的好处并不局限于减少带宽和延迟,对于那些移动设备上缓存无法保存的过大资源来说,也是很有改善的,Gzip在这个方面并没有任何帮助,因为资源是在被解压后才被缓存起来的。

 

10、调整图片大小

图片通常是占用了Web页面加载的大部分网络资源,也占用了页面缓存的主要空间,小屏幕的移动设备提供了通过调整图片大小来加速传输和渲染图片资源的机会,如果用户只是在小的移动浏览器窗口中看图片的话,高分辨率的图片就会浪费带宽、处理时间和缓存空间。

11、使用HTML5和CSS 3.0来简化页面

这个就不解释了吧!!!!

12、延迟渲染”BELOW一THE一FOLD”内容

一些好的Javascript库可以用来处理这些below一the一fold 延迟加载的图像。

13、延迟读取和执行的脚本

在一些移动设备上,解析Javascript代码的速度能达到100毫秒每千字节,许多脚本的库直到页面被渲染以后都是不需要的加载的,下载和解析这些脚本可以很安全地被推迟到onload事件之后来做。

14、使用Ajax来增强进程

15、根据网络状况进行适配处理

16、对多线程来说尽量使用HTML5的WEB WORKER特性

 

17、将CLICK事件替换成TOUCH事件

18、支持SPDY协议

本文转载自:https://blog.csdn.net/z15877395281/article/details/78483404

共有 人打赏支持
Jack088
粉丝 41
博文 411
码字总数 65170
作品 0
程序员
前端性能优化常用总结

前言 对于前端的性能话题,从来都没有断绝过。因为这个东西没有最好,只有更好。而且往往也是业务的繁杂程度去决定优化程度的。作为一个前端开发者,性能是我们关注的指标。它直接影响着我们...

zimo
2017/10/14
0
0
说走就走的性能优化之旅

雅虎规则 熟悉网站优化的开发者应该都知道,只要提到网页性能优化,就绕不开雅虎军规。优化规则&&原文,仔细阅读这些规则,可以总结到3个方面: Http层面上的优化 减少http请求数,http请求c...

乖小鬼YQ
2017/11/29
0
0
分享网页加载速度优化的一些技巧(转)

不管你是不是相信,在最近的几年里,互联网网页的大小已经显著增大了。由HTTP Archive研究得出的结果表明,目前平均一个页面的大小是1.25M。对于拥有宽带的用户来说,可能并不是一个问题。但...

小鲅鱼
2013/02/20
326
1
响应式Web设计(四):响应式Web设计的优化

这篇文章主要说说在进行响应式Web设计的过程中,涉及到页面的一些需要进行优化的地方: 1、 轻量级的Javascript库: 针对PC端网页当然会首选jQuery来作为前端javascript库,但是针对移动端来...

幸福2胖纸
2013/05/06
0
23
加快网站访问速度——Yslow极限优化

Yslow是一套雅虎的网页评分系统,详细的列出了各项影响网页载入速度的参数,这里不做多说。 我之前就一直参考Yslow做博客优化,经过长时间的学习也算是有所收获,小博的YslowV2分数达到了94分...

RJKD
2014/04/22
0
0

没有更多内容

加载失败,请刷新页面

加载更多

java序列化(七) - fst 序列化

java序列化(七) - fst 序列化 github https://github.com/RuedigerMoeller/fast-serialization 实践 https://gitee.com/mengzhang6/serializable-demo.git maven依赖 <!-- https://mvnrepo......

晨猫
17分钟前
2
0
智力问题汇总

南京新建地铁线路,给你2块钱,测出来需要配置多少辆车? 参考答案:根据地铁有固定时间间隔,坐一圈该线路,推算出需要多少辆。 一共50张卡片,上面写着1--50 ,50个数字,藏起来一张,打乱...

职业搬砖工程师
21分钟前
1
0
ZFS-自我恢复RAID

ZFS-自我恢复RAID 这个给了我一个简单而又强大的理由,让我立马为之折服,ZFS可以自动的检测发生的错误,而且,可以自我修复这些错误。假设有一个时刻,磁盘阵列中的数据是错误的,不管是什么...

openthings
30分钟前
2
0
从Hash到一致性Hash原理(深度好文)

要讲一致性Hash原理,先从一般性Hash讲起,其实Hash的本质就是一个长度可变的数组,那为什么Hash的时间复杂度是O(1),而其他类型的数据结构查找都是要遍历来,遍历去,即便是树,二叉树,也是要经过几...

算法之名
43分钟前
17
0
软件测试工具书籍与面试题汇总下载(持续更新)

简介 本文是https://github.com/china-testing/python-api-tesing/blob/master/books.md 的节选。 欢迎转载,转载请附带此简介,谢谢! 试题 软件测试综合面试题(高级测试)-试题.pdf 软件测试...

python测试开发人工智能安全
51分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部