Day4：前端工程化初探

CSS效果和动画

css效果CSS里非常出彩的一部分，灵活应用box-shadow，运用无限投影，甚至可以画机器猫之类的不可思议的图形。

CSS中实现动画的方式：transition,keyframes

过渡动画和关键帧动画的区别：

• 过渡动画需要有状态变化（延迟改变，eaesing方式）
• 关键帧动画不需要状态变化
• 关键帧动画能控制更精细

CSS动画的性能：

• 性能不坏
• 部分情况下优于JS
• 但JS可以做到更好
• 部分高危属性 box-shadow等

JS开发环境

git使用经验：

git checkout xxx 撤销修改

git checkout -b dev 切换分支到dev

git branch 查看当前分支

git diff

git commit origin dev 把dev分支提交到远程服务器

git checkout master 切换到已有分支

git pull origin master 检查远程库的修改

git merge dev 把dev的修改合并到mater分支

git push origin master 最后提交到master分支上

模块化

AMD 异步模块规范

• require.js
• 全局define函数
• 全局require函数
• 依赖JS会自动、异步加载

CommonJS规范

nodejs模块化规范，现在被大量用做前端，原因：

• 前端开发以来的插件和库，都可以从npm中获取
• 构建工具的高度自动化，使得使用npm的成本非常低
• CommonJS不会异步加载JS，而是同步一次性加载出来

image.png

AMD和CommonJS的使用场景

• 需要异步加载JS，使用AMD
• 使用了npm之后建议使用CommonJS

浏览器渲染页面的过程

• 根据HTML结构生成DOM Tree
• 根据CSS生成CSSOM
• 将DOM和CSSOM整合形成RenderTree
• 根据RenderTree开始渲染和展示
• 遇到