Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

谈谈前端性能优化 #141

Open
reng99 opened this issue May 21, 2022 · 0 comments
Open

谈谈前端性能优化 #141

reng99 opened this issue May 21, 2022 · 0 comments
Labels
blog a single blog

Comments

@reng99
Copy link
Owner

reng99 commented May 21, 2022

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第25天，点击查看活动详情

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

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

框架生命周期熟悉使用

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

  1. 编程中，触发更改内容应该在 ngOnChanges 中调用，而不是在 ngDoCheck 中调用
  2. 订阅操作，应该在组件销毁的时候 ngOnDestroy 取消订阅

接口处理

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

  1. 避免同个接口多次发起请求
  2. 避免不必要的接口请求
  3. 需要缓存的数据，进行缓存，不需要发起二次请求
  4. 列表接口采用分页处理，避免一次性加载数据，从而造成系统卡顿
  5. 接口开启 Gzip 压缩
  6. 接口可按需配置 Etag 作为缓存标志
  7. 浏览器并非请求数量协调：同一时间针对同一域名下的请求又一定数量限制。超过数量限制数目的请求会被阻塞。合理使用不同的域名获取请求
  8. 减少请求数，比如使用雪碧图，合并 CSS / JavaScript 文件

静态资源处理

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

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

DOM 处理

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

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

工具处理

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

不知道读者平常会怎么进行页面的性能分析和解决呢？可以留言交流交流～

【完】✅
@reng99 reng99 added the blog a single blog label Jun 20, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
blog a single blog
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@reng99