同样从一次面试得来的经验。
题目为 实现评价星星的思路。

思路1

有一张长图，包含了5个已选择的星星和未选择的星星，用户选择哪个星级评价时，移动整个图片，即 改变background-position的值。
HTML如下：

<div>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
</div>

div的background是图片， span是透明层，用户选择那个时，用于定位，然后移动div，实现效果。
优化思路： 去掉span，整个结构只有一个div， 根据event.target,offset位置偏移来确认用户选择的评价星级。

思路2

图片只包换一个已选择和一个未选择的星星，实现了图片的优化。
HTML 结构：

<div>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
</div>

思路同方法1，改变position，用户选择的星星的位置index，将index之前的span全部改变为已选择，index后面设置为未选择的星星。
图片优化了，但一次选择需要操作的DOM结果有点多。
优化思路： 记录上一次用户选择的星星index，和本次选择的位置index进行比较，只操作需要改变的dom，优化了dom的操作。

思路3

两种星星两张图片，改变src。
这种思路 面试官否定了，觉得不好， 因为改变src，会等待下载图片，体验有空窗期。
优化思路： 一开始设置一个隐藏的img，将另外一张图片提前下载，改变src，就不需要等待下载图片，直接切换。