• 生活经历的意义,是为了引导你,而非定义你。

  • 外卖,购物,看电影,打车都可以领劵

  • 人生在世最重要的是独立支撑,在物质上独立支撑,在精神上也要独立支撑。在物质上依赖他人就无法自由呼吸,在精神上依赖他人就无法随心所欲。

  • 进了好大学也好,进了好公司也好,如果有活到老学到老的想法,那就有无限的可能性。失去好奇心的那一瞬间,人就死了。读书,不是为了考试,而是为了成为出色的大人。

  • 我常常想,人类得到切割时间的能力,确实堪称是最伟大的发明之一。因为只有这样,大家才不会混混噩噩一顿水地过下去。人,有了停顿的概念,才会有反省的机会。

  • 所有的改变都是一种深思熟虑过后的奇迹, 每瞬间奇迹都在发生。

  • 雨天听雨,调动五感,全身投入,感受那一瞬间。雪天赏雪,夏天感受暑热,冬天体悟刺骨的寒冷。日日是好日,原来是这个意思。

  • 受挫的时候,想到等待着自己的人,和信任自己的人,就绝不能迷失自己。我要一点一点重新来过,慢一些也没关系。我要重新开始。

  • 今天在松松博客的博文发表成功了 :mrgreen:  博文地址

如何把网站的速度优化再优化?站长必看(前端篇)

网站优化 James 10个月前 (01-23) 275次浏览 已收录 1个评论 扫描二维码
文章目录[隐藏]

大家好,我是一名普通的程序员,也是老余博客的站长。今天在这里分享一下关于网站的速度优化的心得。

要想网站速度打开的快,从技术角度分析考虑从以下3个方面入手:前端优化,后端优化,服务端优化。

前端性能优化

1、加载资源优化

静态资源的合并和压缩:js和css文件尽可能不要分成太多的文件,同时记得要压缩一下。

静态资源缓存(浏览器缓存策略)。

使用CDN让静态资源加载更快。

2、渲染优化

CSS放head中,JS放body后

图片懒加载

减少DOM操作,对DOM操作做缓存

减少DOM操作,多个操作尽量合并在一起执行

事件节流

尽早执行操作 DOMContentLoaded

3、懒加载

页面图片尽可能使用懒加载,原则:“看啥取啥”,以免一次性加载过度资源造成网络堵塞。

4、异步加载

非核心代码异步加载 — 异步加载的方式 — 区别

4.1.动态脚本加载

用js创建

4.2.defer

4.3.async

关于 defer,我们还要记住的是它是按照加载顺序执行脚本的

标记为async的脚本并不保证按照指定它们的先后顺序执行。对它来说脚本的加载和执行是紧紧挨着的,所以不管你声明的顺序如何,只要它加载完了就会立刻执行。

5、DNS预解析 DNS Prefetch

DNS Prefetch 应该尽量的放在网页的前面,推荐放在 <meta charset=”UTF-8″> 后面。具体使用方法如下:

< meta http-equiv="x-dns-prefetch-control" content="on">
< link rel="dns-prefetch" href="//img.xjqyc.cn">
< link rel="dns-prefetch" href="//api.share.xjqyc.cn">
< link rel="dns-prefetch" href="//www.jiuguanjiamaoyi.com">

DNS Prefetch,即DNS预获取,是前端优化的一部分。一般来说,在前端优化中与 DNS 有关的有两点: 一个是减少DNS的请求次数,另一个就是进行DNS预获取 。

DNS 作为互联网的基础协议,其解析的速度似乎很容易被网站优化人员忽视。现在大多数新浏览器已经针对DNS解析进行了优化,典型的一次DNS解析需要耗费 20-120 毫秒,减少DNS解析时间和次数是个很好的优化方式。DNS Prefetching 是让具有此属性的域名不需要用户点击链接就在后台解析,而域名解析和内容载入是串行的网络操作,所以这个方式能 减少用户的等待时间,提升用户体验 。

默认情况下浏览器会对页面中和当前域名(正在浏览网页的域名)不在同一个域的域名进行预获取,并且缓存结果,这就是隐式的 DNS Prefetch。如果想对页面中没有出现的域进行预获取,那么就要使用显示的 DNS Prefetch 了。

目前大多数浏览器已经支持此属性,支持版本如下:

  • – Safari: 5+
  • – Chrome: All
  • – Firefox: 3.5+
  • – Opera: Unknown
  • – IE: 9+ (called “Pre-resolution” on blogs.msdn.com)

其中 Chrome 和 Firefox 3.5+ 内置了 DNS Prefetching 技术并对DNS预解析做了相应优化设置。所以 即使不设置此属性,Chrome 和 Firefox 3.5+ 也能自动在后台进行预解析 。

目前很多大型站点也应用了这一优化,例如:阿里,淘宝,hao123,支付宝,网易等

6、图片格式尽可能选择主流格式


老余博客, 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:如何把网站的速度优化再优化?站长必看(前端篇)
喜欢 (3)
[老余博客]
分享 (0)
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(1)个小伙伴在吐槽
  1. 感谢的分享!!!!
    电商专供2021-08-12 09:43 回复