前端提升性能的几种方式

前端提升性能的几种方式

  • 开发阶段
    • 遵循各种开发语言的代码规范。
    • 如果使用了组件库,尽量按需导入。
    • 如果图片较多,使用懒加载。
  • 生成打包阶段
    • 使用压缩/混淆/打包工具
    • 使用http压缩(gzip压缩)
  • chrome 性能测试

开发阶段

遵循各种开发语言的代码规范。

如果使用了组件库,尽量按需导入。

如果图片较多,使用懒加载。

注意:懒加载用于提高页面加载速度,预加载用于提高用户体验

生成打包阶段

使用压缩/混淆/打包工具

打包工具到底是个什么东西?究竟干什么用?为什么要这么麻烦配置这些东西?有一篇超牛的文章:
链接: Grunt 安装与配置环境.

  1. webpack
  2. gulp
  3. grunt
    链接: Grunt完整打包一个项目实例.

使用http压缩(gzip压缩)

链接: Tomcat启用GZIP压缩,提升web性能.

chrome 性能测试

链接: 页面卡顿性能优化的两个解决方案.
链接: VUE(nuxt)项目性能监测统计.
链接: 使用translateZ(0)提升性能的原理是什么?.

你可能感兴趣的:(性能提升)