css优化

内联不是万能的

内联意味着将所有的脚本、样式和图片通通嵌入到HTML中；

• 但是如果所有的图片都是一样的，这样就增加额外的同样图片的请求；
• 如果某些css样式是跳转到另一个页面时才用到的，又增加了不必要的CSS请求；
• 我们在浏览器窗口看到的图片如果只是HTML的一部分，那么下面没看到的部分的图片其实暂时是不必要加载的；
• 并且HTML自身是不可以缓存的，所以它承载的所有资源每次都要重新下载一遍；

1. 所以对于暂时用不到的CSS样式在一个另一个页面载入时再请求；
2. 而HTML中使用相同图片的元素利用CSS的background-image属性，只下载一次这张图片，同时用于多个元素；或者所有的图片放到一张图片中，利用background-position在包围在外的盒模型中显示所需的图片部分；
3. 按需将图片和样式滚动加载到可见区域；
   4.在首次加载时将资源保存在localStorage中，文件名保存在cookie中，后续请求服务器检查对应的cookie，根据对应cookie的值只嵌入新的或丢失的脚本，也就时说加载时只从localStorage载入文件；

无用背景图片

css中，为同一个元素的属性设置多个相互冲突的规则，但根据先后顺序、优先级，只有一个规则会被采用；

• 如果我们对同一个元素应用了相互冲突的背景图片，那在有些设备上可能会将几张相互冲突的背景图片全部下载下来；

1. 很简单的办法就是不给同一个元素设置那么多的背景图片；
2. 或者只给id选择器添加背景图片；

最小化DOM

• 文档流每次改变是，每个DOM节点都会重新计算，而读写DOM操作的成本很昂贵。

1.要提升性能，就要将节点数目减到最小，存储并重用DOM节点（即重用缓存的节点），而不是创建新节点；