JS基础

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

  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
  1. 以下代码的输出结果是?
console.log(1+1);  // 2
console.log("2"+"4");  // "24"
console.log(2+"4");  // "24"
console.log(+new Date()); // 1469371632613
console.log(+"4"); //4
  1. 以下代码的输出结果是?
var a = 1;  // undefined
a+++a;  // 3
typeof a+2; // "number 2"
  1. 遍历数组,把数组里的打印数组每一项的平方
var arr = [3, 4, 5]
for (var i = 0; i < arr.length; i++) {
console.log(arr[i] * arr[i])
}
  1. 遍历 JSON, 打印里面的值
var obj = {
name: 'hunger',
sex: 'male',
age: 28
}
for (var key in obj) {
console.log(key + ":" + obj[key])
}
  1. 下面代码的输出是? 为什么
console.log(a); //undefined,变量提升,未进行赋值
var a = 1; 
console.log(a); // 1
console.log(b); // b is not defined,未声明b

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,772评论 6 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,458评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,610评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,640评论 1 276
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,657评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,590评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,962评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,631评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,870评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,611评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,704评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,386评论 4 319
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,969评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,944评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,179评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 44,742评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,440评论 2 342

推荐阅读更多精彩内容