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渲染