一、问答
（一）CSS和JS在网页中的放置顺序是怎样的？
1、对于css：当引用css文件时，应放在文件的头部<head>标签内，当直接在html文档中书写时则应在<head>内新建一个<style>标签，再将其放在<style>标签中；
2、对于js：考虑到js会阻塞后面的内容的加载，因此通常将js放在<body>元素中页面的内容的后面，当然这也不是绝对的，例如个别特殊JS，比如用于调试的基础脚本（部署时未必有）、性能日志之类，必须放在尽量最前的位置。再比如 html5-shim脚本必须在body之前加载。
另外，虽然将js放在<body>元素中页面的内容的后面是比较推荐的做法，但对于一些老的浏览器，IE8以下，js与js间也会相互阻塞，这时可采用“动态加载”或“LABjs库的”方法，具体可详见：并行加载与顺序执行–《高性能javascript》读书笔记
值得注意的是有些网站制作开发者从性能优化的角度倾向于加defer，不过不是所有的脚本都能这样做。比如history api的兼容实现等都不应defer，因为你不能确保用户在页面ready之前没有back/forward动作。再如jQuery，defer是可以，但也意味着你所有依赖jQuery的功能都需要defer，考虑到这些静态文件通常都是有缓存的，所以不defer也未必不是一个可以接受的折衷。
另：虽然js能够支持不使用外部引用的方式（即采用嵌入HTML的方式），但还是推荐使用外部引入的方式，因为这样1、可维护性相对较好；2、可缓存；（但两个页面使用同一个js时，当一个页面下载了，另一个页面可共用该缓存）；3、适应未来；
（二）解释白屏和FOUC
-
1、 白屏
a、如果将样式放在页面底部，使用IE浏览器进行刷新、新建窗口打开时均会出现白屏，出现白屏的原因是因为IE想要等待所有样式及内容全部解析后才呈现出来，否则会出现FOUC的现象；
b、如果使用 @import 标签,即使 CSS 放入 link, 并且放在头部,也可能出现白屏；
c、如果将js放在页面的头部也会可能出现白屏现象，因为js会阻塞后面内容的加载，直至其自身被加载完成后（当然如果在js中使用 defer 或 async则另当别论） -
2、 FOUC
FOUC 全称为Flash of Unstyled Content，即无样式内容闪烁，出现这种情况的原因是将样式放在了页面的底部，浏览器在加载页面时先加载了内容，然后才加载样式，从而导致这样的情况发生；对于IE浏览器，如果采用输入URL、使用书签及点击链接等方式易出现 FOUC；对于火狐则一直表现出这样的情况。原因是火狐考虑到用户体验，采用逐步加载页面中的组件的方式；
另： 一个style块可以包含多个@import规则，但@import规则必须放在所有其他规则之前。 使用@import规则需要注意的是：即便把@import规则放在文档的HEAD标签中，可能导致页面组件下载时的无序性，进而导致白屏（对于IE）和FOUC(对于FF)问题的产生。 为了很好的避免白屏和FOUC问题，请遵循以下规则： 使用LINK标签将样式表放在文档的HEAD中。
（三）async和defer的作用是什么？有什么区别？
- async---异步脚本，作用是：告诉浏览器立刻下载其指定的js，与此同时会同步加载页面的内容部分，不会因为js的存在而导致浏览器必须先下载并执行js后再加载后面的内容；（因此建议异步脚本不要在加载期间修改DOM）
- defer--延迟脚本，作用是遇到js时立即下载，但延迟到</html>之前的内容全部加载完后再执行；这样不会因此js的存在导致阻塞了后面的页面内容的呈现；
值得一提的是，async和defer均只适用在外部js文本，不支持嵌入式脚本；【对于defer，老版本浏览器（如IE4~7）除外】
- 区别：
1、执行时间不一样：async的js在下载完后会立即执行（因此脚本在代码中的顺序并不是脚本所执行的先后顺序，有可能后面出现的脚本先执行），但defer则要等待整个页面内容及样式全部加载完后再执行；（HTML5规范要求脚本执行应该按照脚本出现的先后顺序执行，但实际情况下，延迟脚本不一定按照先后顺序执行！！！）
2、HTML版本不一样：html的版本html4.0中定义了defer；html5.0中定义了async；
3、浏览器支持情况不一样
浏览器支持情况不一样.png
（四）简述网页的渲染机制
一个网页的渲染机制基本是这样的：解析HTML以构建DOM树--构建render树--布局render树 --绘制render树 ；
Paste_Image.png
首先解析HTML，解析时将标签作为内容树中的BOM节点，然后解析css样式，这些css样式及HTML可见性指令被用来构建render树，render树由一些大小和颜色等属性组成的矩形按照顺序投影至屏幕上，render树构建好后，将进行布局过程，它将确定各个节点在屏幕上并进行下一步骤--绘制，也即遍历render树，并使用UI后端层绘制每个节点；需要说明的是，为了用户体验，并不是等待HTML完全解析完才绘制render树的，而是解析完一部分内容就展示一部分内容的；
具体可详见：http://taligarsiel.com/Projects/howbrowserswork1.htm
http://www.html5rocks.com/zh/tutorials/internals/howbrowserswork/?from=timeline&isappinstalled=0
Webkit内核流程：
Webkit内核.png
Mozilla's Gecko内核流程
Mozilla's Gecko内核.png
CSSparsing过程.png
（五）JavaScript 定义了几种数据类型? 哪些是简单类型?哪些是复杂类型?
定义了2大类型，一个是简单型另一个是复杂型，简单型里包括Null型、Undefined型、Number型、String（字符串型）、Boolean（布尔型）；复杂型其实指Object型，里面包括函数、狭义对象及数组。
（六）NaN、undefined、null分别代表什么?
- NaN---非数值（Not a Number）属于Number类型的特殊的一种类型，它用来表示本来应该返回数值的操作数未返回数值的情况（这样就不会报错了，继而会继续执行其他的代码，在其他语言有可能会报错导致后面的代码停止执行），比如任何数值除以非数值会返回NaN；例如：
var wo="peple" //
undefined
0/wo
NaN
wo/0
NaN
以上，一个数值除以一个字符串，则返回了NaN；
- undefined表示使用var声明了变量，但未给它进行初始化（即赋值给它）
如下面的例子：
var a;
undefined
a
undefined
- null表示空对象指针（虽然它并不是对象，但从逻辑的角度讲它是一个对象，因此typeof它时，返回的值是Object--如下图所示），如果在意保存对象的变量还没有真正保存对象，可明确的让该变量值为null；
Paste_Image.png
（七）typeof和instanceof的作用和区别?
- typeof的作用是可以展示数据是什么类型，但是对于null、Array数组、对象它均识别成Object；typeof可以返回的值有：undefined、number、object、Boolean、string、function；
对于null，typeof返回为object.png
对于数组返回object.png
对象返回对象.png
另：一般来说使用typeof的操作是直接量形式的话能够返回准确的结果，如果是使用构造函数创建的对象则会返回"object"，不过对于数组来说是个例外，无论是否是直接量都会返回"object"。
- instanceof可以判断某个变量是否是个对象或者一个对象是否是个数组；
如下面的例子：
Paste_Image.png
判断suzu是否为数组.png
另：它还可以判断一个变量是否是某个对象（类）的实例，返回值是布尔类型。
var str=new String("antzone");
console.log(str instanceof String);
以上代码会输出true，因为str是对象String的对象实例。一般说来只有使用构造函数创建的对象才会返回true，否则返回false，不过数组是一个例外，都会返回true。
再如：function test(){};var a=new test();alert(a instanceof test)会返回true。谈到instanceof我们要多插入一个问题，就是function的arguments，我们大家也许都认为arguments是一个Array，但如果使用instaceof去测试会发现arguments不是一个Array对象，尽管看起来很像。
另外：
测试 var a=new Array();if (a instanceof Object) alert('Y');else alert('N');
得'Y’
但 if (window instanceof Object) alert('Y');else alert('N');
得'N'
所以，这里的instanceof测试的object是指js语法中的object，不是指dom模型对象。
使用typeof会有些区别
alert(typeof(window) 会得 object；
- 区别：1、很明显，综上所述，大部分它们的使用场景不一样；2、输出结果不一样---typeof会输出6种值即undefined、number、object、Boolean、string、function，而instanceof只会输出两者值要么true要么false；3、语法结构不一样---typeof 的结构为 “typeof 测试对象；”，而instanceof的结构为“测试对象 instanceof 类型”；
二、代码
（一）完成如下代码判断一个变量是否是数字、字符串、布尔、函数 （难度*）
ps: 做完后可参考 underscore.js 源码中部分实现
function isNumber(el){
// todo ...
}
function isString(el){
//todo ...
}
function isBoolean(el){
//todo ...
}
function isFunction(el){
//todo ...
}
var a = 2,
b = "jirengu",
c = false;
alert( isNumber(a) ); //true
alert( isString(a) ); //false
alert( isString(b) ); //true
alert( isBoolean(c) ); //true
alert( isFunction(a)); //false
alert( isFunction( isNumber ) ); //true
具体代码详见：http://book.jirengu.com/jirengu-inc/jrg-renwu5/%E6%9D%8E%E5%BD%A9/renwu16/renwu16-1.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div></div>
<script>
var a=2,
b="jirengu",
c=false;
function isNumber (el) {
return typeof el=="number";
}
function isString (el) {
return typeof el=="string";
}
function isBoolean(el){
return typeof el =="boolean";
}
function isFunction (el) {
return typeof el=="function";
}
alert(isNumber(a));
alert(isString(a));
alert(isString(b));
alert(isBoolean(c));
alert(isFunction(a));
alert(isFunction(isNumber));
</script>
</body>
</html>
（二）以下代码的输出结果是?（难度**）
console.log(1+1); //2
console.log("2"+"4"); //24 加了""表示字符串了，不会把它当作数字；
console.log(2+"4"); //24
console.log(+new Date()); // 1470310918153
console.log(+"4");// 4
（三）以下代码的输出结果是? （难度***）
var a = 1;
a+++a;
typeof a+2;
结果是："number2"，原因是：typeof运算级高于赋值及+++等，因此a在typeof上并未来得及赋值，因此a为number；
（四）遍历数组，把数组里的打印数组每一项的平方 （难度**）
var arr = [3,4,5]
// todo..
// 输出 9, 16, 25
打印版.png
未打印版.png
（五）遍历 JSON, 打印里面的值 （难度**）
var obj = {
name: 'hunger',
sex: 'male',
age: 28
}
//todo ...
// 输出 name: hunger, sex: male, age:28
Paste_Image.png
（六）下面代码的输出是? 为什么 （难度***）
var a = 1;
console.log(a);
console.log(b);
输出结果一个是1，另一个报错，显示“b is not defined(…)”；原因如下
var a = 1; //将1赋值给了a，此时a为1；
console.log(a);//输出时，将1输出；
console.log(b);//输出时，因为b未定义为变量，且b为一个普通的字母，不代表任何含义，因此会出现错误说b没有被定义；
（七）、obeject.key与object[key]有什么区别
1、当对象的属性key不确定而是一个变量的时候必须使用[]
属性名为变量
2、[]里可以是任意字符串，而. 不能
3、使用. 号key可以不加引号 使用[] key有时候必须要加引号
例如：
var a=[{ "0": "./images/1卧室/母子床1.jpg" }, { "1": "images/1卧室/母子床1.jpg" }]
Paste_Image.png
**本文版权归本人即简书笔名：该账户已被查封 所有，如需转载请注明出处。谢谢！ *
网友评论