设为首页收藏本站

天空语文 如皋  九华 作文  教学

 找回密码
 我要加入(register注册)

QQ登录

只需一步,快速开始

快捷登录

使用微信账号登录

最近看过此主题的会员

天空新人

依灵灵灵.

金川兰

lulululu

lisunan18795762

清风拂过

楠大人

王悦

朴弟

赵珺琦

王佳慧

八5霍程

徐灵丽

等下一个十年

2461604173

陈李湘2023八5班

郭帅杰27

紫罗兰

陆伟宸202286

鲨鱼公主.

十二

LJX李佳鑫

何玉霞20202185

陈李湘2022八5

qq_qzuser_NtN

薛亚楠86

查看: 401|回复: 2
收起左侧

Web前端优化,提高加载速度

  [复制链接] TA的其它主题
来自- 保留地址

Ta在天空论坛排行

积分:NO. 44 名

发帖:NO. 40 名

在线:NO. 15 名

靓莉阁 发表于 2019-8-8 22:21:32 | 显示全部楼层 |阅读模式 来自- 保留地址
天空便利贴:这里是语文的天堂,也是文学的乐园。如有原创或喜欢的文章,可推荐发表,供坛友欣赏提高。您的热情和才华是天空论坛最大的财富。
来自- 保留地址

加入天空更多精彩

您需要 登录 才可以下载或查看,没有账号?我要加入(register注册)

x
Web前端优化,提高加载速度研究表明:用户最满意的打开网页时间是2-5秒,如果等待超过10秒,99%的用户会关闭这个网页。也许这样讲,各位还不会有太多感触,接下来我列举一组数据:Google网站访问速度每慢400ms就导致用户搜索请 求下降0.59%;Amazon每增加100ms网站延迟将导致收入下降1%;雅虎如果有400ms延迟会导致流量下降5-9%。网站的加载速度严重影响了用户体验,也决定了这个网站的生死存亡。
可能有人会说:网站的性能是后端工程师的事情,与前端并无多大关系。我只能说,too young too simple。事实上,只有10%~20%的最终用户响应时间是用在从Web服务器获取HTML文档并传送到浏览器的,那剩余的时间去哪儿了?来瞄一下性能黄金法则
只有10%~20%的最终用户响应时间花在了下载HTML文档上。其余的80%~90%时间花在了下载页面中的所有组件上。


接下来我们将研究一下前端攻城狮如何来提高页面的加载速度。

一、减少HTTP请求
上面说到80%~90%时间花在了下载页面中的所有组件进行的HTTP请求上。因此,改善响应时间最简单的途径就是减少HTTP请求的数量。

从WEB运行原理上讲,IIS请求是无状态的,在服务器端一直是连接和关闭的不断进行着,如果能减少服务器请求,总的时间将会减少。
   之前我下载163邮箱的登陆页面的图片时发现,它们的只用到了一个图片来完成整个页面的所有图片,当时我就纳闷了,这跟平时做的网站不一样呀。然来这样做减少浏览器的请求次数,用httpwatch你会发现请求的总时间大大减少了。同样的想法,在做css样式,javascript代码的时候也要做到尽可能的放在一个文件下来减少WEB请求。

二、使用CDN
如果应用程序web服务器离用户更近,那么一个HTTP请求的响应时间将缩短。另一方面,如果组件web服务器离用户更近,则多个HTTP请求的响应时间将缩短。
CDN(内容发布网络)是一组分布在多个不同地理位置的Web服务器,用于更加有效地向用户发布内容。在优化性能时,向特定用户发布内容的服务器的选择基于对网络慕课拥堵的测量。例如,CDN可能选择网络阶跃数最小的服务器,或者具有最短响应时间的服务器。
CDN还可以进行数据备份、扩展存储能力,进行缓存,同时有助于缓和Web流量峰值压力。
CDN的缺点:
1、响应时间可能会受到其他网站流量的影响。CDN服务提供商在其所有客户之间共享Web服务器组。
2、如果CDN服务质量下降了,那么你的工作质量也将下降


