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执行优化
    • 避免大型复杂的布局
    • 渲染层合并

你可能感兴趣的:(2020年360前端星计划课程笔记-0411)