11 - 前端工程化浅析
前端工程化
目标:利用技术不断进步和经验逐步积累带来的各种方案,来解决在项目的开发、测试、维护阶段中遇到的种种低效和繁琐的问题
工程化是一种思想,技术是一种实践
规范化
- 规范化,是项目可维护性的基石
- 版本管理及开发流程规范
- 编写规范:脚本、样式、目录结构
- git:版本管理、代码仓库
- git flow:基于git,简化操作,活动模型,行为规范
模块化
- 将逻辑相关的代码放在同一个文件中,当作一个模块
- 只需关注模块内逻辑的实现,无需考虑变量污染等问题,模块之间可互相调用
- CSS模块化
- 核心思想:通过样式生效规则来避免冲突
- scoped:DOM接天添加data-v-version属性
- CSS in JS:以脚本模块写样式,按规则生成唯一selector
- CSS Modules:借助预编译使样式成为脚本中的变量
- BEM(Block_Element-Modifier):按照规则,手写css,并在模板内增加相应class
- JS模块化
- CommonJS
- CMD
- AMD
- ES Module-loader
组件化
-
将由特定逻辑和UI进行的高内聚,低耦合的封装体称为一个组件
-
UI组件
-
逻辑组件
自动化
- 能由机器自动完成的事情,绝不让人来做,自动化是前端工程化核心
- 自动初始化,如vue-cli
- 自动构建(打包),如webpack
- 自动测试,如karma,jest
- 自动部署,如Jenkins
12 - 前端动画
动画基本原理
- 定时器改变对象的属性
- 根据新的属性重新渲染动画
动画的种类
- JavaScript 动画
- 操作DOM
- Canvas
- CSS 动画
- transition
- animation
- SVG 动画
- SMIL
13 - 前端性能优化
RAIL模型
以用户为中心的性能模型,每个网络应用都具有与其生命周期有关的四个方面,而且这些方面以不同的方式影响着性能
50ms处理事件
- 目标:在100ms内响应用户输入
- 50ms内处理用户输入时间,确保100ms内反馈用户可视的响应
- 对于开销大的任务可分隔任务处理,或放到worker进程中执行,避免影响用户交互
- 处理时间超过50ms的操作,始终给予反馈(进度和活动指示器)
动画10ms一帧
- 在动画这样的高压点,尽量不要处理逻辑,提高达到60fps的机会
空闲时间最大化
- 最大化空闲时间以增加页面在100ms内响应用户输入的几率
- 利用空闲时间完成推迟的工作
- 空闲时间期间用户交互优先级最高
加载:5s呈现交互内容
- 首屏加载连接3G缓慢的中档移动设备5s内呈现可交互内容
- 非首屏加载应在2s内完成
- 测试用户常用设备和网络连接情况的性能
- 优化关键渲染路径以解除组织渲染
- 启用渐进式渲染和在后台执行一些工作
- 影响加载性能的因素
- 网络速度
- 硬件(CPU)
- 解析JavaScript
评估性能的工具
- Lighthouse(chrome的Audits)
- WebPageTest
- Chrome DevTools
浏览器渲染场景
- JS/CSS > 计算样式 > 布局 > 绘制 > 渲染层合并
- JS/CSS > 计算样式 > 绘制 > 渲染层合并
- JS/CSS > 计算样式 > 渲染层合并
性能优化方向
- 加载
- 资源效率优化
- 图片优化
- 字体优化
- 关键渲染路径优化
- 渲染
- JavaScript执行优化
- 避免大型复杂的布局
- 渲染层合并