3、无法直接控制组件服务器

三、添加Expires头
页面的初次访问者会进行很多HTTP请求,但是通过使用一个长久的Expires头,可以使这些组件被缓存,下次访问的时候,就可以减少不必要的HTPP请求,从而提高加载速度。
Web服务器通过Expires头告诉客户端可以使用一个组件的当前副本,直到指定的时间为止。例如:
Expires: Fri, 18 Mar 2016 07:41:53 GMT
Expires缺点: 它要求服务器和客户端时钟严格同步;过期日期需要经常检查
HTTP1.1中引入Cache-Control来克服Expires头的限制,使用max-age指定组件被缓存多久。
Cache-Control: max-age=12345600


若同时制定Cache-Control和Expires,则max-age将覆盖Expires头

四、压缩组件

  Jquery 作为JS最轻量级的类库,它的原类库是242KB,压缩后的它竟只有91.6KB。     常见的压缩工具有Google Closure Compiler、YUI Compressor、JsPacker、gzip。我常用的是gzip,因为它的压缩率是最高的。用jdk压缩后它会把一些空格去掉,把我们很长的变量名换成换成很短的字母来代替。

五、将样式表放在头部
首先说明一下,将样式表放在头部对于实际页面加载的时间并不能造成太大影响,但是这会减少页面首屏出现的时间,使页面内容逐步呈现,改善用户体验,防止“白屏”。
我们总是希望页面能够尽快显示内容,为用户提供可视化的回馈,这对网速慢的用户来说是很重要的。


将样式表放在文档底部会阻止浏览器中的内容逐步出现。为了避免当样式变化时重绘页面元素,浏览器会阻塞内容逐步呈现,造成“白屏”。这源自浏览器的行为:如果样式表仍在加载,构建呈现树就是一种浪费,因为所有样式表加载解析完毕之前务虚会之任何东西

