前端性能优化

一、  html 

1、html语义化

HTML语义化的原因：

l  即使在没有CSS样式的条件下，也能很好地呈现出内容结构、代码结构；

l  语义化HTML会使HTML结构变的清晰，有利于维护代码和添加样式；

l  方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页；

l  提升搜索引擎优化(SEO)的效果。和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；

l  便于团队开发和维护，语义化更具可读性，是下一步吧网页的重要动向，遵循W3C标准的团队都遵循这个标准，可以减少差异化。

l  通常语义化HTML会使代码变的更少，使页面加载更快。

在写HTML代码时应该注意

l  尽可能少的使用无语义的标签div和span；

l  在语义不明显时，既可以使用div或者p时，尽量用p, 因为p在默认情况下有上下间距，对兼容特殊终端有利；

l  不要使用纯样式标签，如：b、font、u等，改用css设置。

l  需要强调的文本，可以包含在strong或者em标签中（浏览器预设样式，能用CSS指定就不用他们），strong默认样式是加粗（不要用b），em是斜体（不用i）；

l  使用表格时，标题要用caption，表头用thead，主体部分用tbody包围，尾部用tfoot包围。表头和一般单元格要区分开，表头用th，单元格用td；

l  表单域要用fieldset标签包起来，并用legend标签说明表单的用途；

l  每个input标签对应的说明文本都需要使用label标签，并且通过为input设置id属性，在lable标签中设置for=someld来让说明文本和相对应的input关联起来。

2、减少重绘和回流

现代浏览器大多都是通过队列机制来批量更新布局，浏览器会把修改操作放在队列中，至少一个浏览器刷新（即16.6ms）才会清空队列，但当你获取布局信息的时候，队列中可能有会影响这些属性或方法返回值的操作，即使没有，浏览器也会强制清空队列，触发回流与重绘来确保返回正确的值。

主要包括以下属性或方法：

l  offsetTop、offsetLeft、offsetWidth、offsetHeight

l  scrollTop、scrollLeft、scrollWidth、scrollHeight

l  clientTop、clientLeft、clientWidth、clientHeight

l  width、height

l  getComputedStyle()

l  getBoundingClientRect()

所以，我们应该避免频繁的使用上述的属性，他们都会强制渲染刷新队列。

减少重绘与回流：

l  避免频繁操作样式，最好一次性重写style属性，或者将样式列表定义为class并一次性更改class属性。

l  避免频繁操作DOM，创建一个documentFragment，在它上面应用所有DOM操作，最后再把它添加到文档中。

l  避免频繁读取会引发回流/重绘的属性，如果确实需要多次使用，就用一个变量缓存起来。

l  对具有复杂动画的元素使用绝对定位，使它脱离文档流，否则会引起父元素及后续元素频繁回流。

l  使用throttle-debounce：throttle 的含义是节流，debounce 的含义是防抖动

3、使用骨架展示。

二、  css

1、  减少重绘和回流

l  使用 transform 替代 top。

l  使用 visibility 替换 display: none ，因为前者只会引起重绘，后者会引发回流（改变了布局）。

l  避免使用table布局，可能很小的一个小改动会造成整个 table 的重新布局。

l  尽可能在DOM树的最末端改变class，回流是不可避免的，但可以减少其影响。尽可能在DOM树的最末端改变class，可以限制了回流的范围，使其影响尽可能少的节点。

l  避免设置多层内联样式，CSS 选择符从右往左匹配查找，避免节点层级过多。

<div>

 <a> <span></span> </a>

</div>

<style>

  span {

   color: red;

  }

  div > a > span {

    color: red;

  }

</style>

对于第一种设置样式的方式来说，浏览器只需要找到页面中所有的 span 标签然后设置颜色，但是对于第二种设置样式的方式来说，浏览器首先需要找到所有的 span 标签，然后找到 span 标签上的 a 标签，最后再去找到 div 标签，然后给符合这种条件的 span 标签设置颜色，这样的递归过程就很复杂。所以我们应该尽可能的避免写过于具体的 CSS 选择器，然后对于 HTML 来说也尽量少的添加无意义标签，保证层级扁平。

l  将动画效果应用到position属性为absolute或fixed的元素上，避免影响其他元素的布局，这样只是一个重绘，而不是回流，同时，控制动画速度可以选择 requestAnimationFrame，详见探讨 requestAnimationFrame。

l  避免使用CSS表达式，可能会引发回流。

l  将频繁重绘或者回流的节点设置为图层，图层能够阻止该节点的渲染行为影响别的节点，例如will-change、video、iframe等标签，浏览器会自动将该节点变为图层。

l  CSS3 硬件加速（GPU加速），使用css3硬件加速，可以让transform、opacity、filters这些动画不会引起回流重绘 。但是对于动画的其它属性，比如background-color这些，还是会引起回流重绘的，不过它还是可以提升这些动画的性能。

2、  使用伪元素代替div，减少页面结构。

