- CSS和JS在网页中的放置顺序是怎样的?
主要取决于哪个文件需要先被浏览器渲染,一般情况下css需要先被浏览器渲染,否则网页可能会出现先加载html而没有css样式的情况,然后如果把js也放在前面,会导致下载的时间太长,页面一直没有内容,出现白屏的情况,所以- css放在<head>标签中先加载
- js放在</body>之前加载
- 解释白屏和FOUC
- 白屏的主要原因是浏览器阻塞,每当在<head>标签有script的外部文件的时候,浏览器就需要产生一个网络请求,而如果这个外部文件不下载执行完成是不会执行接下来的htm文件的,所以如果在<head>标签中有较大的script外部文件或者较多的script文件,就有可能因为浏览器阻塞而产生白屏
- FOUC(Flash Of Unstyled Content),就是无样式内容闪动,当CSS文件放在页面尾部,html会先被加载和渲染出来,直到遇到一个CSS文件,才会把CSS的规则渲染在html文件上,所以如果把css放在页面尾部,就可能出现这样短暂的闪动
- async和defer的作用是什么?有什么区别
我们先来看当浏览器加载页面发生了什么,浏览器搜先获取一个html文件,然后开始解析这个html文件,直到解析器遇到一个引用外部文件的<script>标签,然后浏览器会下载并执行这个外部的js文件,与此同时,浏览器会停止继续解析剩下的html文件直到外部的js文件执行完毕,之所以解析器遇到外部的script浏览器会发生阻塞是因为外部的js文件中可能有document.write()
或者对DOM的操作,也些比较老的建议是把外部的script文件放在</body>之前,但是对于大型网站来说,能够尽快下载并执行js文件是很重要的,script标签中的async和defer属性相当于告诉浏览器可以放心的先执行接下来的代码,所以不会照成浏览器阻塞-
async,表示的是异步下载js文件,但是有async属性的js文件是谁先下载好谁先执行,下图中的script2.js就有可能比script1.js先执行,所以如果对js的执行顺序有要求的话,就不能使用async属性
这是在caniuse查询的兼容性,在IE<10的版本不支持这个属性
-
defer,表示的是当整个html文件加载完成后再执行js文件,注意,会立即加载但不会马上执行。但是js文件的执行是有顺序的,下图中的script1.js会比script2.js先执行
这是在caniuse查询的兼容性,在IE<10只有部分支持,可能会交错的执行脚本
-
- 简述网页的渲染机制
这主要是渲染引擎的工作,不包括js引擎- 解析html构建dom tree,解析css构建cssom tree
- 把dom tree和cssom tree结合成render tree
- 布局render tree
- 绘制render tree
参考:
浏览器渲染机制
高性能WEB开发系列
- JavaScript 定义了几种数据类型? 哪些是简单类型?哪些是复杂类型?
- Number
- String
- Boolean
- Undefined
- Null
- Object
JS定义了6种数据类型,一个数据的类型必定是上面的一种,其中Number、String、Boolean、Undefined、Null是简单的数据类型,Object是复杂类型
- NaN、undefined、null分别代表什么?
-
NaN,是number类型中一个特殊的值,即Not A Number,表示本来要返回数值却没有返回数值的情况,主要出现在字符串解析成数字出错的场合
NaN有两个特点,第一,任何与NaN有关的操作返回的都是NaN,第二,NaN不与任何数相等,包括他的本身
ECMAscript定义了一个isNaN()的函数,在该函数接受一个参数,可以判断参数是否是非数值,isNaN()接收到一个值之后,会尝试把这个值转换为数值
-
undefined,如果一个变量声明了但是未赋值,那么这个变量的值就是undefined,注意,如果变量未声明就直接调用会抛出错误
- null,如果一个变量将用来保存对象,最好将该对象初始化为null,这样,直接判断一个变量是否为null就可以知道该变量是否保存了对一个对象的引用
-
- typeof和instanceof的作用和区别?
-
typpeof,是一个操作符,所返回的值有'number','string','boolean','undefined','obejct','function',因为js的变量类型是松散的,所以就需要一种手段来检测给定变量的数据类型,常用来判断简单的数据类型
-
instanceof,typeof只能判断一个变量是对象,但是往往我们想知道是哪种引用类型的对象,所以就需要instanceof,判断一个变量是否是一个引用类型的实例,instanceof也是一个操作符
-