浏览器是如何渲染页面和加载页面
- 解析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
本教程版权归本人和饥人谷所有