全站首页
设为首页
收藏本站
开启辅助访问
请
登录
后使用快捷导航
没有帐号?
立即注册
用户名
Email
记 住
找回密码
密码
立即注册
只需一步,快速开始
快捷导航
首页
西虹市网
杂谈
今日新闻
聊拆迁
宠物
交友
怀孕妈咪
上班族
母校
情感
生活
楼市房产
家具装饰
我要旅游
谈美食
谈婚论嫁
妈咪宝贝
夫妻情感
购物族
娱乐
I摄影
爱车族
运动健身
爱K歌
乐器族
爱看影视
便民
租房
招聘
二手
求职
搜索
搜索
热搜:
昌平
美食
交友
娱乐
拆迁
本版
文章
帖子
群组
用户
西虹市网
»
爱我西虹网
›
娱乐爱好
›
体育运动
›
明白:如何进行网站性能优化
社区广播台
热门推荐:
自定内容
自定内容
自定内容
自定内容
自定内容
自定内容
提高产品可靠性:紧固件在高温环境中的挑战
说说:不吃不喝20年买房,蔡少芬家90平算顶
知晓:难以置信!一线城市核心地段 房价10
每日新闻:专家“房价涨到头了”,房产泡沫
帮助你快速了解如何获取支付宝运动答题正确
返回列表
查看:
2
|
回复:
0
明白:如何进行网站性能优化
[复制链接]
liukai
liukai
当前离线
积分
980710
电梯直达
楼主
发表于 2024-12-16 19:26:10
|
只看该作者
|
倒序浏览
|
阅读模式
进行网站性能优化,要经过以下几个方法:1、减少http请求,合理设置 HTTP缓存;2、使用浏览器缓存;3、启用压缩;4、CSS Sprites;5、LazyLoad Images;6、CSS放在页面最上部,javascript放在页面最下面;7、异步请求Callback;8、减少cookie传输。具体内容我们将在文章中展开。
西虹网
西虹网
西虹网
西虹网
网站的访问量及用户的持久性其实在一定程度上取决于其性能,如果一个网站响应耗时久,动画卡顿,占用大量的cpu等,往往就会导致用户流失。尤其是app及微信端应用,可以这么说,如果页面打开都要超过4秒,这体验绝对差。作为一个开发者,是不允许出现这种情况的,那么该如何提高页面的性能呢?
西虹网
西虹网
西虹网
西虹网
大致的网站优化性能步骤不外乎减少HTTP请求次数,减少DNS访问,减少对DOM的操作,缩减请求的文件大小/cookie大小等等,
西虹网
西虹网
西虹网
西虹网
http协议是无状态的应用层协议,意味着每次http请求都需要建立通信链路、进行数据传输,而在服务器端,每个http都需要启动独立的线程去处理。这些通信和服务的开销都很昂贵,减少http请求的数目可有效提高访问性能。
西虹网
西虹网
西虹网
西虹网
减少http的主要手段是合并CSS、合并javascript、合并图片。将浏览器一次访问需要的javascript和CSS合并成一个文件,这样浏览器就只需要一次请求。图片也可以合并,多张图片合并成一张,如果每张图片都有不同的超链接,可通过CSS偏移响应鼠标点击操作,构造不同的URL。
西虹网
西虹网
西虹网
西虹网
缓存的力量是强大的,恰当的缓存设置可以大大的减少 HTTP请求。假设某网站首页,当浏览器没有缓存的时候访问一共会发出 78个请求,共 600多 K数据,而当第二次访问即浏览器已缓存之后访问则仅有 10个请求,共 20多 K数据。 (这里需要说明的是,如果直接 F5刷新页面的话效果是不一样的,这种情况下请求数还是一样,不过被缓存资源的请求服务器是 304响应,只有 Header没有Body,可以节省带宽 )
西虹网
西虹网
西虹网
西虹网
怎样才算合理设置?原则很简单,能缓存越多越好,能缓存越久越好。例如,很少变化的图片资源可以直接通过 HTTP Header中的Expires设置一个很长的过期头 ;变化不频繁而又可能会变的资源可以使用 Last-Modifed来做请求验证。尽可能的让资源能够在缓存中待得更久。关于 HTTP缓存的具体设置和原理此处就不再详述了。
西虹网
西虹网
西虹网
西虹网
对一个网站而言,CSS、javascript、logo、图标这些静态资源文件更新的频率都比较低,而这些文件又几乎是每次http请求都需要的,如果将这些文件缓存在浏览器中,可以极好的改善性能。通过设置http头中的cache-control和expires的属性,可设定浏览器缓存,缓存时间可以是数天,甚至是几个月。
西虹网
西虹网
西虹网
西虹网
在某些时候,静态资源文件变化需要及时应用到客户端浏览器,这种情况,可通过改变文件名实现,即更新javascript文件并不是更新javascript文件内容,而是生成一个新的JS文件并更新HTML文件中的引用。
西虹网
西虹网
西虹网
西虹网
使用浏览器缓存策略的网站在更新静态资源时,应采用逐量更新的方法,比如需要更新10个图标文件,不宜把10个文件一次全部更新,而是应该一个文件一个文件逐步更新,并有一定的间隔时间,以免用户浏览器忽然大量缓存失效,集中更新缓存,造成服务器负载骤增、网络堵塞的情况。
西虹网
西虹网
西虹网
西虹网
在服务器端对文件进行压缩,在浏览器端对文件解压缩,可有效减少通信传输的数据量。如果可以的话,尽可能的将外部的脚本、样式进行合并,多个合为一个。文本文件的压缩效率可达到80%以上,因此HTML、CSS、javascript文件启用GZip压缩可达到较好的效果。但是压缩对服务器和浏览器产生一定的压力,在通信带宽良好,而服务器资源不足的情况下要权衡考虑。
西虹网
西虹网
西虹网
西虹网
合并 CSS图片,减少请求数的又一个好办法。
西虹网
西虹网
西虹网
西虹网
这条策略实际上并不一定能减少 HTTP请求数,但是却能在某些条件下或者页面刚加载时减少 HTTP请求数。对于图片而言,在页面刚加载的时候可以只加载第一屏,当用户继续往后滚屏的时候才加载后续的图片。这样一来,假如用户只对第一屏的内容感兴趣时,那剩余的图片请求就都节省了。
西虹网
西虹网
西虹网
西虹网
浏览器会在下载完成全部CSS之后才对整个页面进行渲染,因此最好的做法是将CSS放在页面最上面,让浏览器尽快下载CSS。如果将 CSS放在其他地方比如 BODY中,则浏览器有可能还未下载和解析到 CSS就已经开始渲染页面了,这就导致页面由无 CSS状态跳转到 CSS状态,用户体验比较糟糕,所以可以考虑将CSS放在HEAD中。
西虹网
西虹网
西虹网
西虹网
Javascript则相反,浏览器在加载javascript后立即执行,有可能会阻塞整个页面,造成页面显示缓慢,因此javascript最好放在页面最下面。但如果页面解析时就需要用到javascript,这时放到底部就不合适了。
西虹网
西虹网
西虹网
西虹网
Lazy Load Javascript(只有在需要加载的时候加载,在一般情况下并不加载信息内容。)随着 Javascript框架的流行,越来越多的站点也使用起了框架。不过,一个框架往往包括了很多的功能实现,这些功能并不是每一个页面都需要的,如果下载了不需要的脚本则算得上是一种资源浪费 -既浪费了带宽又浪费了执行花费的时间。目前的做法大概有两种,一种是为那些流量特别大的页面专门定制一个专用的 mini版框架,另一种则是 Lazy Load。
西虹网
西虹网
西虹网
西虹网
在某些页面中可能存在这样一种需求,需要使用 script标签来异步的请求数据。类似:
西虹网
西虹网
西虹网
西虹网
/Callback 函数/
西虹网
西虹网
西虹网
西虹网
function myCallback(info){
西虹网
西虹网
西虹网
西虹网
//do something here
西虹网
西虹网
西虹网
西虹网
}
西虹网
西虹网
西虹网
西虹网
HTML:
西虹网
西虹网
西虹网
西虹网
Callback返回的内容 :
西虹网
西虹网
西虹网
西虹网
myCallback('Hello world!');
西虹网
西虹网
西虹网
西虹网
像以上这种方式直接在页面上写
西虹网
西虹网
西虹网
西虹网
<script>
西虹网
西虹网
西虹网
西虹网
对页面的性能也是有影响的,即增加了页面首次加载的负担,推迟了 DOMLoaded和window.onload 事件的触发时机。如果时效性允许的话,可以考虑在 DOMLoaded事件触发的时候加载,或者使用 setTimeout方式来灵活的控制加载的时机。
西虹网
西虹网
西虹网
西虹网
一方面,cookie包含在每次请求和响应中,太大的cookie会严重影响数据传输,因此哪些数据需要写入cookie需要慎重考虑,尽量减少cookie中传输的数据量。另一方面,对于某些静态资源的访问,如CSS、script等,发送cookie没有意义,可以考虑静态资源使用独立域名访问,避免请求静态资源时发送cookie,减少cookie传输次数。
西虹网
西虹网
西虹网
西虹网
最后,推荐我们的管理工具给大家
西虹网
西虹网
http://www.jvelove.com/doc_27085123.html
西虹网
西虹网
http://www.jvelove.com/doc_26960124.html
西虹网
西虹网
http://www.jvelove.com/doc_26919490.html
西虹网
西虹网
http://www.jvelove.com/doc_26944193.html
西虹网
西虹网
http://www.jvelove.com/doc_27175796.html
西虹网
西虹网
http://www.jvelove.com/doc_27094099.html
西虹网
西虹网
http://www.jvelove.com/doc_26828923.html
西虹网
西虹网
http://www.jvelove.com/doc_26979924.html
西虹网
西虹网
http://www.jvelove.com/doc_27018615.html
西虹网
西虹网
http://www.jvelove.com/doc_27096518.html
西虹网
西虹网
http://www.jvelove.com/doc_26930849.html
西虹网
西虹网
http://www.jvelove.com/doc_26898262.html
西虹网
西虹网
http://www.jvelove.com/doc_26930843.html
西虹网
西虹网
http://www.jvelove.com/doc_27030774.html
西虹网
西虹网
http://www.jvelove.com/doc_27079594.html
西虹网
西虹网
http://www.jvelove.com/doc_26892015.html
西虹网
西虹网
http://www.jvelove.com/doc_27523661_5815152_0_1.html
西虹网
西虹网
http://www.jvelove.com/doc_26974276.html
西虹网
西虹网
http://www.jvelove.com/doc_27096516.html
西虹网
西虹网
http://www.jvelove.com/doc_27523657_5815150_0_1.html
西虹网
西虹网
http://www.jvelove.com/doc_27175813.html
西虹网
西虹网
http://www.jvelove.com/doc_26960132.html
西虹网
西虹网
http://www.jvelove.com/doc_27066027.html
西虹网
西虹网
http://www.jvelove.com/doc_27046283.html
西虹网
西虹网
http://www.jvelove.com/doc_26969189.html
西虹网
西虹网
http://www.jvelove.com/doc_27207896.html
西虹网
西虹网
http://www.jvelove.com/doc_26828941.html
西虹网
西虹网
http://www.jvelove.com/
西虹网
西虹网
http://www.jvelove.com/doc_27132372.html
西虹网
西虹网
http://www.jvelove.com/doc_27067480.html
西虹网
西虹网
http://www.jvelove.com/doc_27169754.html
西虹网
西虹网
http://www.jvelove.com/doc_27690443.html
西虹网
西虹网
http://www.jvelove.com/doc_27169714.html
西虹网
西虹网
http://www.jvelove.com/doc_27213224.html
西虹网
西虹网
http://www.jvelove.com/doc_27102732.html
西虹网
西虹网
http://www.jvelove.com/doc_27179174.html
西虹网
西虹网
http://www.jvelove.com/doc_26829054.html
西虹网
西虹网
http://www.jvelove.com/doc_26925284.html
西虹网
西虹网
http://www.jvelove.com/doc_26969225.html
西虹网
西虹网
http://www.jvelove.com/doc_26962992.html
西虹网
西虹网
http://www.jvelove.com/doc_27207900.html
西虹网
西虹网
http://www.jvelove.com/doc_26913374.html
西虹网
西虹网
http://www.jvelove.com/doc_27062737.html
西虹网
西虹网
http://www.jvelove.com/doc_27858882.html
西虹网
西虹网
http://www.jvelove.com/doc_26828925.html
西虹网
西虹网
http://www.jvelove.com/doc_27058156.html
西虹网
西虹网
http://www.jvelove.com/doc_27024862.html
西虹网
西虹网
http://www.jvelove.com/doc_26923055.html
西虹网
西虹网
http://www.jvelove.com/doc_27090042.html
西虹网
西虹网
http://www.jvelove.com/doc_27074022.html
分享到:
QQ好友和群
QQ空间
腾讯微博
腾讯朋友
收藏
0
转播
分享
回复
使用道具
举报
返回列表
发表回复
高级模式
B
Color
Image
Link
Quote
Code
Smilies
您需要登录后才可以回帖
登录
|
立即注册
本版积分规则
发表回复
回帖并转播
回帖后跳转到最后一页
© 2001-2013
西虹市网
(bbs) 版权所有 All Rights Reserved.
爱我西虹网-西虹人的网上家园,这里因你而精彩!欢迎加入!
X3
备案号 (
ICP备15022509
)
快速回复
返回顶部
返回列表