前端性能优化之企业项目SVG Flex 预加载 窗口加载（6）

1、Flex

• 项目 之前的布局 有点混乱， 使用 position /  table / float 等
  
• 现在都更改为  flex 布局， 因为项目 主要是面向移动端用户， flex 有天生优势
  
• 更改思路
  

1、先写一个 公共的 css 放在 common.scss 中 
2、全局写 css 时 引用这个common 的部分 
3、当然 主要是 引用 flex 相关的部分 进行 布局 
复制代码

• table 布局的 坏处在于 稍微 改动一点 会导致大面积 重新计算和布局 对性能 非常不利
  
• 也见到过一个页面 靠着 position 来支撑的 ， 导致一些 兼容性问题， 不同屏幕下 会导致很多问题
  
• 几个 场景展示
  
• common.scss
  

• 某个页面 使用 flex

2、SVG- icon

• 当前项目 所有图标 统一为 SVG 之前 jpg / png 都存在
  
• 此处 对比简单说一下
  

• 实现思路参考

1、新建一个 svg 组件  Icon.js
2、该文件 维护所有项目中使用的 svg 
复制代码

• 类似这样

• 项目中这样使用

3、预加载

• 此处 使用

• 对首屏加载有效

4、窗口加载

• 未在此项目中尝试