web前端优化时为什么不建议使用css @import
建站知识 2021-07-03 08:15www.168986.cn长沙网站建设
曾经研究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.
Remendations
Use the <link> tag instead of CSS @import
Instead of @import, use a <link> tag for each stylesheet. This allows the browser to download stylesheets in parallel, which results in faster page load times:
<link rel="stylesheet" href="first.css">
<link rel="stylesheet" href="second.css">
我们确实要避免使用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标签的方式引入。
不要使用 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.
Remendations
Use the <link> tag instead of CSS @import
Instead of @import, use a <link> tag for each stylesheet. This allows the browser to download stylesheets in parallel, which results in faster page load times:
<link rel="stylesheet" href="first.css">
<link rel="stylesheet" href="second.css">
我们确实要避免使用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标签的方式引入。
上一篇:本文的主角 vertical-align使用介绍
下一篇:css弹出层代码分享
长沙网站设计
- 如何自己建一个网站 自己想建个网站,怎么建
- 如何制作网站免费建站 创建网站免费注册
- html简单网页代码 html简单网页代码超链接
- dreamweaver网页制作 dreamweaver网页制作模板
- 上海网站建设 上海网站建设制作微信
- 如何制作网站和网页 如何制作一个网页
- html网页制作代码大全 端午节html网页制作代码大
- app开发公司 app开发公司前十名
- html网页制作 html网页制作文字居中
- app制作一个需要多少钱 请人制作一个app多少钱
- 成都网站制作 成都网站制作维护
- 百度建一个网站多少钱 百度做个公司网站要多少
- html+css网页制作成品 web网页制作成品css+javascrip
- html网页制作案例 html网页设计案例
- html+css网页制作成品 web网页制作成品css+javascrip
- 个人网站模板 个人网站模板HTML