为什么加载css用link, 而加载js要用script

一. 背景

突然有一天, 一个学生问我:

杰哥, 同样都是引入资源, 为什么加载css用link, 而加载js用script

是啊! 为什么呢? 我好像从来没注意过这个问题, 我相信很多人可能都跟我一样, 没有注意过

这真是一个好问题, 我也找了大量的资料, 在这里跟大家分享一下

我找了大量的资料, 发现其实这个问题的核心应该是href属性和src属性的区别

虽然搞清楚这个问题, 并不会为大家带来多一分的薪水

但是有时候, 人就是这样. 不知道这个问题时, 一切安好. 知道有这个问题, 不搞清楚心里就会很膈应


在此, 要感谢小锋同学的提问, 让我更深刻的理解什么是教学相长

二. 解决方法

我找资料的思路:

  • 第一: 求助搜索引擎
  • 第二: 求助社区里的大神
  • 第三: 求助官网-标准

第一种方式最快, 最有效, 但是自己一个人研究, 可能会比较孤单

第二种方式相对会花时间, 但是把希望寄托上别人身上有点危险

第三种方式最花时间, 但是一旦坚持下来, 可以走的最远


建议大家, 尽量找一手信息, 而不是看二次加工过的信息, 二次加工的信息难免会带一些主观理解, 可能会有一些偏差.

如果条件允许的话, 也不要看我的文章, 而是直接根据我提供的线索阅读一手的信息!

1. 关于搜索引擎

推荐google

并不是不支持国产.我是真心觉得google更懂我的意思. 出来的结果更符合的我要求.

但是出于大家都懂的原因, 很多人可能用不了google(这里大家自己想办法...我也很无奈)

英文优先

搜索的时候, 用英文优先, 这也是冒得办法.

我超过10年的职业生涯告诉我, 英文的描述会更准确, 不会像中文在理解上存在模糊性.

这里又劝退很多人, 杰哥, 我英文不好, 看不懂. 一看就晕, 还有些看到是英文就不想看了


因此, 这就是为什么我写这篇的原因, 尽自己一点绵薄之力, 帮助那些没有条件的朋友们获取一手信息


以下是我用google搜索的结果



2. 关于社区

不得不说, 社区真是个好东西, 做技术的人天生热心肠, 社区里很多大神, 低调但是给力.

我曾经遇到过一个大神, 不仅原理给我讲的明明白白, 还直接给我实现了~

我一直坚信, 现在我遇到的问题, 之前一定有高人遇到并解决过. 无外乎肯不肯花时间找.

这种方法, 比较慢. 一旦学会用好, 收获的不仅是技术, 可能还有人脉和友谊

3. 关于官方和标准

强烈不推荐大家一开始就读标准. 真的很晦涩, 非常难懂

我一度认为标准不是给人看的, 看的想吐. 不过, 吐着吐着就习惯了

标准适合每隔一段时间读一读, 能懂多少是多少. 反正我每次读, 都有新收获

这种方式最慢, 但是对长远发展最好

三. 到底为什么

扯了这么多, 我们来回答提出的问题

1. href属性和src属性的定义

We use src for replaced elements while href for establishing a relationship between the referencing document and an external resource.

杰哥译: 我们为可替换元素使用src属性, 而使用href属性建立参考文档与外部资源之间的联系

(译者注: 不了解什么是可替换元素, 可以看下杰哥之前的文档 yuque.com/brojie/fmiabg)

2. href属性和src属性的区别

href (Hypertext Reference) attribute specifies the location of a Web resource thus defining a link or relationship between the current element (in case of anchor a) or current document (in case of link) and the destination anchor or resource defined by this attribute

杰哥译: href属性指定了一个web资源的位置, 因此定义了一种链接或者说关系, 什么关系呢? 当前元素(例如a元素) 或者当前文档(例如link元素)和目标锚点或者由该属性定义的资源之间的关系


src (Source) attribute just embeds the resource in the current document at the location of the element's definition.

杰哥译: src(源)属性直接将资源嵌入到当前文档中元素定义的地方


杰哥的理解

href属性只是建立了一种联系. 指明了去哪里可以找到你要的东西

src属性直接把你要的东西拿回来了, 直接放到了文档里面

3. 浏览器如何处理href资源和src资源

When we write:
<link href="style.css" rel="stylesheet" />
The browser understands that this resource is a stylesheet and the processing parsing of the page isnot paused (rendering might be paused since the browser needs the style rules to paint and render the page). It is not similar to dumping the contents of the css file inside the style tag. (Hence is is advisable to use link rather than @import for attaching stylesheets to your html document.)

杰哥译: 当浏览器遇到link元素时, 会把他理解成一种样式表资源, 并且会继续解析HTML页面, 不会阻塞(不过, 渲染可能会被暂停, 因为浏览器需要时间解析样式规则然后渲染到页面). 这和直接把css的内容放到style里是不同的(因此, 使用link的方式比使用@import的方式更明智)

(译者注: @import是CSS中引入另一个CSS文件的方式, 相当于把内容复制过来, 替换掉 @import语句 )


When the browser finds
<script src="script.js"></script>
The loading and processing of the page is paused until this the browser fetches, compiles and executes the file. It is similar to dumping the contents of the js file inside the script tag. Similar is the case with img tag. It is an empty tag and the content, that should come inside it, is defined by the src attribute. The browser pauses the loading until it fetches and loads the image. [so is the case with iframe]

杰哥译: 当浏览器遇到script元素时, 浏览器加载页面的过程会阻塞, 直到浏览器拿到, 编译并执行了文件. 这和直接把文件的内容放到script标签是一样的. img的src属性行为也是类似. 它(指img元素)是一个空元素, 里面具体放什么内容, 取决于src属性的定义. 浏览器会暂停加载, 直到拿到并加载完图片. [iframe元素也是一样的情况]

(泽者注, 这就是为什么src属性是img的必填属性的原因, 如果没有src属性, 就完全不知道img元素里应该放什么内容)


杰哥的理解

浏览器解析link时, 通过href知道要加载一种外部文件, 而通过rel="stylesheet"告诉浏览器加载回来的文件当成css解析

浏览器解析script时, 通过src将文件内容全部拿到, 并放到script元素里解析, 执行


四. 参考文献

Stack Overflow :html - Difference between SRC and HREF

MDN link元素: developer.mozilla.org/e

MDN script元素: developer.mozilla.org/e

编辑于 2022-03-21 09:59
HTML
前端面试题