Navigation menu

0755-82192581
  • Contact us
  • 0755-82192581
  • 深圳市罗湖区嘉宾路深华商业大厦9楼(地铁1号线国贸站B出口既是)

    3375726676@qq.com


    © 2007-2021 All Rights Reserved.
  • 策略型高端网站设计公司

    Strategic advanced website design company

    View More
  • 网站建设需要通过优化CSS来提升性能

    时间:2021-09-22  作者:尼高GARY  来源:https://www.niegoweb.com
    即使在 2021 年,网站建设性能仍然是一个问题。根据 HTTP Archive,平均页面需要2 MB 下载,发出超过 60 个 HTTP 请求,在移动设备上完全加载可能需要18 秒。样式表占 60 kB,分为七个请求,因此在尝试解决性能问题时,它很少是首要任务。然而,CSS 确实有效果,无论它看起来多么微弱。一旦你解决了你的JavaScript,学习如何正确优化 CSS 应该是下一个优先事项。


    CSS 看起来很简单,但可能需要一些繁重的处理。当您的浏览器遇到<link>标签时,它会在获取和解析 CSS 文件的同时停止其他浏览器的下载和处理。JavaScript 也可以阻止浏览器呈现,但异步处理是可能的:
    1、async并行下载脚本的属性,脚本准备就绪后立即运行。
    2、defer要并行下载的属性,然后在 DOM 准备就绪时按顺序运行。
    3、type="module"加载 ES 模块的属性(其行为类似于defer)。

    图像等资产通常需要更多带宽,但可以使用高效格式,并且可以延迟加载(loading="lazy"属性)而不会阻止浏览器渲染。这一切都无法通过 CSS 实现。该文件被缓存,因此后续页面加载应该更快,但渲染阻止过程仍然存在。

    样式表越大,下载并处理成 CSS 对象模型 (CSSOM) 所需的时间就越长,浏览器和 JavaScript API 可以使用它来显示页面。尽管 CSS 样式表比大多数其他网站文件小,但它们也不能幸免于“越小越好”的经验法则。识别不再使用的样式可能很困难,删除错误的样式可能会对网站造成严重破坏。开发人员通常会选择最安全的“保留一切”方法。不再使用的页面样式、组件和小部件继续存在于 CSS 中。结果?文件大小、复杂性和维护工作呈指数级增长,使得开发人员越来越不可能删除冗余代码。

    相关案例

    OTHER CASE