浏览器是如何渲染页面和加载页面

1. 解析HTML以重建DOM树(Parsing HTML to construct the DOM tree): 渲染引擎开始解析HTML文档，转换树中的标签到DOM节点，它被称为"内容树"。
2. 构建渲染树(Render tree construction): 解析CSS(包括外部CSS文件和样式元素)，根据CSS选择器计算出节点的样式，创建另一个树"渲染树"。
3. 布局渲染树(Layout of the render tree): 从根节点递归调用，计算每一个元素的大小、位置等，给每个节点所应该出现在屏幕上的精确坐标。
4. 绘制渲染树(Painting the render tree):
5. JS的加载：默认情况下加载 JavaScript 时，会禁用并发，并且阻止其他内容的下载
6. 渲染效率与以下三点有关

• css选择器的查询定位效率
• 浏览器的渲染模式和算法
• 要进行渲染内容的大小

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

• CSS 置于标签中，或是使用<link>标签引用
• JS通常置于标签底部

解释白屏和FOUC

• 不同浏览器对于css的加载与显示页面的机制不同造成了白屏和FOUC 当把css放置在页面底部或使用@import引用css文件时

  • 当浏览器渲染方式为等待css加载完成后，对html元素进行渲染和展示会造成白屏现象
  • 当浏览器渲染方式为先对html元素进行展示，等待css加载完成后重新对元素样式进行修改则会形成FOUC现象

• 如果将JS文件放在头部，脚本会阻塞后面内容的呈现，也会阻塞其后组件的下载，出现白屏

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

• async：以非阻塞模式加载JS，在script下载完成后调用并执行，不确保执行的顺序
• defer： 以非阻塞模式加载JS，在script下载完成后调用并执行，确保JS按照其在页面中的顺序执行

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

• 字符串(string) 字符串是存储字符的变量，简单类型

  实例：
        var a1="hello" ;
  

• 数字(Number) JavaScript 只有一种数字类型，简单类型。数字可以带小数点，也可以不带

  实例：
        var a2=1;// 不带小数点
        var a3=1.5;// 带小数点
  

  极大或极小的数字可以通过科学（指数）计数法来书写

  实例：
      var a4=123e5; //12300000
      var a5=123e-5;//0.00123
  

• 布尔(boolean) 布尔表示一个逻辑实体，简单类型，可以有两个值：true 和 false。

  实例：
        var a6=true ;
        var a7=false ;
  

• null类型 一个表明 null 值的特殊关键字，特殊类型。JavaScript 是大小写敏感的，因此 null 与 Null、NULL或其他变量完全不同。

• Undefined undefined表示变量未定义或不存在，特殊类型。

• Object Object构造函数为给定的值创建一个对象包装。如果给定的值是null或undefined，将会创建并返回一个空对象，否则将返回一个与给定值对应类型的对象

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

• NaN NaN表示为数字类型，全局属性NaN表示Not-A-Number的值。
• undefined undefined表示变量未定义或不存在。
• null null表示变量虽然存在，但是值是空的。

typeof和instanceof的作用和区别?

• typeof： typeof操作符返回一个字符串,表示未经求值的操作数(unevaluated operand)的类型。
• instanceof： instanceof返回的值是布尔型boolean，用于判断一个对象是不是某一个类型的实例。

代码

1. 完成如下代码判断一个变量是否是数字、字符串、布尔、函数

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';
}
var a = 2,
b = 'jirengu',
c = false;
alert( isNumber(a) );  //true
alert( isString(a) );  //false
alert( isString(b) );  //true
alert( isBoolean(c) ); //true
alert( isFunction(a)); //false
alert( isFunction( isNumber ) ); //true

2. 以下代码的输出结果是?

console.log(1+1);  // 2
console.log("2"+"4");  // "24"
console.log(2+"4");  // "24"
console.log(+new Date()); // 1469371632613
console.log(+"4"); //4

3. 以下代码的输出结果是?

var a = 1;  // undefined
a+++a;  // 3
typeof a+2; // "number 2"

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

var arr = [3, 4, 5]
for (var i = 0; i < arr.length; i++) {
console.log(arr[i] * arr[i])
}

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

var obj = {
name: 'hunger',
sex: 'male',
age: 28
}
for (var key in obj) {
console.log(key + ":" + obj[key])
}

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

console.log(a); //undefined，变量提升，未进行赋值
var a = 1; 
console.log(a); // 1
console.log(b); // b is not defined，未声明b

本教程版权归本人和饥人谷所有