首屏渲染优化性能优化
登录
首屏加载优化
webpack-bundle-analyzer 分析
优化前，加载时间15s，vendor.js 900k app.js 400k 背景图片900k
背景图片png改为jpg从400k变为40k
开启gzip压缩 vue.config.js中设置plugins gzip vendor.js和app.js缩小三分之一（nginx开启gzip gzip_static on;）
config.plugins.push(new CompressionWebpackPlugin({algorithm:'gzip',test:new RegExp('\\.('+productionGzipExtensions.join('|')+')'),threshold:10240,minRatio:0.8
}))
cdn加载资源
在vue项目中，通过npm安装到工程中所有的js,css文件，在编译时都会被打包进vendor.js，浏览器在加载该文件后才开始显示首屏。
index.html加载CDN资源
公共配置项webpack.base.conf.js 设置externals
externals:{'vue':'Vue','vue-router':'VueRouter','axios':'axios'
}
main.js中 注释掉
import Vue from ‘vue’，
// import iView from ‘iview’;
// import ‘…/theme/index.less’;
需要注意的是，通过 CDN 引入，在使用 VueRouter Vuex ElementUI 的时候要改下写法。CDN会把它们挂载到window上，因此不再使用Vue.use(xxx)
使用 CDN 的好处有以下几个方面
（1）加快打包速度。分离公共库以后，每次重新打包就不会再把这些打包进 vendors 文件中。
（2）CDN减轻自己服务器的访问压力，并且能实现资源的并行下载。浏览器对 src 资源的加载是并行的(执行是按照顺序的)。
路由懒加载
{path: 'buyerSummary',name: 'buyerSummary',component: () => import('VIEWS/buyer/buyerSummary/index'),
},
按需加载
elementui echarts lodash 只加载使用的模块
使用体积更小的第三方插件
moment 替换为dayjs
首屏渲染优化性能优化相关推荐
- iOS之从OpenGL深入探究离屏渲染及性能优化
一.探究内容 到底什么是离屏渲染?是在GPU上面还是CPU上面执行的? 为什么要有离屏渲染?什么情况下会产生离屏渲染? 帧缓冲区是什么?当前屏幕缓冲区和屏幕外缓冲区又是什么? 切换缓冲区是什么操作?真 ...
- nuxt解决首屏加载慢问题_滴普大前端 | 滴普是如何实现首屏加载性能优化的？...
决定优化方向 首先打开 Inspect - Network 查看请求情况,从图片可以看出,DOMContentLoaded 时间为 2.67s,Load 时间为 3.45s,资源交换为 2.4MB. ...
- 前端框架/架构，性能优化，负载均衡，首屏渲染
前端数据结构与算法- https://zhuanlan.zhihu.com/p/27659059 > 前端重构方案 前端重构方案了解一下- https://blog.csdn.net/vM199 ...
- js重新渲染div_前端工程师必备：从浏览器的渲染到性能优化
文章来自:华为云开发者社区 摘要:本文主要讲谈及浏览器的渲染原理.流程以及相关的性能问题. 问题前瞻 1. 为什么css需要放在头部? 2. js为什么要放在body后面? 3. 图片的加载和渲染会阻 ...
- 【华为云技术分享】前端工程师必备：从浏览器的渲染到性能优化
摘要:本文主要讲谈及浏览器的渲染原理.流程以及相关的性能问题. 问题前瞻 1. 为什么css需要放在头部?2. js为什么要放在body后面?3. 图片的加载和渲染会阻塞页面DOM构建吗?4. dom ...
- vue渲染大量数据如何优化_加速vue组件渲染之性能优化
背景 平时在用vue开发后台管理系统的时候,应该会用到大量的table这种组件,正常这种组件我们会在项目里做二次封装,然后针对表头title做参数化配置,如下: export default { da ...
- 前端如何做极致的首屏渲染速度优化
这里说的极致是技术上可以达到最优的性能. 这里不讨论常见的优化手段,比如:Script标签放到底部.DNS预解析.HTTP2.0.CDN.资源压缩.懒加载等. 这里讨论的是如何使First Conte ...
- 【优化】1288- 分享我的webpack优化经验，首屏渲染从9s到1s
今天给大家分享一篇性能优化实战.本文基于vue2(虽然vue3已出,但是本文也很实用) 谈到webpack优化大部分人可能都看腻了,无非就那几招嘛,我之前也是看过许多类似的文章,但都没有自己真正上手过 ...
- 硬件加速下webview切换闪屏_网页渲染性能优化 —— 性能优化下
博客 有更多精品文章哟. Composite 的优化 终于,我们到了像素管道的末尾.对于这一部分的优化策略,我们可以从为什么需要 Composited Layer(Graphics Layer)来入手 ...
最新文章
- 过来人的肺腑之言，攻读CV和ML硕士给我带来了什么？
- 语义分割--Loss Max-Pooling for Semantic Image Segmentation
- 对SqlCommandBuilder类理解
- 自动化用户特定实体的访问控制
- 根据select不同的选项实现相应input框添加项的显示
- Trick（十五）—— 树结构如何判断一个节点是内部节点（internal node）还是叶子节点（leaf node）
- 判断数组是否为某二叉搜索树的后序遍历
- python爬虫东方财富网的股票资金流（以平安银行为例）
- php用按钮导出到excel,PHP导出Excel，PHP输入Excel
- 计算机文化基础（高职高专版 第十一版）第六章 答案
- 基于spss的正态分布正态性检验
- Word高效指南 - 如何批量删除空格空白行
- 怎么做科研你懂吗？道翰天琼认知智能机器人平台API接口大脑为您揭秘。
- cyclone小知识（三）——cyclone导入多种格式数据
- ssh+dwr实现级联操作
- exlsx表格教程_e某cel表格~的各种基本操作.doc 文档全文预览
- 永定城 × 奇点云 | 数字新商贸的全国样板长什么样？
- ValueError: binary mode doesn‘t take an encoding argument
- MySQL 主从架构在线热迁移MGR 方案
- ipadpro如何分屏_不再泡面！大学生如何用iPad高效学习