2020-10

10

网站建设中CSS如何影响加载时间
  • 类型:专业观点
  • 编辑:尼高GARY
  • 来源:https://www.szniegoweb.com
  • 你当前位置:首页 - 尼高动态 - 专业观点
    我们在网站建设过程中经常会被要求考虑加载时间,要了解CSS如何影响网页的加载时间,我们首先必须了解浏览器如何将HTML文档转换为功能正常的网页。
    网站建设
    首先,在网站建设中它必须下载HTML文档并解析它以创建DOM(文档对象模型)。每当遇到任何外部资源(CSS,JS,图像等)时,它将为其分配下载优先级并启动其下载。优先级很重要,因为某些资源对于呈现页面至关重要(例如主样式表和JS文件),而另一些资源则不太重要(例如图像或其他媒体类型的样式表)。

    HTTP / 1.1对每个域的连接数也有硬性限制(确切的数量取决于浏览器,这几天通常为6)。因此,如果要从一个域下载大量资源,则其中的一些资源必须排队等待,直到优先级更高的资源完成下载为止。因此,在使用HTTP / 1.1时,请保持少量请求。HTTP / 2没有此限制,但是到目前为止,并非所有站点都使用HTTP / 2。
    对于CSS,此优先级通常很高,因为创建CSSOM(CSS对象模型)必须使用样式表。要呈现网页,浏览器必须同时构造DOM和CSSOM。没有这些浏览器将无法在屏幕上呈现任何像素。这样做的原因是,样式首先定义页面的外观,然后再渲染页面,否则将浪费处理能力和糟糕的用户体验。仅当浏览器同时具有DOM和CSSOM时,它才能通过组合它们来创建渲染树并开始渲染屏幕。简而言之,没有CSS下载,也没有页面渲染。
    网站建设
    如您所见,CSS对网页的加载时间有很大的影响。当我们谈论CSS时,有两个基本方面会影响网页加载时间,这是我们为什么在网站建设前要考虑的问题,CSS文件大小和页面上CSS的总量(文件数)。太大的CSS文件将花费更长的时间下载,因此整个页面将花费更多的时间来呈现(它必须等待那个大的CSS首先下载)。