task16-JS语法

CSS和JS在网页中的放置顺序是怎样的？

CSS以link方式放在头部，否则有可能出现白屏或者FOUC(无样式内容闪烁)。
JS放在底部，否则有可能会出现脚本阻塞后面内容的呈现或者阻塞其后组件的下载。

解释白屏和FOUC。

为何出现白屏和FOUC（无样式内容闪烁）
** 白屏 **
1、如果把CSS样式放在底部，对于IE浏览器，在某些场景下（新窗口打开，刷新等）页面会等到html和css加载完成后再进行渲染，造成页面内容不会逐步展现；如果使用@import标签，即使CSS放入link,并且放在头部，也可能出现白屏;
2、如果把JS放在网页头部或者html中，在加载JavaScript时，会禁用并发，并且阻止其他内容的下载，出现白屏；

解析JS时出现白屏

** FOUC (Flash of Unstyled Content) 无样式内容闪烁 **
如果把样式放在底部,对于IE浏览器,在某些场景下(点击链接,输入URL,使用书签进入等),会出现 FOUC 现象(逐步加载无样式的内容,等CSS加载后页面突然展现样式).对于 Firefox 会一直表现出 FOUC 。
参考文章
浏览器渲染过程
浏览器是怎样工作的：渲染引擎，HTML解析（连载二)

async和defer的作用是什么？有什么区别？

在浏览器中如果没有特别声明，js文件会和html同步加载解析，在文件头部或者中间时运行JS有可能会出现白屏。
有 async，加载和渲染后续文档元素的过程将和 script.js 的加载与执行并行进行（异步）。
有 defer，加载后续文档元素的过程将和 script.js的加载并行进行（异步）,但是 script.js的执行要在所有元素解析完成之后，DOMContentLoaded事件触发之前完成。
** 区别 ** async虽然加载异步，但是执行没有顺序。defer 加载异步，但是执行在所有元素解析完成之后。所以一旦页面渲染依赖该script脚本，则不可用async，只能用defer。

简述网页的渲染机制

浏览器的通常渲染过程：

1. 浏览器解析html源码，然后创建一个 DOM树。
2. 浏览器解析CSS代码，计算出最终的样式数据，创建一个CSSOM树。解析CSS的时候会按照如下顺序来定义优先级：浏览器默认设置，用户设置，外链样式，内联样式，html中的style。
3. 构建出DOM树，并且计算出样式数据后，下一步就是构建一个渲染树（rendering tree）。
4. 一旦渲染树创建好了，浏览器就可以根据渲染树直接把页面绘制到屏幕上。

** DOM树和渲染树的区别 **

• 每一个html标签对应一个DOM节点，每一个文本也会有一个文本节点，DOM树的根节点就是 documentElement，对应节点是html标签。
• 渲染树会忽略掉不需要渲染的元素，比如head、display:none的元素等。而且一大段文本中的每一个行在渲染树中都是独立的一个节点。渲染树中的每一个节点都存储有对应的css属性。

参考文章：浏览器渲染页面的过程，以及重绘和重排

JavaScript 定义了几种数据类型? 哪些是简单类型?哪些是复杂类型?

JS定义了两大类数据类型
简单类型

• Number (数字类型)
• String(字符串类型)
• Boolean(布尔类型)
• Null
• Undefined
  复杂类型
• Object
  • Array(数组)
  • Function(函数)
  • object （狭义对象）

NaN、undefined、null分别代表什么?

• NaN not a number 非数字类型

  
  
  

  NaN

• undefined 只声明未赋值，没有初始化

  
  
  

  undefined

• null 空类型,指不存在的东西；空指针,未指向任何内容,可用于取消对象的引用。

  
  
  

  undefined和null

typeof和instanceof的作用和区别?

** typeof 运算符返回一个用来表示表达式的数据类型的 字符串 **。判断一个变量的类型常常会用 typeof 运算符，但无论引用的是什么类型的对象，它都返回 “object”。

typeof

关于typeof字符串

** instanceof **它是用来判断对象是否是某个类型的实例，它返回的是一个布尔值；是 JavaScript 语言中原生的用来判断实例继承关系的操作符。

instanceof常规用法

参考文章JavaScript instanceof 运算符深入剖析

代码题

1.代码一题

判断一个变量是否是数字、字符串、布尔、函数

2.代码二题

console.log(1+1); //2
console.log("2"+"4"); //"24"（字符串join）
console.log(2+"4"); //"24"（2转换成字符串然后join）
console.log(+new Date());//1467943817909(用new Date() 会转换为从1970.1.1开始的毫秒数)
console.log(+"4");//4

3.代码三题

var a = 1;//赋值
a+++a;//（a++）+a=1+2=3;a=2
typeof a+2;//number2(其中typeof 比+优先级高，+是连接符号，如果变成-等运算符号，就会输出NaN)

typeof 示例

4.遍历数组，把数组里的打印数组每一项的平方

遍历var arr = [3,4,5]输出每一项平方

5.遍历 JSON, 打印里面的值

遍历JSON并输出

6.下面代码的输出是? 为什么？

console.log(a);//undefined,变量声明提前，未赋值
var a = 1;
console.log(a);//1
console.log(b);//报错,不存在

** 本教程版权归博主和饥人谷所有，转载须说明来源。**