文档章节

提高页面加载速度的方法

sunshinewyf
 sunshinewyf
发布于 2015/10/11 11:16
字数 649
阅读 145
收藏 18

提高页面加载速度的方法有如下几个方面:
(一)减少HTTP强求
(1)增加并行连接
(2)合并资源文件:将多个小的css还有javascript文件进行合并成一个大文件,这样页面在加载页面的相关资源的时候,就会减少HTTP的请求,从而加快页面的加载速度
(3)使用CSS sprite:将整个网站上所有共用的小图片都合成一张图片,然后使用background-position进行控制所需要的图片位置.原理是虽然每次只是使用了一张小图片,但是整个图片都已经被保存到了缓存中,这样每次使用就不需要再去请求图片

sprite图片制作的网站有:http://www.spritecow.com 和http://www.spritebox.net
(二)使用CDN加速
只要有人访问你的网站,它就会从最近的一个节点取数据给他,但是这些节点所缓存的文件是不易改动的,所以最好在CDN上存放静态的文件,比如图片,字体,javascript文件,

(三)避免空的src和href属性值
比如在页面加载的过程中,有一个空的src属性的img元素被javascript动态地赋值,这样做的问题是在脚本执行之前,元素就被浏览器渲染了所以浏览器仍然会发起一个HTTP请求,虽然是一个空值,同样的空的href也会向服务器发送一个HTTP请求,这虽然不影响加载时间,但是会对服务器产生不必要的流量和压力,严重的以至于影响整个网站的用户体验,有一个简单的解决办法如下:
<a href="javascript:;" class="name"></a>
还可以按照如下方式解决:
<a href="#description" id="name"></a>
<script>
   $('#name').click(function(e){
     e.preventDefault();
   })
</script>
这样做的好处是用户在单击之前得到一些提示,而且单击之后也不会产生不必要的HTTP请求.
除此之外,空的src和href也是会产生报错的,如果在发送空属性值的时候,追踪请求头的状态(用Cookie或者其他方法),是无法追踪到状态的

(四)启用GZIP压缩
HTTP协议中有一个属性:Accept-Encoding,当显示为如下的时候表示这个请求的内容是被压缩过的:
Accept-Encoding:gzip,deflate

(五)把css放在头部,javascript放在尾部

(六)避免使用css表达式

(七)移除不使用的css语句

https://developer.yahoo.com/performance/rules.html

© 著作权归作者所有

sunshinewyf
粉丝 17
博文 97
码字总数 64205
作品 0
武汉
程序员
私信 提问
提高网页的加载速度浅析

加快网页的加载速度,无疑是提高用户体验的一个很好的方法。但是这里我们如何提高网页的加载速度呢?这里我总结了几点。 当然,这也是我第一天上班来的第一个任务。。。 1、使用良好的结构 ...

hello菜bird
2016/08/09
105
0
如何提高网页的加载速度

加快网页的加载速度,无疑是提高用户体验的一个很好的方法。但是这里我们如何提高网页的加载速度呢?这里我总结了几点。 当然,这也是我第一天上班来的第一个任务。。。 1、使用良好的结构 ...

邪气小生
2016/07/14
187
0
测试网页打开速度的18种专业方法

网站的加载速度是决定网站等级的重要因素,值得站长特别关注。原因很简单,没有人愿意为了打开一个网页而等老半天,换句话说,如果你的网站打开速度 很慢,将流失大量的访客,甚至出现多米诺...

james_laughing
2016/12/14
695
0
基于Vue的SPA如何优化页面加载速度

常见的几种SPA优化方式 减小入口文件体积 静态资源本地缓存 开启GZip压缩 使用SSR ..... 减小入口文件体积,常用的手段是路由懒加载,开启路由懒加载之后,待请求的页面会单独打包js文件,使...

吴空
2018/06/10
0
0
最近排查android webview https的发热耗电和加载速度慢问题解决

最近排查android webview https的发热耗电和加载速度慢问题 问题:H5页面发热耗电 排查:通过android studio profiler 查看CPU消耗曲线,发现静置情况下webview轮播图波浪式消耗CPU,且峰值高...

ljianbing
2018/05/28
0
0

没有更多内容

加载失败,请刷新页面

加载更多

python学习10.04:Python list列表使用技巧及注意事项

前面章节介绍了很多关于 list 列表的操作函数,细心的读者可能会发现,有很多操作函数的功能非常相似。例如,增加元素功能的函数有 append() 和 extend(),删除元素功能的有 clear()、 remo...

太空堡垒185
27分钟前
4
0
新手插画学习的方法?教你如何自学?

插画学习的方法?教你如何自学? 从小喜欢画一些漫画头像随笔画,但是其实没有基础。个人偏好小清新手绘风的插画(如下图),每每看到都希望自己能画出这样的作品。 我其实很想说画这种美术功...

huihuajiaocheng
32分钟前
4
0
面试题

1、实现clone();

gtandsn
43分钟前
5
0
CentOS 7 部署 tesseract-ocr

官方地址 github yum-config-manager --add-repo https://download.opensuse.org/repositories/home:/Alexander_Pozdnyakov/CentOS_7/ 若提示 yum-config-manager: command not found 执行以......

阿白
43分钟前
3
0
JAVA比较器中comparator的使用

一个专用的比较器Comparator Comparator是一个专用的比较器,当一个不支持自比较或者自比较函数不能满足要求时,可写一个比较器来完成两个对象之间大小的比较。Comparator体现了一种策略模式...

daxiongdi
44分钟前
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部