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节点(即重用缓存的节点),而不是创建新节点;

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,696评论 1 92
  • Yahoo!的Exceptional Performance团队为改善Web性能带来最佳实践。他们为此进行了 一系...
    马里奥Joseph阅读 3,923评论 0 6
  • 前端是庞大的,包括 HTML、 CSS、 Javascript、Image 、Flash等等各种各样的资源。前端优...
    build1024阅读 4,330评论 0 2
  • 网页性能优化的目的 减少服务器压力 增强用户体验,减少加载时间,通俗地说就是用户感觉打开你的网页很快,等待页面资源...
    Scott1738阅读 2,823评论 0 1
  • 最近在项目中遇到了一个小问题,纠结了半天。 路径中使用斜杠/和反斜杠\的区别到底是什么。查阅了一些资料后可知。 U...
    罗蓁蓁阅读 3,532评论 0 5

友情链接更多精彩内容