2019前端性能优化方案目录
🔥前言
前端性能优化是个老生常谈的话题,基本入职两三年的程序员面试都会遇到这个问题。各个项目虽有不同,但思路相差不多。本文是对之前项目的前端性能优化做一个梳理,同时也希望能对社区的朋友有所帮助。
项目现状
目前做的项目(一款可视化平台,如果有了解过飞冰和稿定,大概比这两个要复杂一个层级)十分庞大且复杂,前端被分为10几个工程,又分为开发态和运行态,相互通过软链接依赖,总共将近200万行代码,分为两期,一期交接后用户才开始使用,这期间暴露了很多问题,其中就包括性能上的问题。
问题:
打开控制台,将network
中的Online
切换为Fast3G
,点击控制台的Performance
,点击刷新按钮,观测白屏时间,普通页面打开白屏时间需要5s,复杂页面需要14s
- 白屏时间:
地址栏输入网址后回车 - 浏览器出现第一个元素
- 首屏时间:
地址栏输入网址后回车 - 浏览器第一屏渲染完成
分析
- 编译的框架包太大
- 框架初始加载数据过多,逻辑繁琐
- 初始化加载了所有资源
- 服务端返回数据过于庞大且冗余
- 前端没有使用服务缓存
方案
1. 初始化页面加loding图
这其实没有优化加载时间,但是提升了用户体验。
2. 减少http请求和冗余数据
前端在初始化编辑窗口时分别通过了4个接口请求了不同资源。通过和后端协商将4个接口改为一个接口,同时对返回的数据进行删减,只返回前端使用到的数据。
3. 组件,路由懒加载
拆分页面。分担加载压力
4. 配置nginx优化
-
压缩文件
开启gzip
可以在vue-cli2
脚手架中把config/index.js
中的productionGzip
设置为truelocation { gzip on; //开启压缩 gzip_typestext/htmltext/plaintext/css; //指定需要压缩的文件类型,默认为text/html gzip_min_length 512; //需要进行压缩的最小文件大小(单位字节) }
-
优化缓存分配
nginx使用缓存存储请求和返回数据,优化缓存分配可以节约内存空间以及减少cpu的使用。可以将常用的js,CSS和和图片设置在浏览器本地长时间缓存,这样用户第一次打开页面后,会在本地缓存上述内容,提高了以后打开的页面加载速度,节省服务端大量带宽。 -
配置白名单
5. 优化wepack打包机制
使用插件
件webpack-bundle-analyzer
查看项目所有包及体积大小
- 精简打包代码,压缩代码
purifyCS
打包优化去重去无效代码
UglifyJsPlugin
对js文件进行压缩,从而减小js文件的大小,加速load速度。 注意此插件会拖慢webpack的编译速度,建议在开发阶段将其关闭,部署的时候再开启。
Tree Shaking
删除没用到的代码。这样的功能对于构建大型应用时是非常好的 - 依赖按需引入 去除冗余依赖
如:iview ui采用按需引入 - 代码分包
- 去除非必要文件
6.使用CDN
CDN主要功能是在不同的地点缓存内容,通过负载均衡技术,将用户的请求定向到最合适的缓存服务器上去获取内容
7.预渲染
预渲染相对于SSR比较简单,预渲染可以极大的提高网页访问速度。无需服务器实时动态编译,采用预渲染,在构建时针对特定路由简单的生成静态HTML文件
使用prerender-spa-plugin
插件
8.ssr
客户端渲染:
又称为前端渲染,起源于js的兴起,ajax让前端渲染更加成熟,前端专注于ui,后端专注于逻辑,真正意义上实现了前后端的分离,通过约定好的API来交互,后端提供数据,前端根据数据生成DOM插入HTML页面。初次渲染大都是将原html中的数据标记{{}}替换,鼠标右击查看源码,页面代码不可以在源代码中看到,性能消耗在客户端
优点:减少服务器压力,可以实现局部刷新,无需每次都请求完整的页面,体验更好 缺点:前端耗时较多,首屏渲染慢,渲染前要下载一堆js和css文件,不利于SEO,爬虫看不到完整的代码
服务端渲染:
又称为后端渲染,服务器端在返回html之前,在html特定的区域特定的符号里用数据填充,再给客户端,客户端只负责解析HTML。鼠标右击点击查看源码时,页面代码可以在源代码中看到。性能消耗在服务器端,用户达到一定程度的时候,后端会考虑缓存部分数据,避免消耗过多的资源重复渲染。
优点:前端耗时少,首次渲染快,更快的内容到达时间,利于SEO
缺点:网络传输数据量大,占用部分服务器运算资源,用户体验差,不容易维护,前端修改部分html/css后端也要改
9.图片转base64
wepack中的url-loader
对未设置或者小于limi设置的图片进行转换,以base64的格式被img的src所使用;而对于大于limit byte的图片用file-loader
进行解析。
10.后台分布式部署,负载均衡
结语
以上是最常见的前端优化方案,更多细节没有写上,可参考其他文章,每一个点延伸都能做为一篇单独的文章去深入了解,本文仅作为一个参考目录。