作为前端开发人员,我们在写页面的时候经常见到一些标签,但不一定知道它有什么作用,或者只知道一些标签的某部分功能。今天就介绍两个比较常见的标签,一个是DOCTYPE
,一个是<script>
。
- DOCTYPE标签
<!DOCTYPE>
是表示文档类型的标签,它的作用是告诉浏览器应以什么类型的文档来解析文档。不同的文档类型会影响浏览器对CSS,甚至是Javascript的解析。
在使用DOCTYPE是应确保让其置于HTML的顶端,如果有任何字符在它前面,会导致IE9或更早期的浏览器触发怪异模式。
有两种类型:
1)标准类型。浏览器以W3C标准来解析文档,浏览器会以最高标准来解析文档
2)怪异类型。在解析文档时,浏览器会采用向后兼容的方式来解析。
- script标签
在写JS代码时,肯定是会用到这个标签的,但我们通常用的是不带任何属性的script标签。其实,它还有两个属性,分别是defer
和async
。不同的属性,浏览器会采用的不同的方式来加载和执行JS脚本。
1)不带任何属性
script标签不带任何属性时,当浏览器识别到它时会暂停文档的解析,开始加载script指向的JS代码,当加载完毕后,接着开始执行,当执行完毕后才会接着解析剩下的文档。
2)带defer属性
当script标签带有defer
属性时,即<script defer>
,JS代码的加载是异步的。就是说,JS代码的加载不影响DOM文档的解析,当文档解析完毕后,才会执行JS代码。
3)带async属性
JS代码的加载也是异步的,与defer
不同的是,在加载完JS代码后立即执行,执行结束会再继续解析文档。
下面这张图可以直观地看出三者之前的区别。图中,青色部分是文档的解析,蓝色部分是JS脚本的加载,红色部分是JS脚本的执行。