浏览器是如何渲染页面和加载页面
- 解析HTML以重建DOM树(Parsing HTML to construct the DOM tree): 渲染引擎开始解析HTML文档，转换树中的标签到DOM节点，它被称为"内容树"。
- 构建渲染树(Render tree construction): 解析CSS(包括外部CSS文件和样式元素)，根据CSS选择器计算出节点的样式，创建另一个树"渲染树"。
- 布局渲染树(Layout of the render tree): 从根节点递归调用，计算每一个元素的大小、位置等，给每个节点所应该出现在屏幕上的精确坐标。
- 绘制渲染树(Painting the render tree):
- JS的加载：默认情况下加载 JavaScript 时，会禁用并发，并且阻止其他内容的下载
- 渲染效率与以下三点有关
- 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，用于判断一个对象是不是某一个类型的实例。
代码
- 完成如下代码判断一个变量是否是数字、字符串、布尔、函数
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
- 以下代码的输出结果是?
console.log(1+1); // 2
console.log("2"+"4"); // "24"
console.log(2+"4"); // "24"
console.log(+new Date()); // 1469371632613
console.log(+"4"); //4
- 以下代码的输出结果是?
var a = 1; // undefined
a+++a; // 3
typeof a+2; // "number 2"
- 遍历数组，把数组里的打印数组每一项的平方
var arr = [3, 4, 5]
for (var i = 0; i < arr.length; i++) {
console.log(arr[i] * arr[i])
}
- 遍历 JSON, 打印里面的值
var obj = {
name: 'hunger',
sex: 'male',
age: 28
}
for (var key in obj) {
console.log(key + ":" + obj[key])
}
- 下面代码的输出是? 为什么
console.log(a); //undefined，变量提升，未进行赋值
var a = 1;
console.log(a); // 1
console.log(b); // b is not defined，未声明b
本教程版权归本人和饥人谷所有
网友评论