JavaScript基础,浏览器渲染,数据类型,遍历操作

浏览器的渲染机制:

1.解析HTML标签,构建DOM树,在此过程中,会遍历标签中的元素,直到没有为止,才会进行下个HTML标签的解析。

2.解析CSS样式,构建CSSOM树。

3.将DOM树和CSSOM树结合起来,构建渲染树。

4.在渲染树的基础上进行布局,计算每个节点的几何结构

5.把每个节点绘制到屏幕上,完成渲染

如何放置CSS样式和javascript脚本?

CSS:通常,将CSS写成一个单独的CSS文件,然后通过link引入进来,放在head标签中,此外,通过单独的一个CSS文件便于维护。

javascript:一般放在body标签内的最后,通常会优先选择显示内容,因为javascript是脚本语言,在遇到script标签的时候会解析脚本,由此带来会延迟DOM树的构建以及后面的渲染,所以屏幕可能会呈现短时间的白屏,影响用户体验,所以通常把script标签放在最后,但是,如果有一些比较要的场合,只有一个页面(只有一屏幕,且有一些涉及javascript需要完成的事情的时候(登入页面),且JS文件不是很大,也可以选择放在head标签中),不过通常情况下都放置body标签内的最后面。

解释白屏FOUC

白屏:

1.如果JS放置head中,在加载js文件的过程中,会导致一些时间的白屏,因为会先停止DOM树和CSSOM的构建,会导致白屏

2.使用了@import标签,搜索了一下,放置style标签中,引入了一个CSS文件,导致加载另外一个CSS文件,所以会导致白屏。

3.如果把CSS样式放在底部,对于IE浏览器,在某些场景下(新窗口打开,刷新等)页面会等到html和css加载完成后再进行渲染,造成页面内容不会逐步展现。

FOUC:

在 Firefox 浏览器中,渲染不会等待 CSS 完全加载后才开始,因此如果 CSS 文件没有放在页面开始,就会出现先加载了无样式的页面,在 CSS 出现后又刷新为有样式的页面,因此而出现的就是FOUC (Flash of Unstyled Content,无样式内容闪烁)现象。

此外,如果把样式放在底部,对于IE浏览器,在某些场景下(点击链接,输入URL,使用标签进入等),会出现FOUC现象(逐步加载无样式内容,等CSS加载后页面突然展现样式),对于FireFox会一直表现出FOUC。

 

Javascript有几种数据类型?参考另一个问题:https://segmentfault.com/q/1010000006008255

JavaScript定义了6种数据类型,number,string,boolean,null,undefined,object。

复杂数据类型:object,(array数组属于对象,用来存放数据。)

简单的数据类型:number数字,string字符串,boolean布尔类型,这三个类型是放置在栈内存中,不是引用的。

特殊的数据类型:undefined,null。其中null属于对象类型的一种通过typeof null判断出来是对象,

,所以如果要确定一个变量将来会用来存放对象,也可以预先赋值null,区分开undefined和null。

 

NaNundefinednull分别代表什么?

1.NaN:  首先NaN不等于NaN,然后,NaN是由Number进行数据转换的第一个不是数字产生的。

2.undefined 是一种数据类型,一个变量没有赋值,或者说函数没有声明,不知道什么。

1.变量没有赋值,只声明的时候,会自动赋值为undefined

2.函数没有声明或者访问不到那个函数的时候或者访问不到变量,调用函数的时候,会返回undefined

3.函数没有return东西的时候,会返回undefined.

3.null :是一种数据类型,本身是一个对象,typeof null是对象,可以用来清除引用。

 

typeof和instanceof的区别

typeof用来判断一个元素是function,object,number,string,boolean中的哪一个类型。

instanceof用来判断一个元素是否是某个对象的实例,返回出来值是布尔值。

 

判断数据类型

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"; }

function isObject(el){ return typeof(el) === "object"; }

其中,array属于对象。

 

javascript语法操作:

1.遍历数组:

var arr = [1,2,3,4,5];

for(var i=0;i<arr.length;i++){

console.log(arr[i]);

}

2.遍历对象:

var obj = {name:'hank',age:'33',sex:'boy'};

for(var key in obj){

console.log(key+':'+obj[key]);

}

posted @ 2016-07-19 16:49  chenyuru  阅读(399)  评论(0编辑  收藏  举报