谈谈前端性能优化

Jimmy_is_jimmy

发布于 2022-04-25 14:24:02

4870

文章被收录于专栏：call_me_Rcall_me_R

作为一个前端开发者，前端性能优化问题是无可避免的。比如，你使用 vue 去开发一个运营活动的项目，首屏加载缓慢，你应该怎么办呢？又比如，你开发官网，你选择 ssr 还是 spa 呢？

本文，我们来聊聊遇到前端加载缓慢，应该怎么做～

现在前端框架已是三足鼎立 -- Angular，React 和 Vue。我们在使用它们开发的过程中，应该了解相应框架的生命周期，而不是似懂非懂讲究用。我们以 Angular 前端框架为例：

接口方面，可以考虑下面的处理方案：

所有的文件都有可能是静态资源，比如 Json， Image 等。我们可以考虑以下处理：

使用 CDN，避免资源放在项目的服务器上，特别是访问量大的站点，会容易奔溃或者造成资源加载缓慢，用户体验不良
资源压缩 2.1 图片资源可以使用 TinyPNG 2.2 视频/音频可以通过 FFmpeg 处理 2.3 Html，CSS 和 JavaScript 等资源，可以通过 Webpack 处理，现代前端框架都会集成，你只需要运行 npm run build 即可
静态资源是否有其他的替代方案呢？比如用 CSS 实现三角形总比引入一个三角形的图案要强多了

前端开发，就是以 DOM 为基石进行处理的一门艺术。

减少重绘和重排，他们会导致页面重新渲染
DOM 节点元素需要语义化，不能都一股脑的使用 DIV 元素，这样不利于 SEO；起码在对外的系统上要注重语义化的处理
老生常谈的点了：样式需要放在 <head> 标签中，脚本需要放在 </body> 之前引用。样式靠后会使得骨架 HTML 看起来辣眼睛；脚本提前加载会造成页面阻塞。
避免 Img 节点元素的 alt 指向为空，为空不利于 SEO

使用 Lighthouse 灯塔：它可以通过谷歌浏览器去安装使用；也可以通过本地全局安装，通过运行命令行去审查指定的页面。
使用 Perfermance 面板：谷歌浏览器中的 Perfermance 面板可以用于分析站点运行时性能；建议以隐身模式开启，排除其他扩展对性能测量的影响。Safari 浏览器对应时间轴面板，看个人爱好选择调试。其他浏览器对应的性能分析面板自查。
使用 Perfermance 接口：通过 W3C 提供的 Perfermance 接口，监听页面的相关信息。