360前端星计划—前端工程化浅析

前端工程化的目标：在前端领域，利用技术不断进步和经验积累带来的各种方案，来解决在项目中的开发、测试、维护阶段中遇到的种种低效和繁琐的问题。

前端工程化：

• 规范化
• 模块化
• 组件化
• 自动化

一、规范化

版本管理及开发流程的规范和编写规范

使用git和git flow进行版本管理

二、 模块化

包括CSS模块化和JS模块化

1. 对于CSS模块化的解决方案

   核心思想：通过样式生效规则来避免冲突

   • scoped：DOM节点添加data-v-version属性
   • Css in Js：以脚本模块来写样式，甚至有封装好的的模块可以调用
   • CSS Modules：借助预编译使样式成为脚本中的变量
   • BEM：按照规则手写CSS，并在模块内增加相应class

2. 对于JS模块化的解决方案

   • node.js
   • common.js

三、 组件化

什么是组件呢？

1. UI为主

   页面上的一个UI块可以封装成一个组件。

2. 逻辑为主

   某一个功能逻辑也可以封装成一个组件

四、 自动化

• 自动初始化：eg. vue-cli
• 自动构建（打包）：eg.webpack
• 自动测试：eg. karma, jest
• 自动部署：eg. Jenkins

360前端星计划—前端性能优化

常用评估前端性能工具

• Lighthouse
• WebPageTest
• Chrome DevTool

浏览器渲染场景

1. JS/CSS > 计算样式 > 布局 > 绘制 > 渲染层合并
2. JS/CSS > 计算样式 > 绘制 > 渲染层合并
3. JS/CSS > 计算样式 > 渲染层合并

浏览器渲染流程

1. JavaScript (实现动画、操作DOM等)
2. Style (Render Tree)
3. Layout (盒模型，确切的位置和大小)
4. Paint (栅格化)
5. Composite (渲染层合并)