-
普通项目
-
页面加载
-
dns预解析
-
使用cdn
-
静态资源的压缩与合并
-
减少https请求
-
异步加载defer,async
-
服务端渲染ssr
-
多使用内存和缓存
-
-
页面渲染
-
css放前面,js放后面
-
减少dom查询,多次使用的保存为变量
-
减少dom操作,统一通过dom片段操作
-
事件函数的节流和防抖
-
图片懒加载
-
尽早进行操作, domcontentload 与 load
-
-
-
vue项目
-
代码层面优化
-
Object.freeze(data);对于一些查询类的页面,调取接口回来后的数据可 不进行数据劫持
-
v-if和v-for不要在一起使用。v-if的条件通过函数来处理
-
v-for中加上key,对于虚拟dom树查找提高性能
-
computed和watch注意区分使用场景。前者是有缓存的。后者是监听到数据变化后的回调无缓存
-
created中发起请求,mounted钩子中代表页面dom加载完成可以进行dom操作。
-
长列表性能优化,只渲染可视区域的列表
-
长表格性能优化,通过canvers来绘制表格
-
合理使用$nextTick去操作dom,适用于更新了数据马上就要操作dom的场景
-
操作dom不要使用js原生的方式来操作。用vue提供的三种方式来操作 比如,ref、自定义指令el、事件中的话用e.target获取dom
-
尽量不要在前端进行大量的数据处理
-
合理使用keep-alive来缓存页面数据,跳过created,mounted钩子,他有自己特定的钩子activted等
-
路由懒加载通过import配合箭头函数,还有其他的方式require
-
组件懒加载,异步加载
-
尽量少用float,可以用flex布局
-
频繁切换的使用v-show,不频繁的使用v-if
-
不要在模板中写过多的样式
-
服务端渲染ssr,优化seo,与首屏白屏问题。
-
通过addEventListenr添加的事件,需要自行销毁
-
把组件中的css提取成单独的文件
-
少使用闭包与递归,递归可做尾递归的优化
-
使用字体图标或者svg来代替传统的Png等格式的图片
-
在Js中避免“嵌套循环”和“死循环”
-
尽可能的使用事件委托来处理事件的绑定,针对老项目jq
-
使用day.js替代moment.js:day.js属于轻量的处理时间和日期的JavaScript库
-
-
webpack层面优化
-
去除无用代码treeShaking.
-
babel编译es6到es5的时候,会有多余代码产生
-
减小app.js的体积,提取公共代码
-
减少vendor.js的体积,通过按需引入第三方库,或者有些资源可以通过script标签引入
-
代码切割,有一些组件没必要都打包到一起。
-
使用chunck
-
使用SouceMap,来还原线上代码,更方便的去定位线上问题
-
构建结果,通过可视化插件,进行分析
-
webpack对图片进行压缩等处理,
-
图片可以使用webp,优雅降级处理
-
编译优化
-
模板预编译,使用vue-template-loader,把模板编译成渲染函数。
-
-
web层面优化
-
浏览器缓存的使用
-
开启gzip压缩
-
CDN的使用,减少路由转发的次数,就近访问资源
-
使用chrome的性能分析工具,查找性能瓶颈
-
dns预解析
-
静态资源的压缩与合并
-
减少https请求
-
异步加载defer,async
-
静态资源和服务不要放在同一台机器上。多个域名去并行加载解析
-
-
前端项目性能优化
最新推荐文章于 2022-06-05 02:09:53 发布