大家好,这里是@IT·平头哥联盟,我是首席填坑官
——苏南(South·Su),今天是国庆节的第二天,这个假期没有外出(不要问我为什么,自己脑补~😭),前些天分享了一篇前端面试汇总的文章,有些同学在群里问了其中的一些细节,其中大家最关心的性能优化这块,今天整理了公司项目中的一些认为不错的点,跟大家一起分享,如有理解错误,请纠正。
**1、**首先最基本的,CSS
样式表放在页面头部 Head 内且link
链式引入,javascript 放在底部 body 结束标签前避免阻塞。
**2、**js/html/css/图片都做压缩合并,图片预加载、懒加载,也是老生常谈了,在这里推荐一个图片无损极限压缩的工具,能压小 60 ~ 80%左右,比较麻烦的是每次要手动操作——TinyPNG,有兴趣的同学了可以了解一下他们的 API,自己封装一个服务调用压缩,不过免费次数有限制哦。
**3、**减少 DOM 元素数量,减少 DOM 的操作:
重绘 /重排
;**4、**静态资源CDN
分发:
CDN
系统能够实时地根据网络流量和各节点的连接、负载状况以及到用户的距离
和响应时间等综合信息将用户的请求重新导向离用户最近的服务节点
上———曾经人们都说距离产生美,后来变了都说距离产生小三,在这里距离产生的是用户跑路了
,所以足以说明 CDN 的重要性
;重绘 /重排
,使用 WebP
格式图片,它能对原图(png)做到近 98%压缩,当然它也不是完美的:
WebP
最初在 2010 年发布,目标是减少文件大小,支持无损、有损压缩,动态、静态图片,压缩比率优于 GIF、JPEG、JPEG2000、PNG 等格式,非常适合用于网络等图片传输,现在开始已经被越来越多的浏览器支持,当然 WebP 格式也有它的缺点,算法相对其他格式更加复杂,会在节省流量资源的同时会占用计算资源,对计算机造成更大的负担,WebP
支持的像素最大数量是 16383x16383。有损压缩的 WebP 仅支持 8-bit 的YUV4:2:0
格式。而无损压缩(可逆压缩)的 WebP 支持 VP8L 编码与 8-bit 之 ARGB 色彩空间。又无论是有损或无损压缩皆支持 Alpha 透明通道、ICC 色彩配置、XMP 诠释数据,更详细支持说明:caniuse.com
优势:
- 体积小几乎可以毫不夸张的说,已经小的不能再小了;
- 小而美的同时,还质量好,几乎看不出来与原图差别;
- 曾经的动态图 gif、jpeg 压缩都会不清晰,但现在对它来说都是 so easy ~。
缺点 /困难:
- 目前并不是所有浏览器都支持
WebP
,因此需要解决浏览器适配问题;- 对于已上线的项目,采用
WebP
需要替换大量图片,工作量太大(不确定后台程序是否能搞定)。
**5、**域名拆分:
以下为各浏览器请求并发数,数据来源于
chorme 搜索
,珍爱生命,远离某……🙏:
| 浏览器 | HTTP/1.1 | HTTP/1.0 | | ------ | -------- | -------- | | Chrome | 6 | 6 | | 火狐 | 6 | 6 | | Safari | 4 | 4 | | IE11 | 6 | 6 | | IE9 | 10 | 10 | | …… | …… | …… |
6、 减少 http 请求次数
1.
拿出电话,找到某个接头人的号码;2.
接通后暗号:A)
、你好,你好,我是长江一号,请问能听到吗?B)
,你好,我是长江二号,能听到你讲话,你能听到我说什么吗?A)
、能听到,我们开始讲正事吧……;3.
聊的很嗨;4.
聊完了,准备告别:A)
、(可以是服务端,也可以是客户端)该说的我都说完了,你自己看着办吧;B)
、好的我也说完了;B)
、(B 紧接着又跟 A 发了条信息),再见;A)
、然后 A 收到 B 的话,而 B 那边已经放下手机挂了,A 等了一下听 B 没有再说啥,也就挂了(挂个毛啊,婊子无情,戏子无义,陪你唠嗑这么久,都不给个好评~😂);HTTP/2.0
的处理有所不同,2.0 过程还有TLS/SSL
的处理,HTTP 是超文本传输协议,信息是明文传输,HTTPS 则是具有安全性的 SSL(Certificate Authority,申请证书)加密传输协议,HTTPS 加密传输、身份认证的网络协议,内容传输经过完整性校验、内容经过对称加密,每个连接生成一个唯一的加密密钥、第三方无法伪造服务端(客户端)身份等众多优势,同时也有劣势因为做的事情多了中间对接的次数同样需要时间,这也是 HTTPS 更慢的根本原因。上两图吧,这样大家看着清晰一些
,但暂时只列了 HTTP/1.0 的,HTTP/2.0 的图下次有时间再补,是有一个大佬指点我的哦,说这样看起来更骚气,大家会更喜欢,哈哈~:
结论:从上面的这个过程可以看出,每一次请求都这么复杂,减少 http 的请求次数是不是很有必要呢??答案是肯定的,我们会以以下几个维度来进行优化:
- 合并
JS、CSS
文件;- 图片 /图标 sprites 合并,或使用
iconfont
字体图标,或者SVG Sprites
;什么是 Svg Sprites?;- 资源按需加载,即当前页面用到什么,就加载什么,避免加载与当前页面无关的事情,这一点现在的 React/Vue/Angular 等
MVVM
框架,基于 webpack 编译打包工具,做的很好;- 前端数据的缓存(如:一个列表页,进入详情,再返回,这个用户的交互行为是很频繁的,可以对列表的数据进度一个缓存,不用每次返回都进行加载,比如 5 分钟更新一次。
7、 数据设置缓存,好累写不动了,http 缓存的设置,之前的面试汇总👉如何设置 http 缓存?吧; 8、 站点服务端开启 Gzip 压缩,当然还可以了解一下 Brotli 或 Zopfli,据说 Brotli 比 Gzip 和 Deflate 更有效,有兴趣的同学可以了解一下; 8、 避免重定向,尽量减少 iframe 使用,它会阻塞主页面的渲染; 9、 避免使用 CSS Expression ( css 表达式)又称 Dynamic properties(动态属性); 10、 合理使用 dns-prefetch、prefetch、preload、defer、async:
dns-prefetch
:使用 dns-prefetch 对项目中用到的域名进行 DNS 预解析,减少 DNS 查询,如: <link href="//honeybadger8.github.io" rel="dns-prefetch">; BAT 各大巨头都是这么干的,请看下图,dns 的详细解析过程今天先不讲了,码字码不动了,写分享比加班做项目还累,望体谅~;prefetch
: 它是一个优先级非常低的资源加载标识,浏览器会在空闲时(即主进程资源加载完成后)下载带有 prefetch
标识的资源并缓存到 disk,在后续模块使用到这个文件的时候,会直接从缓存读取;该功能 webpack 有个插件,配置后编译能自动插入到页面上;preload
:没错,它就是一个可以预加载资源的属性,详细说明请看官方API,一般情况下我们可能会对接下来的业务需要的 audio、img、font、script 等资源进行预先加载(甚至是下一个路由页面哦),这样能达到 0 秒打开页面的效果!要把一个项目做好,每一个细节都很重要,希望今天的分享能给大家的工作带来些许帮助,谢谢!
最近一直在思考,如何有规化的分享工作中的积累,国庆这些天也一直看了很多大神写的博客,最后综合自身的能力及时间,决定先尝试写一个**# 动画 #
**系列文章,动画可能主要包含(CSS/Canvas
)两部分,欢迎大家持续关注!
以上就是今天的分享,新手上路中,我会努力让自己变得更优秀、写出更好的文章,文章中有不对之处,烦请各位大神斧正。如果你觉得这篇文章对你有所帮助,那就请关注下方的 公众号
吧。
作者:苏南 - 首席填坑官
交流群:912594095,公众号:honeyBadger8
链接: https://blog.csdn.net/weixin_43254766/article/details/83267838
本文原创,著作权归作者所有。商业转载请联系@IT·平头哥联盟
获得授权,非商业转载请注明原链接及出处。
1
southSu OP 凭窗独倚,月洒憔颜,
自顾盼,独悲伤! 情丝难剪,相思难断, 日日思,夜夜盼! 喜鹊临枝,凭添凄凉, 心无所望,泪洒裙裳!—— 首席填坑官-苏南向您问好,感谢您的耐心阅读与认可,记得关注我哦! |
2
abux1024 2018-11-09 21:18:21 +08:00
mark
|