前端优化个人经验

以下为个人在平常工作中一些见解，不对之处多多给出宝贵意见。

项目：

• 静态资源分离，静态资源路径由前端配置（nodeJS，Nginx代理分发）；
• 资源压缩：冗杂代码量减少（代码质量，代码重构还是必要），图片压缩和雪碧图，代码压缩

代码：

• 数据缓存和http缓存

         对一些和采集不相关的数据只用在页面加载时请求一次，或利用http request的头  Last-Modifed属性；

• 接口合并，接口结构要统一，以便于接口封装；

         能用get的用get，不要全部用post；

         （post，get，patch）

• 定时器不要用setInterval，如果要用setInterval，建立一个请求队列；或者使用串行回调里调用setTimeout。

       ajax事件队列，在浏览器前做队列保护，减少对浏览器和服务器的压力

        https://blog.youkuaiyun.com/generalfyx/article/details/82698965

• avalon：scan（dom对象的资源文件会重新请求），ms-for（性能较差）；
• VueX不能过度使用，会造成内存泄露，
• DOM结构尽量简单，DOM操作尽量用指令，jquery选择器最好用id（选择器优化，从右向左），减少重绘和回流（dom操作可利用文档碎片，样式修改可以读写分开）

         样式表越简单，重排和重绘就越快，尽量不要做css操作。

         重排和重绘的DOM元素层级越高，成本就越高，可以脱离于文档流。

         table元素的重排和重绘成本，要高于div元素

• 多线程（兼容性问题）
• 页面初始化尽量不要有ajax数据进入；for循环嵌套和递归函数的避免过度使用，调用栈优化（arguments对象的避免使用）；
• task----microtasks
• macrotasks: setTimeout, setInterval, setImmediate, I/O, UI rendering
  microtasks: process.nextTick, Promise, MutationObserver