任务16 js语法-简答题

2016-11-10 本文已影响0人 GarenWang

一般而言，CSS放置在网页文档的头部，JS放置在网页文档的后面，CSS放在文档的头部，能够确保用户更早的看到页面，提高用户体验，但缺陷是若放置的CSS文件过多，过大，会延长屏幕的白屏时间，同时也有时引入插件，也需要把JS放在头部，如Jquery的引入，一般放在头部，因为后面的JS代码依赖于jquery.
原因是由于浏览器的解析方式是自上而下的加载html文档，CSS是并行加载，而JS是阻塞加载，会影响页面的加载速度，如果JS的文件较大，很容易出现FOCU的现象，并且JS还有可能修改DOM，JS的执行可能依赖于最新的样式，这样需要保证在JS代码执行前必须所有的CSS样式加载和解析完毕。
综上，CSS和JS的放置顺寻根本目的是为了提高页面的加载速度，所以必要的CSS和JS放置在头部，把不重要的CSS和js放在底部。
一般放置方式，如图：
![1%B(5Q5]F1W42EZV(IS4H{O.png](https://img.haomeiwen.com/i3361706/29f43a7a55b85de3.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
引用jQuery等库时：

KX~OD87Z)TTQT_7)FP`HN%T.png

白屏与无样式内容闪烁(FOUC)是因为不同浏览器加载与显示页面的机制不同而造成的
白屏：如果把样式放在底部,对于IE浏览器,在某些场景下(新窗口打开,刷新等)页面会出现白屏,而不是内容逐步展现如果使用 @import标签,即使 CSS 放入 link, 并且放在头部,也可能出现白屏。这是由于优先解析@import标签的文件，若文件过大，过大，就会导致加载时间过长，产生白屏。
FOUC：全称无样式闪烁，把样式放在页面底部，IE浏览器下点击点击链接会出现FOUC现象，Firfox会一直白屏。一种情况是由于将JS放在底部，会阻塞后面内容的呈现和其后组件的下载，产生FOUC现象；

一般情况下JS文件没有async和defer，会立即加载文件并解析，不扥带后面的文件的加载，即读到就执行，有了async和defer可以实现异步加载， async加载和渲染后续文档元素的过程将和 script.js 的加载与执行并行进行（异步）， defer加载后续文档元素的过程将和 script.js 的加载并行进行（异步），但 script.js 的执行要在所有元素解析完成之后，DOMContentLoaded 事件触发之前完成，最终目的提高页面的加载速度和流畅性。使用方式如下:<script async src="app.js></script>,<script defer src="app.js></script>
二者的区别是，defer的JS文件延迟到文档解析和显示有先后顺序，async不保证顺序。

解析 HTML 标签, 构建 DOM 树
解析 CSS 标签, 构建 CSSOM 树
把 DOM 和 CSSOM 组合成渲染树 (render tree)
在渲染树的基础上进行布局, 计算每个节点的几何结构
把每个节点绘制到屏幕上 (painting）
渲染机制图：
![VA4BMG]D4O]@G_LMI`K0W5.png](https://img.haomeiwen.com/i3361706/f118a4320e6d5c10.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

数据类型有6种
简单类型5种，null, undefined,boolean,string,number
复杂类型1种，object
简单类型中，undefined指的是变量未被赋值时，表示“未定义”或不存在，即此处目前没有任何值，会出现undefined,null是空值，不等同于undefined，空值表示空缺，即此处应该有一个值，但目前为空，而undefined只是没有赋值，不存在，所以二者不同
boolean，即布尔逻辑值，就是经常可见的false和true
number ,即数字，如1,2,3
string，字符串，如“hello world”
object，对象，如“ var obj={name:"小明",age:10}”

NaN含义是Not a Number，表示非数字，NaN和任何值都不相等，包括自己，undefined：表示“未定义”或不存在，即此处目前没有任何值，null：表示空缺，即此处应该有一个值，但目前为空，
类型不同，NaN是一中number类型，null属于特殊的object，undefinded属于undefined类型
进行比较运算时，非严格相等情况下：undefined==null,NaN与任何值都不相等，与自己也不相等。

typeof 运算符可以返回一个值的数据类型,,可以是任意类型，如type 100 //"number"
instanceof运算符:此运算符可以判断一个变量是否是某个对象（类）的实例，返回值是布尔类型的,如var str=new String("hello");console.log(str instanceof String)代码输出的结果为true,因为str是对象String的对象实例。一般说来只有使用构造函数创建的对象才会返回true，否则返回false，不过数组是一个例外，都会返回true.