项目优化

2 篇文章 0 订阅
2 篇文章 0 订阅

项目优化

为什么需要项目优化


在互联网快速发展的今天,在实现完功能之后,项目优化是一个被经常提到的话题。很多项目会在开发排期中留大量时间去做一轮又一轮的性能优化,就是为了让页面尽可能早的到达用户,提高交互的流畅程度。

在系统可利用系统资源有限的大背景下,3秒呈现内容的原则下,项目优化显得格外重要。

每减少0.1秒加载速度可能会给你带来几百甚至几千的用户活跃;每减少100K的内容请求可能会给你带来几千甚至几万的的服务端费用;每提高10%的交互流畅度可能给你带来几万甚至几十万的销售额。

于情于理,我们都需要去了解,掌握和使用网站优化这项必备技能

雅虎的网站优化准则


由之前的十四条增加到三十五条,划分为七个模块:Content,Server,Cookie,Css,Javascript,Images,Mobile

  • 国内还可以找到十四条的译文 传送门
  • 英文版原文,小白慎入,高手必读 传送门

常见优化方法


从资源请求数量+代码执行效率两个角度来考虑

DOM结构

  • 样式表放在头部,防止白屏和闪屏
  • JS脚本放在底部或异步获取,防止阻塞资源加载
  • 使用语义化标签,优化精简DOM结构
  • 减少DOM操作频率
  • 减少重绘与回流

JS脚本

  • 优化脚本结构,移除重复的脚本
  • 模块就近加载(CMD)
  • 按需加载加载组件和路由
  • 图片懒加载,列表分页
  • 使用节流与防抖减少事件触发频率
  • 尽量使用CSS动画代替js动画,开启硬件加速

资源打包上线

  • 使用打包构建工具(webpack)清除注释,压缩页面资源,js、css、html、图片、字体等等
  • 混淆js代码
  • 分离非业务逻辑相关vendor依赖,使用长缓存缓存和CDN分发网络

服务器优化

  • 减少Http请求,合并页面资源,js,css单一入口。js特殊可以分为两个文件,一个业务逻辑,一个非业务逻辑
  • 把小图标合成雪碧图,不太适用经常更新的移动端开发
  • 把小的图片,字体等资源base64化
  • 开启GZip压缩,减少资源传输大小
  • 使用强缓存和协商缓存,减少资源重复请求

Vue中可以优化的点


  • Vue库dist里面的Runtime-only比Runtime+Compiler小30%
  • Vue的计算属性会根据依赖的data进行缓存
  • keep-alive可以缓存常用组件
  • Vuex中的getter也会根据依赖的state进行缓存
  • v-for中唯一key的使用
  • Vue全局错误处理errorHandle
  • Vue路由懒加载
  • Vue组件动态加载

React中可以优化的点


  • 在constructor改变this指向代替箭头函数和render内绑定this,避免函数作为props带来不必要的rerender
  • shouldComponentUpdate,减少不不必要的rerender
  • PureComponent高性能组件只响应引用数据的深拷贝
  • 使用唯一key优化list diff
  • 合并setState操作,减少虚拟dom对比频率
  • React路由动态加载react-loadable
  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值