2020年360前端星计划课程笔记-0411

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 - 前端动画

动画基本原理

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

动画的种类

1. JavaScript 动画
   1. 操作DOM
   2. Canvas
2. CSS 动画
   1. transition
   2. animation
3. SVG 动画
   1. 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执行优化
  • 避免大型复杂的布局
  • 渲染层合并