如何优化老项目的用户体验及前端UI（二）

续上篇……
上篇我们最终做成了：

左侧采用的是flex布局。但是这样出现了一个问题就是，蓝色区域内容过长的时候，内容会覆盖住橘黄色的区域。所以，要给蓝色区域加一个高度，然后overflow: auto使里面的内容可以滚动。然后底部的橘黄色部分要设置成fixed固定在左下角。

改动后就是：

对应代码是：

三、模块的颗粒化与标签的选择

这个过程要做两件事：

（1）列出每个模块的私有元素

（2）提取一部分写常用组件（例如：菜单项）

1、先颗粒化左侧树的部分：

首先树这里我们分了三个部分：顶部固定内容 + 中间可伸缩菜单项 + 底部固定内容

注意平时写代码的时候不要加太多的position: fixed属性。因为定位元素过多会影响性能。甚至有时滚动的时候会出现跳动的问题。这部分的知识点可以参考：

关于性能优化：reflow和repaint

所以，这部分我们后续可以继续优化……

2、iframe的使用场景

作为一个追求美丽外表的前端，虽然知道iframe有很多性能及体验上的缺点，但是iframe还是有很多的使用场景的。

（1）前端智能化类的项目（设计稿转代码）：可以利用iframe能原封不动地把嵌入的网页展现出来的特点。
（2）多项目整合的情况：像此文的左侧菜单栏，右侧是具体的内容（为了每一个功能或子项目而单独分离出来）
（3）组件化：可重复利用
（4）加载广告：改善整个网站加载缓慢的情况
（5）页面只刷新局部的情况
（6）包富文本编辑器的情况：可以防止编辑器对外部样式的污染

那么我们的情况是第二种，我们现在要把一个子项目嵌到主项目里：

像这样，实现一个“凸”形的布局，绿色部分为子项目的内容。

这在中后台项目中是比较常见的操作。但是关于主项目和子项目的层级我们要如何去协调呢？

首先，子项目要通过iframe嵌进去。因为是“凸”形的形状，所以我们要让iframe沾满整个屏幕。让iframe沾满整个屏幕还有一个好处就是：在做模态框的时候，可以水平垂直居中；遮罩可以沾满整个屏幕。如果要让iframe占整个屏幕，我们就要推翻之前的布局。因为iframe占整个屏幕，就会和主项目的左侧菜单形成一个层级的关系。

继续看图，然后来分析：iframe肯定是在下层，主项目菜单在上层。

关于定位，肯定是定位越少越好。

因为主项目在底层，子项目在上层（绿色区域），所以我们首先要考虑到的是层级的影响。底层可以有相应的占位元素，但是上层尽量不要有占位元素，因为占位元素多了就会影响底层的点击。

首先，我们可以肯定的是，底层的部分一定要有占位的地方，顶层尽量不要有占位。另外，手风琴菜单部分里的菜单项是优先靠上的，元素多了才会被挤下来。

所以，得出：

分析这个项目，主项目左侧菜单最顶上的两个菜单项是不可展开的，在此下面的三个菜单项都是可以展开的，然后最底部有一个固定菜单项。

3、颗粒化右侧内容部分

我们刚刚用flex: 1将右侧的部分设置成了自适应布局，但是目前还是有很多人会选择用float的方法去定位。我们要知道float的过程是脱离标准层的过程，所以相比flex，float布局会花更多的时间去渲染，性能会降低。

右侧布局分析：

未完待续…