JavaScript学习整理1

一、关于CSS和JS在网页中的放置顺序。

1. 通常将css放在页面的上面里，js放在下面挨着。2.如果遇到css文件很多很大，会加大白屏时间，也会放在底部。而有的js必须放在页面之前加载的，需要放到顶部。可以把必须的js和css放顶部，把不那么重要的css和js放底部。3.js放前面加defer属性。这个属性的用途是表明脚本在执行时不会影响页面的构造。也就是说，脚本会被延迟到整个页面都解析完毕后再运行。但采用这种方法，会有一种缺陷。在有些浏览器中。并不会按照你自己文件的顺序执行下来。并且有的浏览器还会忽略这种属性。
2. 浏览器的解析方式。

• 浏览器端通过HTTP协议向要打开的IP地址所在服务器发起请求，服务器接受到请求之后等待处理，最后向浏览器端发回响应，此时在HTTP协议下，浏览器从服务器接收到 text/html类型的代码，浏览器开始显示此html，并获取其中内嵌资源地址，然后浏览器再发起请求来获取这些资源，并在浏览器的html中显示。
• 遇到js时下载一个，解释一个。因为浏览器需要1个稳定的DOM树结构，而JS中很有可能有代 码直接改变了DOM树结构，比如使用 document.write 或 appendChild,甚至是直接使用的location.href进行跳转，浏览器为了防止出现JS修改DOM树，需要重新构建DOM树的情况，所以 就会阻塞其他的下载和呈现.
• CSS文件的下载也使用连接的话，也是串行下载。样式文件和JS文件一样也是下载完一个解析一个。
• JS函数的执行会阻塞其他渲染，下载。css进行渲染下载时，是不是也会停止其他元素的下载？

3 . 网页的渲染机制。
浏览器解析html页面下载html，在内存中把html代码转化成Dom Tree->解析 CSS 标签, 构建 CSSOM 树->把 DOM 和 CSSOM 组合成 渲染树 (render tree)->在渲染树的基础上进行布局, 计算每个节点的几何结构->把每个节点绘制到屏幕上 (painting)。

4 . js阻塞
引用的外部js放在下面，原因是js会阻塞加载，会影响页面加载的速度，如果js文件比较大，算法也比较复杂的话，影响更大。CSS放在前端是页面渲染时首先是根据DOM结构生成一个DOM树然后加上CSS样式生成一个渲染树，如果CSS放在后面可能页面会出现闪跳的感觉，或者是白屏或者布局混乱样式很丑直到CSS加载完成。
js阻塞下载的原因：
**JS 有可能会修改 DOM. **典型的，可能会有 document.write. 这意味着，在当前 JS 加载和执行完成前，后续所有资源的下载有可能是没必要的。这是 JS 阻塞后续资源下载的根本原因。
JS 的执行有可能依赖最新样式。比如，可能会有 var width = $('#id').width(). 这意味着，JS 代码在执行前，浏览器必须保证在此 JS 之前的所有 css（无论外链还是内嵌）都已下载和解析完成。这是 CSS 阻塞后续 JS 执行的根本原因。
现代浏览器很聪明，会进行 prefetch 优化。性能是如此重要，现代浏览器在竞争中，在 UI update 线程之外，还会开启另一个线程，对后续 JS 和 CSS 提前下载（注意，仅提前下载，并不执行）。有了 prefetch 优化，这意味着，在不存在任何阻塞的情况下，理论上 JS 和 CSS 的下载时机都非常优先，和位置无关。
js非阻塞加载解决方案：用defer标签

二、白屏和FOUC（无样式内容闪烁）问题、加载异步

