天了噜,为什么外链css要放在头部,js要放在尾部?
我们最开始学前端的时候都会看到教程在处理外部css,js的时候会将css放在header中,js放在body的最后。为什么要这样子处理,今天参考一些资料好好分析下。
为什么外链css为什么要放头部?
首先整个页面展示给用户会经过html 的解析与渲染过程。
而外链css无论放在html的任何位置都不影响html的解析,但是影响html的渲染。
如果将css放在尾部,html的内容可以第一时间显示出来,但是会阻塞html行内css的渲染。
浏览器的这个策略其实很明智的,想象一下,如果没有这个策略,页面首先会呈现出一个行内css样式,待CSS下载完之后又突然变了一个模样。用户体验可谓极差,而且渲染是有成本的。
如果将css放在头部,css的下载解析是可以和html的解析同步进行的,放到尾部,要花费额外时间来解析CSS,并且浏览器会先渲染出一个没有样式的页面,等CSS加载完后会再渲染成一个有样式的页面,页面会出现明显的闪动的现象。
为什么script要放在尾部?
因为当浏览器解析到script的时候,就会立即下载执行,中断html的解析过程,如果外部脚本加载时间很长(比如一直无法完成下载),就会造成网页长时间失去响应,浏览器就会呈现“假死”状态,这被称为“阻塞效应”。
具体的流程是这样的:
- 浏览器一边下载HTML网页,一边开始解析。
- 解析过程中,发现script标签
- 暂停解析,网页渲染的控制权转交给JavaScript引擎
- 如果script标签引用了外部脚本,就下载该脚本,否则就直接执行
- 执行完毕,控制权交还渲染引擎,恢复往下解析HTML网页
外链的script包含async或者defer如何处理?
这两个属性只是script标签在header标签中使用的,如果你把它放在body后面是无效的。
script 的这两个属性主要用于其js文件没有操作DOM
的情况,这时候就可以将该js脚本设置为异步加载,通过async或defer来标记代码。
async和defer的区别:
0、async和defer都仅对外部脚本有效,对于内置而不是连接外部脚本的script标签,以及动态生成的script标签不起作用。
1、async和defer虽然都是异步的,不过使用async标志的脚本文件一旦加载完成就会立即执行;而使用defer标记的脚本文件,会在 DOMContentLoaded 事件之前(也就是页面DOM加载完成时)执行。
2、如果有多个js脚本文件,async标记不保证按照书写的顺序执行,哪个脚本先下载结束,就先执行那个脚本。而defer标记则会按照js脚本书写顺序执行。
3、一般来说,如果脚本之间没有依赖关系,就使用async属性,如果脚本之间有依赖关系,就使用defer属性。如果同时使用async和defer属性,后者不起作用,浏览器行为由async属性决定。
对于async标记,浏览器的解析过程是这样的:
浏览器开始解析HTML网页
解析过程中,发现带有async属性的script标签
浏览器继续往下解析HTML网页,同时并行下载script标签中的外部脚本
脚本下载完成,浏览器暂停解析HTML网页,开始执行下载的脚本
脚本执行完毕,浏览器恢复解析HTML网页
对于defer标记,浏览器的解析过程是这样的:
浏览器开始解析HTML网页
解析过程中,发现带有defer属性的script标签
浏览器继续往下解析HTML网页,同时并行下载script标签中的外部脚本
浏览器完成解析HTML网页,此时再执行下载的脚本
由于使用了async或defer的script会放在header中,而header又会存在外链css,那么二者有顺序要求吗?
header中script和外链css的位置顺序
先说结论:
如果在html的header中同时有js脚本和外链css,js脚本最好放外链css前面。
其实js的执行是依赖css样式
的。即只有css样式全部下载完成后才会执行js。
因为如果脚本的内容是获取元素的样式,宽高等CSS控制的属性,浏览器是需要计算的,也就是依赖于CSS。浏览器无法感知脚本内容到底是什么,为避免样式获取错误,因而只好等前面所有的样式下载完后,再执行JS。
但是如果css下载事件很长的话,js也无法正常运行,导致html无法正常解析出来。如果css的内容下载更快的话,是没影响的,但反过来的话,JS就要等待了,然而这些等待的时间是完全不必要的。
(啾咪 ^.<)
天了噜,为什么外链css要放在头部,js要放在尾部?的更多相关文章
- 那些年因为粗心导致的外链css无效
css文件三种引用的三种方式: 1.外链: <link rel= "stylesheet" href=""> 注:如果使用外链式绝对不可以忘记 re ...
- JavaScript获取css 行间样式,内连样式和外链样式的方式
[行间样式获取] <div id='div1' style="backgroud:red">测试</div> <script> var odiv ...
- 手动获取酷我Mp3外链
素材→http://player.kuwo.cn/webmusic/st/getNewMuiseByRid?rid=MUSIC_随便找一首歌http://www.kuwo.cn/yinyue/1034 ...
- JS:操作样式表3:内联和外链样式
var box = document.getElementById("box"); box.style.属性;只能读取修改行内样式. //访问元素样式2,对外链样式表进行操作 do ...
- js获取元素的外链样式
一般给元素设置行内样式,如<div id="div1" style="width:500px;"></div>.如要获取它的样式,即可d ...
- 利用js查找页面中的内链,外链
起初没听说过内链外链,只有链接锚文本,在面试中被问到如何查找到页面中的内链和外链,就在想,什么是内链和外链啊??????? 后来面试官给我解释了一下他们的区别,自己稍微懂了,自己当时回答的是通过获取a ...
- 小讲堂:Mobox文档管理软件中的文件外链是什么?
今天我们来讨论Mobox文档管理软件中的文件外链是什么?熟悉MOBOX的朋友们应该知道,如果有文件需要分享给其他同事,直接可以进行文件共享.对方会在AM的即时通讯客户端有消息提醒,点击消息提醒可以看到 ...
- SVN外链
1 外链使用场景 使用Subversion进行版本管理时,有时需要将一些公共库或者开源库链接到自己项目中,为了同时做到与外部库实时更新,使用Subversion的外链功能,从而将外部的库当做本地项目的 ...
- jQuery外链新窗口打开
对于外链,为了留住用户在本站,我们通常会使用新窗口打开,你可以设置target="_blank".然而手动一个是麻烦,另一个则是有可能会遗漏,本文通过jQuery查询要点击的链接, ...
随机推荐
- yii2中commands的简单应用
class HelloController extends Controller { /** * This command echoes what you have entered as the me ...
- [翻译]Jupyter notebook .NET Core 内核预览1
当您想到Jupyter Notebooks时,您可能会考虑使用Python,R,Julia或Scala而不是.NET编写代码. 今天,我们很高兴宣布您可以在Jupyter Notebooks中编写.N ...
- webPack 4.0的零基础学习
webPack 也更新到了4.0阶段,今天看了一下官网,总结一下,零基础的学习路径吧. (1)首先需要下载 webPake和webpack cli npm install webpack webpac ...
- vps配置脚本备个份
#!/bin/bash apt-get update -y apt-get dist-upgrade -y apt-get install -y nmap vim build-essential gc ...
- android 7.0 pm install 失败问题
这两天,把app内置成系统文件或者系统签名取得系统权限,发现使用pm install path在低版本上可行,在高版本就安装失败 抛出 NullPointException,查看了一下源码,发现对包名 ...
- 「刷题」卡特兰数&prufer序列
1.网格 转换模型,翻折容斥出解. 2.有趣的数列 抽象一下模型,把奇数项当作横坐标,偶数项当作纵坐标,就是从n*n矩阵左下角走到右上角并且每一步x<=y的方案数,发现是卡特兰数,关于gcd,可 ...
- 区块链之Hyperledger(超级账本)Fabric v1.0 的环境搭建(超详细教程)
https://blog.csdn.net/so5418418/article/details/78355868
- day 2 下午 骑士 基环树+树形DP
#include<iostream> #include<cstdio> #include<cstring> #include<cstdlib> #inc ...
- CSS尺寸样式属性
尺寸样式属性介绍 属性 值 含义 height auto:自动,浏览器会自动计算高度length:使用px定义高度%:基于包含它的块级对象的百分比高度 设置元素高度 width 同上 设置元素的宽度 ...
- markdown 编辑器概述
markdown 编辑器概述 编辑器其实很多很多,主要分为 网页编辑和软件编辑 (效果其实感觉效果差不多,看个人喜好,笔者个人还是喜欢本地,感觉方便挺多的) ## 网页编辑器 主要有 C ...