3、  能用css做的效果，不要用js做，能用原生js做的，不要轻易去使用第三方插件。避免引入第三方大量的库。而自己却只是用里面的一个小功能。

4、  少使用css的import

l  @import url（）机制是不同于link的，link是在加载页面前把css加载完毕，而@import url（）则是读取完文件后在加载，所以会出现一开始没有css样式，闪烁一下出现样式后的页面(网速慢的情况下)。

l  当使用javascript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的。

l  link除了能加载css外还能定义RSS，定义rel连接属性，@import只能加载css

l  另外，@import url(xxx.css); 有最大次数的限制，经测试IE6的最大次数是31次，第32个import及以后的都不能生效。

三、  js

1、  减少全局变量的访问

在有大量访问全局变量的时候，可以将全局变量赋值给局部变量访问，因为查询全局变量比局部变量的性能消耗要大。

2、  减少对cookie的使用（最主要的就是减少本地cookie存储内容的大小），因为客户端操作cookie的时候，这些信息总是在客户端和服务端传递。如果上设置不当，每次发送。多使用sessionStorage等前端存储机制。

3、  避免使用iframe

不仅不好管控样式，而且相当于在本页面又嵌套其他页面，消耗性能会更大。因为还回去加载这个嵌套页面的资源。

4、  像一些固定化的数据。从接口获取后可以存储在js中，下次直接取值，不要掉接口。

5、  尾递归

如果一个函数中所有递归形式的调用都出现在函数的末尾，我们称这个递归函数是尾递归的。当递归调用是整个函数体中最后执行的语句且它的返回值不属于表达式的一部分时，这个递归调用就是尾递归。尾递归函数的特点是在回归过程中不用做任何操作，这个特性很重要，因为大多数现代的编译器会利用这种特点自动生成优化的代码。

四、  vue

1、使用v-once指令。渲染一次，提高dom的渲染效率

当我们需要渲染一次的时候

2、v-if 和 v-show

v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。

相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。

一般来说，v-if 有更高的切换开销，而v-show有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

3、避免 v-if 和 v-for 用在一起

首先v-for 比 v-if 具有更高的优先级,因此当 条件判断和列表渲染绑定在一块时，会导致列表渲染依赖条件渲染，因此哪怕我们只渲染出一小部分用户的元素，也得在每次重渲染的时候遍历整个列表，不论活跃用户是否发生了变化。建议把if放在for外面或者使用computed过滤数据

5、  把大组件分割成多个小组件

因为数据的变化会把整个vue组件重新更新。

6、  对于不会变动的数据展示，可以改为不可响应的数据即configurable为false或者冻结该对象。

7、  看情况使用keep-alive组件，缓存组件。

8、  多写key，这样在渲染时有优化，对于key不变的节点不做更新。

五、  图片

1、尽量所使用的字体图标或者SVG图标来代替传统png图
　　 因为字体图标或者SVG是矢量图，代码编写出来的，方大不会变形，而且渲染速度快。

2、使用base64编码代替图片

将图片转换为base64编码字符串inline到页面或css中，这样就可以减少http的请求次数，并可以放到后台数据库中，只传输字符串，有较多的构建工具可以直接实现。

9、  合并图片sprite（雪碧图）

将多个页面上用到的背景图片合并成一个大的图片在页面中引用，这样可以有效的较少请求个数，而且，而不影响开发体验，使用构建插件可以做到对开发者透明。这种方法适用于页面图片多且丰富的场景。

5、图片压缩

选择了正确的图片格式，按照正确的大小生成了图片后，要进一步提升优化效果，可以通过有损或无损压缩来减少图片的大小。

我们的目的是降低图片的大小kb，有很多工具可以做。例如在智图中压缩图片，选择更小kb的图片格式，以达到最优的显示效果。

6、采用图片的懒加载（延迟加载）

　　 目的为了，减少页面第一次加载过程中http的请求次数。

六、  webpack

1、  重要的一点，webpack版本的提升，webapck4对于3来说，速度提升60%-98%。

2、  尽量不要使用CommonsChunkPlugin打包第三方npm包。

这样做可以是为了在入口js又把第三方npm包重复打包，加大入口文件的体积，减缓打包速度。每次打包都会修改文件的修改时间。在http缓存机制中的etag。etag值的计算涉及到文件的修改时间。

3、  配合compression-webpack-plugin插件在nginx开启gzip_static。

4、  使用DllPlugin和DllReferencePlugin打包第三方js。

七、  node中间层

l  接口性能优化,拆分大接口为独立小接口，并发请求,串行 => 并行，大幅缩短请求时间（在NodeJS端使用Bigpiper技术，合并请求，降低负担，分批输出，不影响体验。）

l  部属优化,一台NodeJS对多台JAVA服务器,合理的分配服务器带来最大的产出

l  页面渲染优化(前后端共享模版,首屏服务器渲染,次屏浏览器渲染,局部刷新浏览器渲染)

八、  http

1、  使用http缓存机制。

2、  升级为HTTP2。多路复用、同一个连接上处理并行请求等优点。