一、CSS和JS在网页中的放置顺序是怎样的?
1.CSS样式一般放置在head标签之间。
2.JS一般放置在body标签内的最后面。
3.浏览器是从上到下渲染内容的,CSS放在前面打开浏览器就可以看到一个样式完整的页面,而不会因为网速过慢而看到只是一个简陋的页面内容。JS放在body内容的底部,可以防止其阻塞body内标签内容的加载。
二、解释白屏和FOUC
1.白屏:CSS放入文档的底部,因为浏览器渲染页面内容都是至上而下的,所以当浏览器还没有渲染到底部的CSS部分时,页面打会出现白屏。
同样,如果使用@import标签,link引入css并且放在文档顶部,也有可能出现白屏现象。
2.FOUC:将css样式放入文档底部,会先加载页面内容,再加载css样式后,然后网页内容突然显示出样式,因此内容会出现闪烁 , 对于Firefox会一直表现出FOUC。
三、async和defer的作用是什么?有什么区别
1.async和defer是<script>标签的两个属性,用于指定脚本文件的加载方式。正常情况下,浏览器从上到下解析HTML文件,当解析到<script>标签的时候会立即下载并执行脚本,只有当加载执行脚本之后浏览器才能继续解析<script>标签之后的文档内容,而async和defer属性就是改变这种加载方式的作用。
2.区别
- async是HTML5新增的属性,它的作用是能够异步的加载和执行脚本,不因为加载脚本而阻塞页面的加载。一旦加载到就会立即执行。不影响页面的其他操作。
- defer如果给script标签添加了defer属性,即使js放在head里面,它也会在HTML页面解析完毕之后再执行,也就是类似于把这个js放在了页面底部。简单来说就是等页面的html和css加载完毕之后再加载js。
三、简述网页的渲染机制
1.解析HTML标签,构建DOM树。
2.解析CSS标签,构建CSSOM树。
3.把DOM和CSSOM组合成渲染树(render tree)。
4.在渲染树的基础上进行布局,计算每个节点的几何结构。
5.把每个节点绘制到屏幕上(painting)。
四、JavaScript 定义了几种数据类型? 哪些是简单类型?哪些是复杂类型?
1.五种简单类型
- Null(值只有一个“null”,表示空指针,不存在的东西。)
- Undefined(值只有一个“Undefined”,表示变量只是被声明,没有赋值。)
- Boolean(布尔值有两个:true和false)
- Number(数字类型)
- String(字符类型,用“”或者‘’表示)
2.一种复杂类型
- object(对象)
六、NaN、undefined、null分别代表什么?
1.NaN属性是代表非数字值的特殊值。该属性用于指示某个值不是数字。可以把Number对象设置为该值,来指示其不是数字值。
2.undefined表示变量只被声明,而没有赋值。
3.null表示这个东西不存在。
七、typeof和instanceof的作用和区别?
1.typeof 检测一个变量的数据类型。
2.instanceof 主要目的是检测引用类型,判断对象是数组(Array),对象(object),函数(function)。
3.区别:typeof和instanceof的目的都是检测变量的类型,二者的区别在于typeof一般检测的是基本数据类型,instanceof主要检测的是引用类型。