前端工程化浅析-前端动画可以这么玩-一起优化前端性能

前端工程化浅析

什么是前端工程化

• 在前端领域，利用技术不断进步和经验逐步积累带来等各种方案，来解决在项目等开发、测试、维护阶段中遇到等种种低效的繁琐的问题。
• 工程化是一种思想，技术是一种实践。技术会随着时代进步不断地演进和改变，在不同的时期，都会有不同的技术来承载和践行着工程化思想。思想的落地离不开行动和实践，技术虽然会过时，但实践必须立足当下

模范化

• 版本管理及开发流程规范： git 、git flow
  
• 编写规范
  • 脚本
  • 样式
  • 目录结构

模块化

一般逻辑相关但代码放在同一个文件中，当做一个模块
只关注模块内逻辑但实现，无需考虑变量污染等问题，模块之间可互相调用

** CSS模块化/JS模块化**

组件化

组件化和模块化的核心思想都在于分治，实际带来的好处就是团队协作效率和项目可维护的提升。

• 侧重UI进行封装的组件：代码结构清晰，组件内的模块就近放置，方便进行修改和维护。这种组件具备高内聚，低耦合的特性，但普适性不高
• 侧重逻辑进行封装但组件：除了具备上诉优点外，还具有很高但普适性，更方便组件重用
• 组件内可以包含组件：比如偏UI的组件往往都是包含有偏逻辑的组件

自动化

• 自动化测试
• 自动化部署
• 自动化初始化
• 自动化构建：webpack、parcel

前端动画可以这么玩

动画的基本原理

1. 定时器改变对象的属性
2. 根据新的属性重新渲染动画

function update(context) {
   // 更新属性
}

const ticker = new Ticker();
ticker.tick(update, context);

动画的种类

1. JavaScript 动画
   • 操作DOM
   • Canvas
2. CSS 动画
   • transition
   • animation
3. SVG 动画
   • SMIL

JS动画的优缺点
优点：灵活度、可控性、性能
缺点：易用性

一起优化前端性能

使用RAIL模型评估性能

定义:以用户为中心的性能模型，每个网络应用都具有与其生命周期有关都四个方面，而且这些方面以不同都方式影响着性能。
response animation idle load

关键指标：

• 响应：在100ms内响应用户输入
• 动画：动画或滚动时，10ms产生一帧
• 空闲时间：主线程空闲时间最大化
• 加载：在1000ms内呈现交互内容
• 以用户为中心

评估性能的工具

• lighthouse
• WebPageTest
• Chrome DevTools