共计 2524 个字符，预计需要花费 7 分钟才能阅读完成。
1、浏览器申请并发限度：每个浏览器对同一域名下的资源的申请有并发限度，例如 chrome 就是最多为 6 条：
(1)搭建 node 服务器，承受图片申请服务：
(2)前端去 node 服务器那边同时申请 8 张图片：
(3)在 chrome 控制台 network 中查看，发现同一时间线下只能最多解决 6 个申请
优化：采纳多域名拜访的形式，因为浏览器对同一域名的并发申请有限度，那么能够将图片等动态资源放在另外不同域名的服务器中，那么这些申请就能够并发了。
2、HTML 层级优化：
(1)缩小 HTML 的层级嵌套：层级嵌套越多，浏览器遍历 DOM 所需的工夫就越长，在 Vue 这种框架的组件中，组件也不应该嵌套过多，一个是遍历工夫会变长，还有一个是父子组件间的通信代价变大。
(2)缩小空标签、无用标签的滥用：能够用 after,before 等伪元素代替
(3) 防止在 HTML 标签中援用 style 属性, 浏览器解析 HTML 文件会减少压力。
(4)应用模板引擎，像是 Vue 等框架都自带模板语法。模板语法做的事件：给它一个模板和数据源，返回一个字符串，而后再把这个字符串写入页面（只触发一个回流，如果通过传统办法动静写入 HTML, 会触发屡次回流）
(5)应用 <link 标签 >（<link> 是异步加载，@import 是同步加载）：
①<link ref=”prefetch”href=”common.css”as=”style”> prefetch 能够利用浏览器闲暇的时候，就预加载未来页面可能用到的资源，而后缓存起来。能够进步后续页面的首屏速度。
②<link ref=”preload”href=”common.css”as=”style”>preload 能够利用浏览器闲暇的工夫，就预加载以后页面须要的资源，能够晋升以后页面的加载速度。
(6)<img> 标签：给 <img> 标签设置宽高 100%，并给它外套一个 <div> 并设置固定宽高。能够防止图片替换时候的回流。给 img 增加 alt 属性，能够优化 SEO, 更容易被搜索引擎搜寻。
(7)src 属性：像是 <img>、<script>、<iframe> 等标签都有 src 属性，不要给 src 属性绑定空！为空时，有些浏览器会把以后页面当做属性值加载，很消耗性能。能够用这种语法：应用伪协定，示意什么都不做。
3、CSS 层级优化：（对性能影响权重不高，应该更重视维护性和可读性）
(1)缩小反复的 CSS 代码，能够让浏览器遍历的 CSS 代码量少一点。
(2)少用高优先级选择器例如 id（id 与 JavaScript 行为层无关，最好将款式层和行为层离开），别用!important，最好用 class。（256 个 class 才能够对消一个 id）
(3)防止写出层级过高的 CSS 选择器。（会减少浏览器为挂载款式选择器而遍历 DOM 的压力）
(4)不应用 {margin: 0; padding: 0}（大部分元素默认就是 0, 会做很多多余的叠加。不应用 , 而是把须要重置的元素间接列出来）
(5) 缩小重绘或回流操作。
(6)利用雪碧图：将多张图片合成到一张下来，缩小 HTTP 申请，获取的时候利用 CSS 的 background-position 来获取合成图中某个指定的图。
(7)应用 transform: 利用了 GPU 减速。图层在 GPU 中的 transform 动画是不会触发 repaint 的。
4、JS 层级优化：
(1)应用事件委托。
(2)事件冒泡比事件捕捉更快一点。（因为父元素只有一个，子元素却有很多个，找父元素比子元素更快）
(3)应用框架的周期函数来执行 JS 代码。如果间接执行 JS 代码，可能这时须要的 DOM 结点还没渲染下来。应用原生的 window.onload 会等页面全副渲染完才会执行外面的 JS 代码。实际上心愿 JS 代码须要的 DOM 加载完就马上执行。Jquery 的 ready,Vue 的 mounted 都是等 DOM 加载完就执行外面的 JS 代码。
(4)变量缓存：（应用 var 申明的全局变量实际上就是给 window 对象绑定的属性，全局变量多了就会减轻 window 的压力以及升高其余全局属性的查找速度，如果肯定要这么多全局变量，能够申明一个全局的对象，将这些变量寄存在全局对象中，这样 window 对象实际上就减少了一个属性）
①每次间接读取一遍 this
②将 this 的值缓存起来，后缀间接从变量中拿，缩小了读取 this 这个过程
5、资源加载优化：
(1)应用 link 标签的 dns-prefetch 能够利用浏览器闲暇的工夫，对接下来可能拜访的网址的域名解析成 IP 例如：<link rel=”dns-prefetch”href=”https://www.baidu.com> 能够让用户在接下来页面跳转的过程中，跳过 DNS 解析的步骤
(2) 应用 CDN（内容散发网络）服务器会将资源发送到各个 CDN 节点上，后续外表上是拜访服务器获取资源实际上是从间隔比拟近的 CDN 节点这边获取的资源
(3) 应用 HTTP 缓存，通过缓存加载文件比从服务器加载文件速度要快很多
(4) 懒加载（多用于图片展现）
(5)分页加载（多用于表格数据）
(6)ajax 异步加载
(7) 资源压缩（应用 Webpack 或 Koala 对 JS，CSS 等资源压缩，能够缩小文件大小）
(8)应用 Base64 编码上传图片代替传统的 256 的编码格局（图片从字符串转换为像素的解析速度变快）
6、其余层级的优化
(1) 精简 cookie，因为每次申请都要带上 cookie，所以 cookie 越小越好，只须要存一些用户的根本信息就能够了。
(2)管制前端申请数不要太大（资源打包，前端 indexDB）
(3)增加中间层，如果用户量很大，一台服务器服务承当，须要多台集群部署工作，能够增加 Nginx、Node.js 这种中间层代理服务器（具备负载平衡的性能），来转发给集群服务器，让集群中的每台服务器接管到的申请数差不多。
(4)利用 GPU 减速，CSS3 的 translate,rotate,scale,opacity,filter 都是创立了一个复合层来渲染，而后利用 GPU 来做减速。若某个元素应用了复合层渲染，那么在它之上的所有元素都会创立复合层渲染，所有有时候要用 z -index 给该元素设置高层级。
性能耗费：JS 操作 DOM > 复合层渲染 > 一般 DOM 渲染