六、将脚本放在底部( 这样做可以尽可能的先加载页面的DOM结构,然后才可以级用户体验
更样式表相同,脚本放在底部对于实际页面加载的时间并不能造成太大影响,但是这会减少页面首屏出现的时间,使页面内容逐步呈现。
js的下载和执行会阻塞Dom树的构建(严谨地说是中断了Dom树的更新),所以script标签放在首屏范围内的HTML代码段里会截断首屏的内容。


下载脚本时并行下载是被禁用的——即使使用了不同的主机名,也不会启用其他的下载。因为脚本可能修改页面内容,因此浏览器会等待;另外,也是为了保证脚本能够按照正确的顺序执行,因为后面的脚本可能与前面的脚本存在依赖关系,不按照顺序执行可能会产生错误。


七、使用外部的JavaScript和CSS
内联脚本或者样式可以减少HTTP请求,按理来说可以提高页面加载的速度。然而在实际情况中,当脚本或者样式是从外部引入的文件,浏览器就有可能缓存它们,从而在以后加载的时候能够直接使用缓存,而HTML文档的大小减小,从而提高加载速度。
影响因素:
1、每个用户产生的页面浏览量越少,内联脚本和样式的论据越强势。譬如一个用户每个月只访问你的网站一两次,那么这种情况下内联将会更好。而如果该用户能够产生很多页面浏览量,那么缓存的样式和脚本将会极大减少下载的时间,提交页面加载速度。
2、如果你的网站不同的页面之间使用的组件大致相同,那么使用外部文件可以提高这些组件的重用率。
加载后下载


有时候我们希望内联样式和脚本,但又可以为接下来的页面提供外部文件。那么我们可以在页面加载完成止呕动态加载外部组件,以便用户接下来的访问。



八、精简JavaScript
精简
精简就是从代码中移除不必要的字符以减少文件大小,降低加载的时间。代码精简的时候会移除不必要的空白字符(空格,换行、制表符),这样整个文件的大小就变小了。


九、使Ajax可缓存
异步与即时

Ajax的一个明显的优点就是向用户提供了即时反馈,因为它异步的从后端web服务器请求信息。

用户是否需要等待的关键因素在于Ajax请求是被动的还是主动的。被动请求是为了将来使用而预先发起的,主动请求是基于用户当前的操作而发起的
什么样的AJAX请求可以被缓存?
POST的请求,是不可以在客户端缓存的,每次请求都需要发送给服务器进行处理,每次都会返回状态码200。(可以在服务器端对数据进行缓存,以便提高处理速度)
GET的请求,是可以(而且默认)在客户端进行缓存的,除非指定了不同的地址,否则同一个地址的AJAX请求,不会重复在服务器执行,而是返回304。
Ajax请求使用缓存
在进行Ajax请求的时候,可以选择尽量使用get方法,这样可以使用客户端的缓存,提高请求速度。














我知道答案 本帖寻求最佳答案回答被采纳后将获得系统奖励10 天空金币 , 目前已有2人回答

最近访客

来自- 保留地址
天空便利贴:
到底了,觉得文章不错的,可以给作者评论或者打赏,这是创作者向前的动力。可以向上滑,或者转到相关热帖。使用过程中如有好的意见或建议,欢迎联系页面qq客服。天空论坛因你更精彩。
回复

手机扫码浏览
天空论坛,有你有我,明天更好!
来自- 保留地址
点评回复 来自- 保留地址

使用道具 举报 来自- 保留地址

来自- 中国湖北十堰

Ta在天空论坛排行

积分:NO. 9 名

发帖:NO. 8 名

在线:NO. 15 名

狂人逸文 发表于 2024-2-27 07:45:58 | 显示全部楼层 来自- 中国湖北十堰
来自- 中国湖北十堰
楼主的帖子实在是写得太好了。文笔流畅,修辞得体!
来自- 中国湖北十堰
沙发 2024-2-27 07:45:58 回复 收起回复
B Color Smilies
还可输入 2000 个字符
回复
天空论坛,有你有我,明天更好!
来自- 中国湖北十堰
点评回复 支持 反对 来自- 中国湖北十堰

使用道具 举报 来自- 中国湖北十堰

来自- 中国湖北十堰

Ta在天空论坛排行

积分:NO. 10 名

发帖:NO. 11 名

在线:NO. 15 名

传奇私服cdegeq 发表于 2024-2-28 10:53:21 | 显示全部楼层 来自- 中国湖北十堰
来自- 中国湖北十堰
今天皮痒了?
来自- 中国湖北十堰
板凳 2024-2-28 10:53:21 回复 收起回复
B Color Smilies
还可输入 2000 个字符
回复
天空论坛,有你有我,明天更好!
来自- 中国湖北十堰
点评回复 支持 反对 来自- 中国湖北十堰

使用道具 举报 来自- 中国湖北十堰

高级模式
B Color Image Link Quote Code Smilies

本版积分规则

×天空论坛发帖友情提示:
1、注册用户在本论坛发表、转载的任何作品仅代表其个人观点,不代表本论坛认同其观点。
2、如果存在违反国家相关法律、法规、条例的行为,我们有权在不经作者准许的情况下删除其在本论坛所发表的文章。
3、所有网友不要盗用有明确版权要求的作品,转贴请注明来源,否则文责自负。
4、本论坛保护注册用户个人资料,但是在自身原因导致个人资料泄露、丢失、被盗或篡改,本论坛概不负责,也不承担相应法律责任。

QQ|手机版|我们的天空 ( 苏ICP备18048761号 ) |苏公网安备32068202000215号 |网站地图

GMT+8, 2024-3-29 22:32 , Processed in 0.448406 second(s), 72 queries , Gzip On.

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表