link为什么方头部,script为什么需要html文档加载完完后再加载

href和src的区别
一般加载CSS用href,并放在头部;加载script用src,放在body内的下方。

href
是hypertext reference的缩写,表示超文本引用,用来建立当前元素和文档间的链接。常用的有link,a。
当CSS使用href引用,浏览器会识别该文档问CSS,并行下载,不会停止对当前文档的加载。

src
是source的缩写,是资源,页面必不可少的一部分,src指向的内容会嵌入到文档中当前标签的位置。常用的有img, script, iframe。
当script使用src引用,浏览器解析到该元素时会停止对文档的渲染,直到该资源加载完成。这也是将script放底部而不是头部的原因。

把CSS放头部,script放下方的原因
CSS放头部在加载html生成DOM tree的时候,就可以同时对DOM tree进行渲染。这样可以防止闪跳,白屏或者布局混乱。

javascript放在后面
javascript可能会改变DOM tree的结构,所以需要一个稳定的DOM tree。
javascript加载后会立即执行,同时会阻塞后面的资源加载。(javascript加载和执行的特点)

为什么将css放在头部,js放在尾部可以增加页面的性能

现在浏览器为了更好的用户体验,渲染引擎会尝试尽快在屏幕上显示内容,它不会等到所有的HTMl元素解析之后在构建和布局dom树,所以部分内容将被解析并显示。也就是说浏览器能够渲染不完整的dom树和cssom,尽快的减少白屏的时间。
假如我们将js放在header,js将阻塞解析dom,dom的内容会影响到dom树的绘制,导致dom绘制延后。
所以说我们会将js放在后面,以减少dom绘制的时间,但是不会减少DOMContentLoaded被触发的时间。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容