整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

网页开发中,有哪些方法可以加载CSS?

好,我是“前端就业加油站”的面试官。请问,在网页开发中,有哪些方法可以加载CSS呢?在网页开发中,可以通过以下四种方式加载CSS:

·1.在标签内部添加内部样式:例如,在下面这个div标签中,使用红色字体:div style="color:red">红色字体:</div>。

·2.通过内嵌样式,即在head头部标签之间添加<style>...</style>。

接着,使用选择器实现样式效果:例如,为名为“box”的类添加一个蓝色字体的样式,可以使用以下代码:<style>.box { color:blue;} </style>。这种方式会增加代码维护的难度,不建议使用。

·3.在head头部标签之间使用<link>标签来引入外部样式文件:例如,从外部引入一个名为“sun.css”的样式文件,可以使用以下代码:<link rel="stylesheet"href="./sun.css">。推荐使用这种方式来引入样式,这也是主流的样式引入方式。

·4.在HTML文件或CSS文件中导入外部样式表:在HTML文件或CSS文件中导入外部样式表,并将其视为文件的一部分。

这就是我对这个问题的回答。谢谢您的提问!

览器加载页面是按从上到下顺序加载的。加载 JS 并执行的时候,会阻塞其他资源的加载。这是因为 JS 可能会有 DOM 、样式等等操作,所以浏览器要先加载这段 JS 并执行,再加载放在它后面的 HTML、CSS。

因此,加入一段巨大的 JS 放在最上面,浏览器首先要下载并执行,这段时间里面,页面是空白的。相比于加载了部分 HTML 和 样式 但是没有 JS 交互功能,显然是后者对于浏览者体验要好。

然而,是否所有 JS 都要放在最下面呢?并不是。

举实际的例子:

html5shiv是一段 JS 脚本,用来是早期 IE 兼容 HTML5 新增标签的支持。

这个 JS 脚本,必须要放在上面 head 部分,为什么呢?因为在老 IE 浏览器下面,不支持 <section> 这样的标签,所以用 JS 来兼容。如果放在底部,等 IE 浏览器先报错了,才会执行这块 JS 没多大用。

jQuery 这类的库,也是建议放在最上面的。首先最大的疑问可能是 jQuery 这么大,放在上面岂不是阻塞的很厉害?

不过 jQuery 通常引用的是 CDN 地址,而且经过 gzip 压缩之后并不是很大,而且引用公共 CDN 上面的 jQuery 话,很大几率早已被用户缓存下来了。所以可以不需要考虑阻塞产生的性能问题。

而我们都知道,JS 是按顺序执行下来的。也就是你没运行 jQuery 之前,先运行了调用 jQuery 函数的代码,就会报错。你可以控制你自己写的 JS 放在页面最下面,放在 jQuery 下面,但是你无法保证页面上其他地方会不会有人图省事直接在 HTML 代码里面输出 JS。如果有,那么就会报错。

所以我建议,类库放在上面加载,其余代码尽可能放在最底下加载。

然而,前端性能优化只是薄薄一层

可能前端优化半天,还不如上个 CDN 或者加个宽带或者优化一个后端算法来的效果好。

4 种方式可以在 HTML 中引入 CSS。其中有 2 种方式是在 HTML 文件中直接添加 CSS 代码,另外两种是引入 外部 CSS 文件。下面我们就来看看这些方式和它们的优缺点。

内联方式

内联方式指的是直接在 HTML 标签中的 style 属性中添加 CSS。

示例:

<div style="background: red"></div>

这通常是个很糟糕的书写方式,它只能改变当前标签的样式,如果想要多个 <div> 拥有相同的样式,你不得不重复地为每个 <div> 添加相同的样式,如果想要修改一种样式,又不得不修改所有的 style 中的代码。很显然,内联方式引入 CSS 代码会导致 HTML 代码变得冗长,且使得网页难以维护。

嵌入方式

嵌入方式指的是在 HTML 头部中的 <style> 标签下书写 CSS 代码。

示例:

<head>
 <style>
 .content {
 background: red;
 }
 </style>
</head>

嵌入方式的 CSS 只对当前的网页有效。因为 CSS 代码是在 HTML 文件中,所以会使得代码比较集中,当我们写模板网页时这通常比较有利。因为查看模板代码的人可以一目了然地查看 HTML 结构和 CSS 样式。因为嵌入的 CSS 只对当前页面有效,所以当多个页面需要引入相同的 CSS 代码时,这样写会导致代码冗余,也不利于维护。

链接方式

链接方式指的是使用 HTML 头部的 <head> 标签引入外部的 CSS 文件。

示例:

<head>
 <link rel="stylesheet" type="text/css" href="style.css">
</head>

这是最常见的也是最推荐的引入 CSS 的方式。使用这种方式,所有的 CSS 代码只存在于单独的 CSS 文件中,所以具有良好的可维护性。并且所有的 CSS 代码只存在于 CSS 文件中,CSS 文件会在第一次加载时引入,以后切换页面时只需加载 HTML 文件即可。

导入方式

导入方式指的是使用 CSS 规则引入外部 CSS 文件。

示例:

<style>
 @import url(style.css);
</style>

比较链接方式和导入方式

链接方式(下面用 link 代替)和导入方式(下面用 @import 代替)都是引入外部的 CSS 文件的方式,下面我们来比较这两种方式,并且说明为什么不推荐使用 @import

  • link 属于 HTML,通过 <link> 标签中的 href 属性来引入外部文件,而 @import 属于 CSS,所以导入语句应写在 CSS 中,要注意的是导入语句应写在样式表的开头,否则无法正确导入外部文件;
  • @import 是 CSS2.1 才出现的概念,所以如果浏览器版本较低,无法正确导入外部样式文件;
  • 当 HTML 文件被加载时,link 引用的文件会同时被加载,而 @import 引用的文件则会等页面全部下载完毕再被加载;

小结:我们应尽量使用 <link> 标签导入外部 CSS 文件,避免或者少用使用其他三种方式。