|
#头条创作挑战赛#
本文同步自己掘金平台的文案： https://juejin.cn/post/7090351370691149855
做为一个前端研发者，前端性能优化问题是无可避免的。例如，你运用 vue 去研发一个运营活动的项目，首屏加载缓慢，你应该怎么办呢？又例如，你研发官网，你选取 ssr 还是 spa 呢？
本文，咱们来聊聊遇到前端加载缓慢，应该怎么做～
框架生命周期熟练运用
此刻前端框架已经是三足鼎立 -- Angular，React 和 Vue。咱们在运用它们研发的过程中，应该认识相应框架的生命周期，而不是似懂非懂讲究用。咱们以 Angular 前端框架为例： 编程中，触发更改内容应该在 ngOnChanges 中调用，而不是在 ngDoCheck 中调用订阅操作，应该在组件销毁的时候 ngOnDestroy 取消订阅接口处理
接口方面，能够思虑下面的处理方法： 避免同个接口多次发起请求避免不必要的接口请求需要缓存的数据，进行缓存，不需要发起二次请求列表接口采用分页处理，避免一次性加载数据，从而导致系统卡顿接口开启 Gzip 压缩接口可按需配置 Etag 做为缓存标志浏览器并非请求数量协调：同一时间针对同一域名下的请求又必定数量限制。超过数量限制数目的请求会被阻塞。恰当运用区别的域名获取请求减少请求数，例如运用雪碧图，合并 CSS / JavaScript 文件静态资源处理
所有的文件都有可能是静态资源，例如 Json， Image 等。咱们能够思虑以下处理： 运用 CDN，避免资源放在项目的服务器上，尤其是拜访量大的站点，会容易奔溃或导致资源加载缓慢，用户体验不良资源压缩 2.1 照片资源能够运用 TinyPNG 2.2 视频/音频 能够经过 FFmpeg 处理 2.3 Html，CSS 和 JavaScript 等资源，能够经过 Webpack 处理，现代前端框架都会集成，你只需要运行 npm run build 就可静态资源是不是有其他的替代方法呢？例如用 CSS 实现三角形总比引入一个三角形的图案要强多了DOM 处理
前端研发，便是以 DOM 为基石进行处理的一门艺术。 减少重绘和重排，她们会引起页面重新渲染DOM 节点元素需要语义化，不可都一股脑的运用 DIV 元素，这般有害于 seo；起码在对外的系统上要注重语义化的处理老生常谈的点了：样式需要放在 <head> 标签中，脚本需要放在 </body> 之前引用。样式靠后会使得骨架 HTML 看起来辣眼睛；脚本提前加载会导致页面阻塞。避免 Img 节点元素的 alt 指向为空，为空有害于 SEO工具处理运用 Lighthouse 灯塔：它能够经过谷歌浏览器去安装运用；亦能够经过本地全局安装，经过运行命令行去审查指定的页面。运用 Perfermance 面板：谷歌浏览器中的 Perfermance 面板能够用于分析站点运行时性能；意见以隐身模式开启，排除其他扩展对性能测绘的影响。Safari 浏览器对应时间轴面板，看个人兴趣选取调试。其他浏览器对应的性能分析面板自查。运用 Perfermance 接口：经过 W3C 供给的 Perfermance 接口，监听页面的关联信息。不晓得读者平常会怎么进行页面的性能分析和处理呢？能够留言交流交流～
【完】✅
| 
发表于 2024-10-10 05:04:00