面试必备! HTML常见面试题汇总

·  阅读 1641

基本按所有面经出现的频率来进行汇总

一、 script标签为什么要放在body标签的底部,【defer async】

因为浏览器在渲染html的时候,从上到下依次执行,遇到js文件就会停止当前页面的渲染,转而去下载js文件,如果将script标签放在头部,如果文件又很大的情况下,首屏时间就会延长,影响用户体验。 解决方法:

  1. 将script标签放到body的底部
  2. 通过defer\async属性将js文件转为异步下载

defer\async的区别 首先都是让js文件能够异步下载,不阻塞页面的渲染 区别就是defer必须等待整个文档渲染完成后才执行 而async在下载完成后,会暂停html的解析,转去执行js

一图胜千言:

也就是说 下载的处理二者是相同的,主要是执行的时间不同,async执行的时候还是要阻塞html的解析,defer就是安排到最后才执行。 另外如果两个属性同时设置,以async为准。

二、 src 和 href的区别

href是超文本引用,它指向资源的位置,建立与目标文件之间的联系。 src目标是把资源下载到页面中 浏览器解析方式 href 不会阻塞对文档的处理(这就是官方建议使用link引入而不是@import) src 会阻塞对文档的处理,原理同1

还有一些 重要结论

  • <script>标签会阻塞DOM的解析和渲染;

  • 带src属性的<script>标签会触发页面paint,渲染此<script>标签之前的元素,但也有一定的条件:

    <script>标签是在<body>中的,<head>中的不会触发paint;

    <script>标签之前的<link>标签需加载完毕。

  • inline的<script>标签不会触发页面paint,页面必须等到脚本执行完毕,且DOM Tree和CSSOM Tree解析完毕后才会渲染;

  • <link>标签不会阻塞DOM的解析;

  • <link>标签会阻塞DOM的渲染;

  • <link>标签同时还会阻塞其之后的

三、 DOCTYPE 标签

这个声明的目的是防止浏览器在渲染文档时,切换到我们称为“怪异模式(兼容模式)”的渲染模式。“",确保浏览器按照最佳的相关规范进行渲染,而不是使用一个不符合规范的渲染模式。 Doctype声明于文档最前面,告诉浏览器以何种方式来渲染页面,这里有两种模式,严格模式和混杂模式。 严格模式的排版和JS 运作模式是 以该浏览器支持的最高标准运行。

混杂模式,向后兼容,模拟老式浏览器,防止浏览器无法兼容页面。

分类:
前端
标签: