性能相关优化汇总

1、已有页面的性能分析

1）首先是分析network，查看静态文件的加载时间，和接口响应时间

• • 如果是加载的js文件太大，那么就可以考虑是否可以用路由懒加载，在打包的时候分开成多个js，减小加载时间
  • 如果是图片或者图标的话，可以尽量考虑使用字体图标，如果没有字体图标的话可以考虑雪碧图，或者将图片进行压缩
  • 然后看下js，css等静态文件是否有进行压缩，如果没有就要用webpack的插件对打包的文件进行压缩处理
  • 如果是接口响应比较慢的话，需要和接口开发人员沟通，看是否可以减少响应时间

2）然后分析Performance

• • 性能面板主要先看性能摘要看哪部分耗时长
  • 然后分析网络，主线程，长耗时任务，然后是看js内存
  • 网络上面已经说了，那么下面就是主线程的任务分析了，html解析，js编译，看函数执行，样式计算，布局，绘制等时间，如果说有页面多个js那么在主线程中就会有又多个这样的任务（js编译，函数执行，样式计算，布局，绘制）， 先看函数执行是否有长任务耗时，如果有则需要具体分析，函数内是不是有做大数据的计算，或者是直接操作dom的代码，或者是一些逻辑不对的迭代等 然后看样式计算的话，是否有多次重写的样式，使用行内样式，或者!important等不规范的写法。 布局时间主要看是否有多层布局，合理嵌套等
  • js内存，这个主要看是否存在内存泄露的可能，或者是存了大量的计算数据，如果是内存泄露则分析是否有console.log,游离的dom引用变量，闭包里的变量，定时器。

 

 

2、写代码时要注意的一些东西

• 加载js会阻塞DOM渲染， js引用放在文档底部或者使用异步加载，sync（异步）哪个先现在完先执行哪个，defer（同步）按顺序执行
• 避免过多的操作DOM，使用documentFragment批量操作，需要绑定事件比较多的时候使用事件委托，合理使用requestAnimationFrame代替定时器，能用css做动画就不用js做动画，事件监听不用了要及时销毁,优化高频事件（使用节流，防抖等）
• css选择器不要超过三层，避免使用行内样式，!important，id选择器，标签选择器，通配选择器，不滥用float，正确使用display等

3、新搭建的项目怎么做性能优化

• 优化网络：缓存资源，避免重定向，减少http请求，减少携带cookie，异步加载第三方资源
• 压缩文件：压缩代码，压缩图片，合并图标成雪碧图，使用cdn加载静态资源
• 首屏加载：预解析（预先解析DNS获取域名对应的IP，<link rel="dns-prefetch" href="https://baidu.com/"> ）、预加载（延后加载无需立即使用的资源，确保使用时已加载，<link as=script href=/js/app.69189fdd.js rel=preload>）、预渲染（延后渲染无需立即打开的页面，确保使用时已渲染，prerender-spa-plugin）、懒加载（延后加载无需立即渲染的资源，等到进入区域的时候才加载）、懒执行（延后执行无需立即处理的逻辑，等到使用的时候才执行）、服务端渲染SSR
• 使用浏览器缓存：强缓存（Expires,Cache-control）,协商缓存（Last-modified If-Modified-Since,Etag If-None-Match）

 

4、你做过哪些性能优化?

• 防抖（按钮多次点击避免多次请求等）
• 节流（滚动兼容，鼠标移动监听，窗口缩放监听）
• 路由懒加载
• 内容懒加载
• 大数据虚拟滚动
• 页面卡顿优化