2、js/html/css/图片都做压缩合并，图片预加载、

3、减少DOM元素数量，减少DOM的操作：

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

4、静态资源 CDN 分发：

jspimg超时这份优化清单你做了哪些 React

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 ，因此须要办理浏览器适配问题；对付已上线的项目，采取 WebP 须要更换大量图片，事情量太大(不愿定后台程序是否能搞定)。

5、域名拆分：

什么叫拆分域名？很多公司初始项目搭建，都只申请了一个域名，站点的所有内容(html/php/jsp、js、css、img等都放在一个域名下)，域名拆分紧张为了增加浏览器资源要求的并行度即并发问题，让浏览器能同时发起更多的要求，也办理了要求默认携带的cookie问题，减少了数据传输字节；如何拆分？以现在前后端分离式开拓为例，

建议分为三大类：

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

以下为各浏览器要求并发数，数据来源于chorme搜索，保重生命，阔别某……：

浏览器要求并发数

6、 减少http要求次数

减少http要求次数

本文由@IT·平头哥同盟-首席填坑官∙苏南 分享 - 三次握手

本文由@IT·平头哥同盟-首席填坑官∙苏南 分享 - 四次挥手

结论：从上面的这个过程可以看出，每一次要求都这么繁芜，减少http的要求次数是不是很有必要呢？？答案是肯定的，我们会以以下几个维度来进行优化：

合并 JS、CSS 文件；图片/图标 sprites 合并，或利用 iconfont 字体图标，或者 SVG Sprites ；什么是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 查询，如： ；BAT各大巨子都是这么干的，请看下图，dns的详细解析过程本日先不讲了，码字码不动了，写分享比加班做项目还累，望体谅～；prefetch ： 它是一个优先级非常低的资源加载标识，浏览器会在空闲时(即主进程资源加载完成后)下载带有 prefetch 标识的资源并缓存到disk，在后续模块利用到这个文件的时候，会直接从缓存读取；该功能webpack有个插件，配置后编译能自动插入到页面上;preload ：没错，它便是一个可以预加载资源的属性，详细解释请看官方API,一样平常情形下我们可能会对接下来的业务须要的audio、img、font、script等资源进行预先加载（乃至是下一个路由页面哦），这样能达到0秒打开页面的效果！

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

本文由@IT·平头哥同盟-首席填坑官∙苏南 分享 - 阿里巴巴的天猫首页

本文由@IT·平头哥同盟-首席填坑官∙苏南 分享 - 京东首页

总结：推举几个工具：WebPagetest、Lighthouse、SpeedCurve、New Relic 等主动/被动监测工具，都能高效帮助我们剖析创造问题的所在，从而对症下药;DNS预解析的是非主要的，它是一个url到解析IP，到查询根做事器的一个过程，可能会不才一次单独总结出来分享，有兴趣的同学也可以自行先理解一下，要把一个项目做好，每一个细节都很主要，希望本日的分享能给大家的事情带来些许帮助，感激！
文章分享操持：

最近一贯在思考，如何有规化的分享事情中的积累，国庆这些天也一贯看了很多大神写的博客，末了综合自身的能力及时间，决定先考试测验写一个 # 动画 # 系列文章，动画可能紧张包含（ CSS/Canvas ）两部分，欢迎大家持续关注！

以上便是本日的分享，新手上路中，我会努力让自己变得更精良、写出更好的文章，文章中有不对之处，烦请各位大神斧正。
如果你以为这篇文章对你有所帮助，请记得点赞哦～

对前真个技能感兴趣/或想入门前真个同学可关注我的头条号，并在后台私信发送关键字：“前端”即可获取免费学习资料，跟我们一起发展，欢迎来撩哦～。

作者：苏南 - 首席填坑官

来源：@IT·平头哥同盟

本文原创，著作权归作者所有。
商业转载请联系作者得到授权，非商业转载请注明出处。