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]);

}

时间: 2024-08-02 12:49:11

JavaScript基础,浏览器渲染,数据类型,遍历操作的相关文章

javascript 基础知识1 数据类型

首先javascript是一种具有面向对象能力的,解释型程序设计语言. js对大小写敏感,一定要采取一致的字符大小写形式,在js中的结束分号(:)是可选的,为了避免JS语句错误,我们还是要注意添加,养成良好的编写习惯. 下面看看数据类型和值. JS有7种数据类型:字符串.数字.布尔.数组.对象.Null.Undefined 字符串类型:由Unicode字符,数字,标点符号组成的序列,可以为多个字符,也可以为0个字符. 1 <script> 2 // var用于声明一个变量 3 var stri

HTML基础-浏览器渲染操作的顺序

在前端中,我们需要对浏览器的渲染操作做一个了解,不然的话,我们可能在做前端开发过程中会找不出错误的原因,因此 能够了解浏览器的渲染操作的顺序有助于我们对问题的排除. 页面加载网页-浏览器渲染操作的顺序 1.解析HTML结构 2.加载外部脚本和样式表文件 3.解析并执行脚本代码 4.构造HTML DOW模型 5.加载图片等外部文件 6.页面加载完毕

JavaScript基础——浏览器对象模型(BOM)

简介 ECMAScript是JavaScript的核心,但如果要在Web中使用JavaScript,那么BOM(浏览器对象模型)则无疑才是真正的核心.BOM提供了很多对象,用于访问浏览器的功能,这些功能与任何网页内容无关.多年来,缺少事实上的规范导致BOM及有意思又有问题,因为浏览器提供商会按照各自的想法随意去扩展它.于是,浏览器之间公有的对象就成为了事实上的标准.这些对象在浏览器中得以存在,很大程度上是由于它们提供了与浏览器的互操作性.W3C为了把浏览器中JavaScript最基本的部分标准化

JavaScript基础 使用for循环遍历数组 并 查询 数组中是否存在指定的值

镇场诗: 清心感悟智慧语,不着世间名与利.学水处下纳百川,舍尽贡高我慢意. 学有小成返哺根,愿铸一良心博客.诚心于此写经验,愿见文者得启发.------------------------------------------ code: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=ut

JavaScript基础知识梳理----数据类型

JavaScript数据类型 JavaScript的数据类型有六大类: Undefined.null.string.number.object.boolean 1.Undefined    ---使用var声明变量但未初始化, 对未初始化的变量或尚未定义的变量使用typeof运算符均会返回undefined 问题: 区分空对象指针和尚未定义的变量 使用typeof检测,尚未定义的变量返回的是undefined,而空对象指针返回的是object 2.Null 逻辑上null表示一个空对象指针 使用

一、Javascript基础语法之数据类型

弱类型:在js中定义变量时,不定义明确的数据类型,随时可以对变量的类型进行转换,随时可以对变量的类型进行转换.而该变量的类型主要取决于里面存储的字面值的类型.弱类型如同纸杯的概念,创建了一个弱类型的变量就如同有了一个纸杯,可以往里面放白水,可以放可乐,可以放红酒.放了什么就是什么,并且机器是不会骗人的. 例如:var num=12:在这个变量的定义过程中用到了关键字var,以及赋给它的值12.那么大家可能会有疑问js中到底会有哪些数据类型呢? 内置数据类型:在js中常用的内置数据类型有 numb

Javascript 强制浏览器渲染Dom文档

当浏览器在执行一段js代码的过程中,一般不会立即更新渲染dom文档,而是在整段代码执行完毕的时候才去更新dom文档. 浏览器这么实现,是为了尽可能提高性能.但这种实现有时候会给我们带来一些意外的负面效果. js访问以下 Dom属性的时候,浏览器都会先渲染Dom文档,再获得相关的属性.从而强制浏览器立即渲染Dom文档. offsetTop, offsetLeft, offsetWidth, offsetHeightscrollTop, scrollLeft, scrollWidth, scroll

javascript基础数组,字符串的操作和冒泡函数等

 数组 var arr = new Array(2,1,5,6,7,4,9); var arr2 = Array(1,2,"33"); //省略new来创建数组 var arr3 = [1,2,"33"]; //通过常量来创建数组 Math.random(); //0~1之间任意的数. for(var i in arr){document.write(arr[i]+" ");} //另一种遍历arr的方式.这个方法要比for循环效率高 1.栈结构

JavaScript基础知识(数据类型)

数据类型 布尔:true/fasle console.log(typeof true);// "boolean" Number : true -->1 false -->0 console.log(Number(true)); console.log(Number(false)); Boolean : 把其他数据类型转换布尔值: console.log(Boolean(12));//true console.log(Boolean(10));//true console.l