web前端优化时为何不建议使用css@import
今天就跟大家聊聊有关web前端优化时为何不建议使用css @import,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。
十载的饶平网站建设经验,针对设计、前端、开发、售后、文案、推广等六对一服务,响应快,48小时及时工作处理。网络营销推广的优势是能够根据用户设备显示端的尺寸不同,自动调整饶平建站的显示方式,使网站能够适用不同显示终端,在浏览器中调整网站的宽度,无论在任何一种浏览器上浏览网站,都能展现优雅布局与设计,从而大程度地提升浏览体验。成都创新互联从事“饶平网站设计”,“饶平网站推广”以来,每个客户项目都认真落实执行。
曾经研究web前端优化时在网上多处看到这样一条建议,大意是:
不要使用 css @import, 因为用这种方式加载css相当于把css放在了html底部。
关于这一点,我一直很疑惑: 为什么用@import就等于把css放在了页面底部? 原理是什么?? 但一直不得而知,因为网络文章一大抄,转载的很多,去细究原因的却很少。
直到今天,在google developers看一篇文章时,无意间找到了这个原因,原文如下:
Avoid CSS @import
Overview
Using CSS @import in an external stylesheet can add additional delays during the loading of a web page.
Details
CSS @importallows stylesheets to import other stylesheets. When CSS @import isused from an external stylesheet, the browser is unable to downloadthe stylesheets in parallel, which adds additional round-trip timesto the overall page load. For instance, iffirst.css contains the following content:
@import url("second.css")
The browser must download, parse, andexecute first.css before it is able to discover that itneeds to downloadsecond.css.
Recommendations
Use the tag instead of CSS @import
Instead of @import, use a tag for each stylesheet. This allows the browser to download stylesheets in parallel, which results in faster page load times:
我们确实要避免使用css @import, 但原因却不是什么相当于放在了页面底部,而是这样做会导致css无法并行下载,因为使用@import引用的文件只有在引用它的那个css文件被下载、解析之后,浏览器才会知道还有另外一个css需要下载,这时才去下载,然后下载后开始解析、构建render tree等一系列操作。 星球浏览器在页面所有css下载并解析完成后才会开始渲染页面(Before a browser can begin to render a web page, it mustdownload and parse any stylesheets that are required to lay out thepage. Even if a stylesheet is in an external file that is cached,rendering is blocked until the browser loads the stylesheet from disk.),因此css @import引起的css解析延迟会加长页面留白期。 所以,要尽量避免使用css @import而尽量采用link标签的方式引入。
看完上述内容,你们对web前端优化时为何不建议使用css @import有进一步的了解吗?如果还想了解更多知识或者相关内容,请关注创新互联行业资讯频道,感谢大家的支持。
网站栏目:web前端优化时为何不建议使用css@import
网址分享:http://myzitong.com/article/ghgeps.html