前端优化

一、页面/文件级优化

1、减少HTTP请求数 解决方法：

1）设置缓存

2）css、js、img等静态资源合并压缩（vue的项目有压缩css和js）

3）懒加载图片（不是真正意义的减少请求数，但可以使首屏加载更快，间接达到目的）

2、css文件置顶、js文件置底

3、常用静态文件使用CDN引用（减少带宽占用；目前是后台在做）

4、图片压缩（目前是UI在做）

5、确保服务器提供ETag认证令牌，当服务器上的资源没有改变的时候，就不必传送重复数据。它用来判断浏览器缓存里的元素是否和原来服务器上的一致；使用ETags减少Web应用带宽和负载。（目前是没做的）

6、避免空的src和href：当link标签的href属性为空、script标签的src属性为空的时候，浏览器渲染的时候会把当前页面的URL作为它们的属性值，从而把页面的内容加载进来作为它们的值。所以要避免犯这样的疏忽。（很久以前偶尔会出现这种情况）

7、将CSS和JS放到外部文件中：目的是缓存文件。 但有时候为了减少请求，也会直接写到页面里，需根据PV（访问次数）和IP的比例权衡。

8、避免跳转：有种现象会比较坑爹，看起来没什么差别，其实多次了一次页面跳转。比如当URL本该有斜杠（/）却被忽略掉时。例如，当我们要访问 http://baidu.com 时，实际上返回的是一个包含301代码的跳转，它指向的是 http://baidu.com/（注意末尾的斜杠）。在nginx服务器可以使用rewrite；Apache服务器中可以使用Alias 或者 mod_rewrite或者the DirectorySlash来避免。另一种是不用域名之间的跳转， 比如访问 http://baidu.com/bbs 跳转到http://bbs.baidu.com/。那么可以通过使用Alias或者mod_rewirte建立CNAME（保存一个域名和另外一个域名之间关系的DNS记录）来替代。

二、代码级优

1、尽量少访问、操作DOM：document.images、document.forms 、getElementsByTagName()返回的都是 HTMLCollection类型的集合，访问该集合时都会损耗较大性能。 解决方法： 当你需要遍历 HTML Collection的时候，尽量将它转为数组后再访问，以提高性能。即使不转换为数组，也请尽可能少的访问它，例如在遍历的时候可以将 length属性、成员保存到局部变量后再使用局部变量。

2、尽量少用with、eval、Function（我们现在基本不用。with加长了作用域链，eval和Function都是需要二次编译代码，损耗的性能更大）

3、减少Reflow和Repaint（二者都比较耗费性能）

解决方法：

1）使用改变类名的方式改变样式，可以一次性将多个样式改变，从而减少重绘和回流的产生次数，同时也增加了页面的可维护性。

2）使用display:none隐藏元素

3）尽量不要计算元素

4）能用重绘解决的就不要用回流解决

4、减少作用域查找

解决方法：

1）如for循环里面的：（var i = 0; i < data.length; i++)，改写为(var i = 0, len = data.length; i < len; i++)

2）多次用到document这个全局变量的，可定义 var doc = document，这样就无需每次都访问全局变量

3）假如访问本地变量复杂度为0，访问 外面一层作用域变量/变量内部属性 复杂度+1，那么：假如data.length = 10，i < data.length的复杂度为10，而如果var len = data.length，其余每次i < len的复杂度就为0，加上var len = data.length这句代码也就为1而已。提升性能显而易见。

5、字符串拼接：在 Javascript中使用"+" 号来拼接字符串效率是比较低的，因为每次运行都会开辟新的内存并生成新的字符串变量，然后将拼接结果赋值给新变量。 解决方法： 与之相比更为高效的做法是使用数组的 join方法，即将需要拼接的字符串放在数组中最后调用其 join方法得到结果。不过由于使用数组也有一定的开销，因此当需要拼接的字符串较多的时候可以考虑用此方法。

6、避免使用CSS表达式：举个css表达式的例子 font-color: expression( (new Date()).getHours()%3 ? “#FFFFFF" : “#AAAAAA" );这个表达式会持续的在页面上计算样式，影响页面的性能。并且css表达式只被IE支持。（未使用过）

7、减少DOM元素数量：减少DOM数量，就会减少浏览器的解析负担

8、需绑定到DOM上面的事件多的时候使用事件代理

9、使用<link>替代@import（@import 进来的样式在页面内容载入完毕后再加载, 如果网速慢, 页面可能闪烁, 故不推荐使用；但@import在模块化管理css方面还是可取的）

10、写样式避免使用复杂的选择器，层级越少越好；层级越多浏览器在遍历渲染所花时间越长（简洁的选择器不仅可以减少css文件大小，提高页面的加载性能，浏览器解析时也会更加高效，也便于阅读，会提高开发人员的开发效率，降低了维护成本。）

11、精简页面的样式文件，去掉不用的样式，不同页面的样式分开文件存放（样式文件偏大，影响加载速度，浏览器会进行多余的样式匹配，影响渲染时间，也便于管理，降低维护成本）12、利用css继承减少代码：有一部分CSS代码是可以继承的，如果父代元素已经设置了该样式，后代元素就不需要去设置该样式，例如文字的样式：font-size、color等

三、业务功能优化

1、返回状态保持功能

2、针对移动端各种屏幕尺寸的适配方案

3、webpack优化

4、将请求接口代码和加载动画及错误弹出提示封装成公共函数

5、统一前端常用组件规范。 组件如：复选框、单选框、按钮、P端表格样式、文字样式等。 UI规范：规定什么时候使用什么形状、颜色等，并且每次更换都是与其他组件配套地更换；什么时候用什么大小、颜色的字体。 前端规范：不同样式的组件图片使用一个大文件夹统一存放，里面分各种子类，每次更换只需更改文件夹名称即可实现更改一整套组件的样式的效果；使用vue.js框架的，这些组件都统一写成可复用组件（无需每次重复编写代码，也便于统一更改、管理）

四、其他1、每月一次技术分享？