这份优化清单，你作了哪些？

引言

​ 你们好，这里是@IT·平头哥联盟，我是首席填坑官——苏南(South·Su)，今天是国庆节的次日，这个假期没有外出(不要问我为何，本身脑补～😭)，前些天分享了一篇前端面试汇总的文章，有些同窗在群里问了其中的一些细节，其中你们最关心的性能优化这块，今天整理了公司项目中的一些认为不错的点，跟你们一块儿分享，若有理解错误，请纠正。

优化归纳

一、首先最基本的，CSS样式表放在页面头部Head内且link链式引入，javascript放在底部body结束标签前避免阻塞。

二、js/html/css/图片都作压缩合并，图片预加载、懒加载，也是老生常谈了，在这里推荐一个图片无损极限压缩的工具，能压小60～80%左右,比较麻烦的是每次要手动操做——TinyPNG，有兴趣的同窗了能够了解一下他们的API，本身封装一个服务调用压缩，不过免费次数有限制哦。

三、减小DOM元素数量，减小DOM的操做：

• 减小 DOM 元素数量，合理利用:after、:before等伪类，避免页面过深的层级嵌套;
• 优化javascript性能,减小DOM操做次数(或集中操做)，能有效规避页面重绘/重排;
• 如何才算少？抱歉，这个没有办法给出一个标准精确的答案，只能说尽量去作优化，如数据分页、首屏直出、按需加载等。

四、静态资源CDN分发：

• CDN的意图就是尽量的减小资源在转发、传输、链路抖动等状况下顺利保障信息的连贯性；
• 通俗的讲就是CDN系统可以实时地根据网络流量和各节点的链接、负载情况以及到用户的距离和响应时间等综合信息将用户的请求从新导向离用户最近的服务节点上———曾经人们都说距离产生美，后来变了都说距离产生小三，在这里距离产生的是用户跑路了，因此足以说明CDN的重要性；
• CDN采用各节点缓存的机制缓存很严重，当咱们项目的静态资源(只是以前存放在cdn上的资源)修改后，若是CDN缓存没有作相应更新，则看到的仍是旧的网页，解决的办法是刷新缓存，七牛云、腾讯云均可单独针对某个文件/目录进行刷新；
• 广告常说：XX酒虽好，可不要贪杯哦，CDN托管也是如此，合理使用：图片、经常使用js组件、css重置样式等，即不常改动的文件便可走CDN，包括项目内的一些介绍页；
• img标签要设置高宽,一样这么作它也能减小页面重绘/重排，使用 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，所以须要解决浏览器适配问题；<br/>
• 对于已上线的项目，采用WebP须要替换大量图片，工做量太大(不肯定后台程序是否能搞定)。

五、域名拆分：

• 什么叫拆分域名？不少公司初始项目搭建，都只申请了一个域名，站点的全部内容(html/php/jsp、js、css、img等都放在一个域名下)，域名拆分主要为了增长浏览器资源请求的并行度即并发问题，让浏览器能同时发起更多的请求，也解决了请求默认携带的cookie问题，减小了数据传输字节；

• 如何拆分？以如今先后端分离式开发为例，建议分为三大类：

  • 前端类 - 项目业务自己的htm、css、js、图标/片等；
  • 静态类 - 即上述提到的CDN资源类；
  • 动态类 - 可归为后端API接口类；

如下为各浏览器请求并发数，数据来源于 chorme搜索，珍爱生命，远离某……🙏：

浏览器	HTTP/1.1	HTTP/1.0
Chrome	6	6
火狐	6	6
Safari	4	4
IE11	6	6
IE9	10	10
……	……	……

六、 减小http请求次数

• 是的，你没有看错，就是减小http请求次数，节省网络请求时间，但你可能又会问，前面不是让拆分域名吗？？一个是部署拆分，一个是请求减小，没毛病哦；

• 首先咱们来了解一下http的请求过程（简单通俗的阐述一下）：

  • DNS 域名解析 - 1. 拿出电话，找到某个接头人的号码；
  • 发起 TCP 的 3 次握手 - 2. 接通后暗号：A)、你好，你好，我是长江一号，请问能听到吗？B),你好，我是长江二号，能听到你讲话，你能听到我说什么吗？A)、能听到，咱们开始讲正事吧……;
  • 正常数据传输中…… - 3. 聊的很嗨；
  • 结束传输断链的 4 次挥手 - 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分钟更新一次。

七、 数据设置缓存，好累写不动了，http缓存的设置，以前的面试汇总👉如何设置http缓存？吧；
八、 站点服务端开启Gzip压缩，固然还能够了解一下Brotli 或 Zopfli ，听说 Brotli 比 Gzip 和 Deflate更有效，有兴趣的同窗能够了解一下；
八、 避免重定向，尽可能减小 iframe 使用，它会阻塞主页面的渲染;
九、 避免使用CSS Expression（css表达式)又称Dynamic properties(动态属性);

十、 合理使用dns-prefetch、prefetch、 preload、 defer、async：

• dns-prefetch：使用dns-prefetch对项目中用到的域名进行 DNS 预解析，减小 DNS 查询，如： <link rel="dns-prefetch" href="//honeybadger8.github.io"/>；BAT各大巨头都是这么干的，请看下图，dns的详细解析过程今天先不讲了，码字码不动了，写分享比加班作项目还累，望体谅～；
• prefetch： 它是一个优先级很是低的资源加载标识，浏览器会在空闲时(即主进程资源加载完成后)下载带有 prefetch标识的资源并缓存到disk，在后续模块使用到这个文件的时候，会直接从缓存读取；该功能webpack有个插件，配置后编译能自动插入到页面上;
• preload：没错，它就是一个能够预加载资源的属性，详细说明请看官方API,通常状况下咱们可能会对接下来的业务须要的audio、img、font、script等资源进行预先加载（甚至是下一个路由页面哦），这样能达到0秒打开页面的效果！

• 暂时就想到这么多了，欢迎补充……

总结：

• 推荐几个工具：WebPagetest、Lighthouse、SpeedCurve、New Relic 等主动/被动监测工具，都能高效帮助咱们分析发现问题的所在，从而对症下药;
• DNS预解析的是非重要的，它是一个url到解析IP，到查询根服务器的一个过程，可能会在下一次单独总结出来分享，有兴趣的同窗也能够自行先了解一下，
• 要把一个项目作好，每个细节都很重要，但愿今天的分享能给你们的工做带来些许帮助，谢谢！

文章分享计划：

　　最近一直在思考，如何有规化的分享工做中的积累，国庆这些天也一直看了不少大神写的博客，最后综合自身的能力及时间，决定先尝试写一个# 动画 #系列文章，动画可能主要包含（CSS/Canvas）两部分，欢迎你们持续关注！
　　以上就是今天的分享，新手上路中，我会努力让本身变得更优秀、写出更好的文章，文章中有不对之处，烦请各位大神斧正。若是你以为这篇文章对你有所帮助、以为不错，记得关注咱们的公众号哦！！

更多文章：

作完小程序项目、老板给我加了6k薪资～
面试踩过的坑，都在这里了～
如何给localStorage设置一个过时时间？
手把手教你如何绘制一辆会跑车
如何用CSS3画出懂你的3D魔方？
SVG Sprites Icon的使用技巧
immutability因React官方出镜之使用总结分享！

做者：苏南 - 首席填坑官
交流群：912594095，公众号： honeyBadger8
本文原创，著做权归做者全部。商业转载请联系 @IT·平头哥联盟得到受权，非商业转载请注明原连接及出处。