内联不是万能的
内联意味着将所有的脚本、样式和图片通通嵌入到HTML中;
- 但是如果所有的图片都是一样的,这样就增加额外的同样图片的请求;
- 如果某些css样式是跳转到另一个页面时才用到的,又增加了不必要的CSS请求;
- 我们在浏览器窗口看到的图片如果只是HTML的一部分,那么下面没看到的部分的图片其实暂时是不必要加载的;
- 并且HTML自身是不可以缓存的,所以它承载的所有资源每次都要重新下载一遍;
- 所以对于暂时用不到的CSS样式在一个另一个页面载入时再请求;
- 而HTML中使用相同图片的元素利用CSS的
background-image
属性,只下载一次这张图片,同时用于多个元素;或者所有的图片放到一张图片中,利用background-position
在包围在外的盒模型中显示所需的图片部分; - 按需将图片和样式滚动加载到可见区域;
4.在首次加载时将资源保存在localStorage中,文件名保存在cookie中,后续请求服务器检查对应的cookie,根据对应cookie的值只嵌入新的或丢失的脚本,也就时说加载时只从localStorage载入文件;
无用背景图片
css中,为同一个元素的属性设置多个相互冲突的规则,但根据先后顺序、优先级,只有一个规则会被采用;
- 如果我们对同一个元素应用了相互冲突的背景图片,那在有些设备上可能会将几张相互冲突的背景图片全部下载下来;
- 很简单的办法就是不给同一个元素设置那么多的背景图片;
- 或者只给id选择器添加背景图片;
最小化DOM
- 文档流每次改变是,每个DOM节点都会重新计算,而读写DOM操作的成本很昂贵。
1.要提升性能,就要将节点数目减到最小,存储并重用DOM节点(即重用缓存的节点),而不是创建新节点;