• 如果把样式放在底部,对于IE浏览器,在某些场景下(新窗口打开,刷新等)页面会出现白屏,而不是内容逐步展现，如果使用 @import标签,即使 CSS 放入 link, 并且放在头部,也可能出现白屏
• 不同的浏览器对于CSS和HTML的处理方式不同，有的是等待CSS加载完成之后，对HTML元素进行渲染和展示（白屏问题）。有的是先对HTML元素进行展示，然后等待CSS加载完成之后重新对样式进行修改（FOUC无样式内容闪烁）
• 如果把CSS样式放在底部,对于IE浏览器,在某些场景下(点击链接,输入URL,使用书签进入等),会出现 FOUC 现象(逐步加载无样式的内容,等CSS加载后页面突然展现样式).对于 Firefox 会一直表现出 FOUC 。
• 如果把js文件放在头部，脚本会阻塞后面内容的呈现，脚本会阻塞其后组件的下载，出现白屏问题。
  加载异步：

 1.
 2.
 

async：加载和渲染后续文档元素的过程将和 script.js 的加载与执行并行进行（异步）。
defer：加载后续文档元素的过程将和 script.js 的加载并行进行（异步），但 script.js 的执行要在所有元素解析完成之后，DOMContentLoaded 事件触发之前完成。
若无defer 或 async，浏览器会立即加载并执行指定的脚本，“立即”指的是在渲染该 script 标签之下的文档元素之前，也就是说不等待后续载入的文档元素，读到就加载并执行。

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

6种数据类型：
数值（number）：整数和小数（比如1和3.14）
字符串（string）：字符组成的文本（比如"Hello World"）
布尔值（boolean）：true（真）和false（假）两个特定值
undefined：表示“未定义”或不存在，即此处目前没有任何值
null：表示空缺，即此处应该有一个值，但目前为空
对象（object）：各种值组成的集合

简单类型都是按值访问，值不能添加属性，值在内存中占据固定的空间大小，在栈中保存，一个变量向另一个变量复制简单类型的值时会创建这个值的副本。复杂数据类型可以由多个值构成对象，js不允许直接访问对象在内存中的位置，在操作对象时，是在操作对象的引用。对象保存在堆内存中，包含引用类型值的变量实际上包含的并不是对象本身，而是一个指向该对象的指针。从一个变量向另一个变量复制引用类型的值，复制的其实是指针，因此两个变量最终都指向同一个对象。
最基本的数据类型(简单类型):数值\字符串\布尔值
特殊值（简单类型）:undefined\null
合成类型(复杂类型):对象

四、NaN、undefined、null

1. NaN：not a number,表示非数字，NaN和任何值都不相等，包括它自己，该属性用于指示某个值不是数字。可以把 Number 对象设置为该值，来指示其不是数字值。语法：Number.NaN。
   NaN == NaN; //false
   typeof(NaN)结果确是number。
   isNaN()来判断这个数字是不是NaN,包含着隐式类型转换Number()。

2. undefined：undefined的类型只有一个值，就是特殊的undefined，使用var申明但未对其加以初始化时，这个变量的值就是undefined。
   对未申明的变量执行typeof返回undefined值。为初始化的变量typeof同样会返回undefined值。原因可能是实际上都没有对他们进行实际性的操作（即初始化）。

3 .null:第二个只有一个值的数据类型，其值为特殊的null。null可以理解为空对象指针。
null是一个表示"无"的对象，转为数值时为0；
undefined是一个表示"无"的原始值，转为数值时为NaN。
Number(null)结果为0,Number(undefined)结果为NaN。

五、typeof和instanceof的作用和区别

1. typeof：
   typeof 是一个一元运算，放在一个运算数之前，运算数可以是任意类型。返回值是一个字符串，该字符串说明运算数的类型，返回结果有number,boolean,
   string,function,object,undefined。可以使用 typeof 来获取一个变量是否已经赋值，如 if(typeof a!="undefined"){alert("ok")}。
2. instanceof ：判断一个变量是否是某个对象（类）的实例，返回值是布尔类型。一般说来只有使用构造函数创建的对象才会返回true，否则返回false，不过数组是一个例外，都会返回true。
   x instanceof y?alert("true"):alert("false"); //x是y的实例？真:假