Javascript高级面试
原型
异步
一、什么是单线程,和异步有什么关系
单线程:只有一个线程,同一时间只能做一件事
原因:避免DOM渲染的冲突
解决方案:异步
为什么js只有一个线程:避免DOM渲染冲突
- 浏览器需要渲染DOM
- JS可以修改DOM结构
- JS执行的时候,浏览器DOM渲染会暂停
- 两端JS也不能同时执行(都修改DOM就冲突了)
- webworker支持多线程,但是不能访问DOM
解决方案存在的问题
- 问题一:没按照书写方式执行,可读性差
- 问题二:callback中不容易模块化
二、什么是event-loop
- 事件轮询,JS实现异步的具体解决方案
- 同步代码,直接执行
- 异步函数先放在异步队列中
- 待同步函数执行完毕,轮询执行异步队列的函数
setTimeout(function(){
console.log(1);
},100); //100ms之后才放入异步队列中,目前异步队列是空的
setTimeout(function(){
console.log(2); //直接放入异步队列
})
console.log(3) //直接执行
//执行3之后,异步队列中只有2,把2拿到主线程执行,2执行完之后,异步队列中并没有任务,所以一直轮询异步队列,直到100ms之后1放入异步队列,将1拿到主线程中执行
$.ajax({
url:'./data.json',
success:function(){ //网络请求成功就把success放入异步队列
console.log('a');
}
})
setTimeout(function(){
console.log('b')
},100)
setTimeout(function(){
console.log('c');
})
console.log('d')
//打印结果:
//d //d
//c //c
//a //b
//b //a
//真实环境不会出现dacb
三、是否用过jQuery的Deferred
- jQuery1.5的变化
- 使用jQuery Deferred
- 初步引入Promise概念
jQuery1.5之前
var ajax = $.ajax({
url:'./data.json',
success:function(){
console.log('success1');
console.log('success2');
console.log('success3');
},
error:function(){
console.log('error');
}
})
console.log(ajax); //返回一个XHR对象
jQuery1.5之后
var ajax = $.ajax('./data.json');
ajax.done(function(){
console.log('success1')
})
.fai(function(){
console.log('fail')
})
.done(function(){
console.log('success2');
})
console.log(ajax); //deferred对象
var ajax = $.ajax('./data.json');
ajax.then(function(){
console.log('success1')
},function(){
console.log('error1');
})
.then(function(){
console.log('success2');
},function(){
console.log('error');
})
//使用
var w = waithandle()
w.then(function(){
console.log('ok1');
},function(){
console.log('err2');
})
.then(function(){
console.log('ok2');
},function(){
console.log('err2');
})
//还有w.wait w.fail
- 无法改变JS异步和单线程的本质
- 只能从写法上杜绝callback这种形式
- 它是一种语法糖,但是解耦了代码
- 很好的提现:开放封闭原则(对扩展开放对修改封闭)
使用jQuery Deferred
//给出一段非常简单的代码,使用setTimeout函数
var wait = function(){
var task = function(){
console.log('执行完成');
}
setTimeout(task,2000)
}
wait();
//新增需求:要在执行完成之后进行某些特别复杂的操作,代码可能会很多,而且分好几个步骤
function waitHandle(){
var dtd = $.Deferred();//创建一个deferred对象
var wait = function(dtd){ // 要求传入一个deferred对象
var task = function(){
console.log("执行完成");
dtd.resolve(); //表示异步任务已完成
//dtd.reject() // 表示异步任务失败或者出错
};
setTimeout(task,2000);
return dtd;
}
//注意,这里已经要有返回值
return wait(dtd);
}
/*
*总结:dtd的API可分成两类,用意不同
*第一类:dtd.resolve dtd.reject
*第二类:dtd.then dtd.done dtd.fail
*这两类应该分开,否则后果严重!
*可以在上面代码中最后执行dtd.reject()试一下后果
*/
使用dtd.promise()
function waitHandle(){
var dtd = $.Deferred();
var wait = function(){
var task = function(){
console.log('执行完成');
dtd.resolve();
}
setTimeout(task,2000)
return dtd.promise(); //注意这里返回的是promise,而不是直接返回deferred对象
}
return wait(dtd)
}
var w = waitHandle(); //promise对象
$.when(w).then(function(){
console.log('ok1');
},function(){
console.log('err1');
})
/*
只能被动监听,不能干预promise的成功和失败
*/
- 可以jQuery1.5对ajax的改变举例
- 说明如何简单的封装、使用deferred
- 说明promise和Defrred的区别
要想深入了解它,就需要知道它的前世今生
四、Promise的基本使用和原理
基本语法回顾
异常捕获
//规定:then只接受一个函数,最后统一用catch捕获异常
多个串联
var scr1 = 'https://www.imooc.com/static/img/index/logo_new.png';
var result1 = loadImg(src1);
var src2 = 'https://www.imooc.com/static/img/index/logo_new.png';
var result2 = loadImg(src2);
result1.then(function(img1) {
console.log('第一个图片加载完成', img1.width);
return result2;
}).then(function(img2) {
console.log('第二个图片加载完成', img2.width);
}).catch(function(ex) {
console.log(ex);
})
Promise.all和Promise.race
//Promise.all接收一个promise对象的数组
//待全部完成后,统一执行success
Promise.all([result1, result2]).then(datas => {
//接收到的datas是一个数组,依次包含了多个promise返回的内容
console.log(datas[0]);
console.log(datas[1]);
})
//Promise.race接收一个包含多个promise对象的数组
//只要有一个完成,就执行success
Promise.race([result1, result2]).then(data => {
//data即最先执行完成的promise的返回值
console.log(data);
})
Promise标准
- 三种状态:pending,fulfilled,rejected
- 初始状态:pending
- pending变为fulfilled,或者pending变为rejected
- 状态变化不可逆
promise必须实现then这个方法
then()必须接收两个函数作为标准
then
五、介绍一下async/await(和Promise的区别、联系)
六、总结一下当前JS结局异步的方案
虚拟DOM
- vdom 是 vue 和 React 的核心,先讲哪个都绕不开它
- vdom 比较独立,使用也比较简单
- 如果面试问到 vue 和 React 和实现,免不了问 vdom
问题
- vdom 是什么?为何会存在 vdom?
什么是vdom
- virtual dom,虚拟DOM
- 用JS模拟DOM结构
- DOM变化的对比,放在JS层来做(图灵完备语言:能实现各种逻辑的语言)
- 提高重绘性能
DOM
<ul id="list">
<li class="item">Item 1</li>
<li class="item">Item 2</li>
</ul>
虚拟DOM:
{
tag: 'ul',
attrs: {
id: 'list'
},
children: [{
tag: 'li',
attrs: { className: 'item' },
children: ['item1']
},
{
tag: 'li',
attrs: { className: 'item' },
children: ['item2']
}
]
}
//className代替class,因为class是js的保留字
浏览器最耗费性能就是DOM操作
现在浏览器执行JS性能非常低
设计一个需求场景
用jQery实现
遇到的问题
- vdom 的如何应用,核心 API 是什么
- 介绍一下 diff 算法
说一下使用 jquery 和使用框架的区别
jQuery 实现 todo-list
vue 实现 todo-list
jQuery 和框架的区别
- 数据和视图的分离,解耦(开放封闭原则)
- 以数据驱动视图,只关心数据变化,DOM 操作被封装
说一下对 MVVM 的理解
- MVC
- MVVM
- 关于
ViewModel
MVVM和vue
组件化和React
hybrid
未完待续,每日更新
来源:https://segmentfault.com/a/1190000017498782
Javascript高级面试的更多相关文章
- 面试 11-00.JavaScript高级面试
11-00.JavaScript高级面试 #前言 一.基础知识: ES 6常用语法:class .module.Promise等 原型高级应用:结合 jQuery 和 zepto 源码 异步全面讲解: ...
- 前端JavaScript高级面试笔记
一.ES6 1.模块化 ES6通过export和import实现模块化 ES6的模块化的基本规则或特点, 欢迎补充: 1:每一个模块只加载一次, 每一个JS只执行一次, 如果下次再去加载同目录下同文件 ...
- javascript高级编程笔记01(基本概念)
1.在html中使用JavaScript 1. <script> 元素 <script>定义了下列6个属性: async:可选,异步下载外部脚本文件. charset:可选, ...
- 《JavaScript高级程序设计》 -- 基本概念(一)
之前看过好几遍<JavaScript高级程序设计>这一书,但是始终没有完完整整的看过一遍.从现在开始我会把它完整的啃一遍,每章节都记录笔记,自己的心得,加油! 由于前三章的内容比较简单,因 ...
- JavaScript高级特性-创建对象的九种方式
1. 对象字面量 通过这种方式创建对象极为简单,将属性名用引号括起来,再将属性名和属性值之间以冒号分隔,各属性名值对之后用逗号隔开,最后一个属性不用逗号隔开,所有的属性名值对用大括号括起来,像这样: ...
- 《JavaScript高级程序设计(第3版)》笔记-序
很少看书,不喜欢看书,主要是上学时总坐不住,没有多大定性,一本书可以两天看完,随便翻翻,也可以丢在角落里几个月不去动一下. 上次碰到了<JavaScript高级程序设计(第3版)>感觉真的 ...
- 《JavaScript高级程序设计(第3版)》阅读总结记录第一章之JavaScript简介
前言: 为什么会想到把<JavaScript 高级程序设计(第 3 版)>总结记录呢,之前写过一篇博客,研究的轮播效果,后来又去看了<JavaScript 高级程序设计(第3版)&g ...
- 【javascript学习——《javascript高级程序设计》笔记】DOM操作
DOM(文档对象模型)是针对HTML和XML文档的一个API(应用程序编程接口).DOM描绘了一个层次节点树,允许开发人员添加.移除和修改. 1.节点层次 <html> <head& ...
- 读javascript高级程序设计00-目录
javascript高级编程读书笔记系列,也是本砖头书.感觉js是一种很好上手的语言,不过本书细细读来发现了很多之前不了解的细节,受益良多.<br/>本笔记是为了方便日后查阅,仅作学习交流 ...
随机推荐
- Ubuntu ssh秘钥生成
一,秘钥生成传送 ssh-keygen 选项: -b:指定密钥长度: -e:读取openssh的私钥或者公钥文件: -C:添加注释: -f:指定用来保存密钥的文件名: -i:读取未加密的ssh-v2兼 ...
- PHP基础教程 PHP的页面缓冲处理机制
PHP有很多机制.函数,其实就是魔术师,重复发挥好,其实甚至是简单应用,就会出现神奇的效果.兄弟连PHP培训 这里来讲一个ob_start()函数. ob_start()函数用于打开缓冲区,比如hea ...
- cmd命令行的FTP使用
进入ftp:ftp 打开连接:open 192.168.1.106 2121 用户名空:none 密码空:不用输入,直接回车 查询远程服务器当前路径:pwd 显示远程服务器当前路径下的文件:dir 远 ...
- js基本数据类型+判断数据类型方法
摘要:不管是什么类型的,Object.prototype.toString.call();都可以判断出其具体的类型,简单基本类型(String.Number.Boolean.Null.Undefine ...
- (二)SQL -- 查询
主要包含以下内容: 单表查询.子查询.多表查询(左连接右连接等).合并查询 单表查询: 基础查询语句: select 列名 from 表名 where 条件 group by 列名 order by ...
- sqli-labs(29)
0X01 题目说有waf 那我们先来试探一波 ?id=-' union select 1,database(),3%23 成功了 那么他的WAF过滤了什么呐? 这是index.php的源码并没有过滤什 ...
- SPFA算法的判负环问题(BFS与DFS实现)
经过笔者的多次实践(失败),在此温馨提示:用SPFA判负环时一定要特别小心! 首先SPFA有BFS和DFS两种实现方式,两者的判负环方式也是不同的. BFS是用一个num数组,num[x] ...
- react v16.12 源码阅读环境搭建
搭建后的代码(Keep updated): https://github.com/lirongfei123/read-react 欢迎将源码阅读遇到的问题提到issue 环境搭建思路: 搭建一个web ...
- eclipse 简单配置
1.安装STS4 help-->Eclipse Maketplace-->search 'STS'-->install 2.代码提示 Window-->preferences- ...
- AI-人工智能/机器学习 seetafaceJNI
基于中科院seetaface2进行封装的JAVA人脸识别库,支持人脸识别.1:1比对.1:N比对. 项目介绍 基于中科院seetaface2进行封装的JAVA人脸识别算法库,支持人脸识别.1:1比对. ...