原型

异步

一、什么是单线程,和异步有什么关系

单线程:只有一个线程,同一时间只能做一件事

原因:避免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高级面试的更多相关文章

  1. 面试 11-00.JavaScript高级面试

    11-00.JavaScript高级面试 #前言 一.基础知识: ES 6常用语法:class .module.Promise等 原型高级应用:结合 jQuery 和 zepto 源码 异步全面讲解: ...

  2. 前端JavaScript高级面试笔记

    一.ES6 1.模块化 ES6通过export和import实现模块化 ES6的模块化的基本规则或特点, 欢迎补充: 1:每一个模块只加载一次, 每一个JS只执行一次, 如果下次再去加载同目录下同文件 ...

  3. javascript高级编程笔记01(基本概念)

    1.在html中使用JavaScript 1.  <script> 元素 <script>定义了下列6个属性: async:可选,异步下载外部脚本文件. charset:可选, ...

  4. 《JavaScript高级程序设计》 -- 基本概念(一)

    之前看过好几遍<JavaScript高级程序设计>这一书,但是始终没有完完整整的看过一遍.从现在开始我会把它完整的啃一遍,每章节都记录笔记,自己的心得,加油! 由于前三章的内容比较简单,因 ...

  5. JavaScript高级特性-创建对象的九种方式

    1. 对象字面量 通过这种方式创建对象极为简单,将属性名用引号括起来,再将属性名和属性值之间以冒号分隔,各属性名值对之后用逗号隔开,最后一个属性不用逗号隔开,所有的属性名值对用大括号括起来,像这样: ...

  6. 《JavaScript高级程序设计(第3版)》笔记-序

    很少看书,不喜欢看书,主要是上学时总坐不住,没有多大定性,一本书可以两天看完,随便翻翻,也可以丢在角落里几个月不去动一下. 上次碰到了<JavaScript高级程序设计(第3版)>感觉真的 ...

  7. 《JavaScript高级程序设计(第3版)》阅读总结记录第一章之JavaScript简介

    前言: 为什么会想到把<JavaScript 高级程序设计(第 3 版)>总结记录呢,之前写过一篇博客,研究的轮播效果,后来又去看了<JavaScript 高级程序设计(第3版)&g ...

  8. 【javascript学习——《javascript高级程序设计》笔记】DOM操作

    DOM(文档对象模型)是针对HTML和XML文档的一个API(应用程序编程接口).DOM描绘了一个层次节点树,允许开发人员添加.移除和修改. 1.节点层次 <html> <head& ...

  9. 读javascript高级程序设计00-目录

    javascript高级编程读书笔记系列,也是本砖头书.感觉js是一种很好上手的语言,不过本书细细读来发现了很多之前不了解的细节,受益良多.<br/>本笔记是为了方便日后查阅,仅作学习交流 ...

随机推荐

  1. Ubuntu ssh秘钥生成

    一,秘钥生成传送 ssh-keygen 选项: -b:指定密钥长度: -e:读取openssh的私钥或者公钥文件: -C:添加注释: -f:指定用来保存密钥的文件名: -i:读取未加密的ssh-v2兼 ...

  2. PHP基础教程 PHP的页面缓冲处理机制

    PHP有很多机制.函数,其实就是魔术师,重复发挥好,其实甚至是简单应用,就会出现神奇的效果.兄弟连PHP培训 这里来讲一个ob_start()函数. ob_start()函数用于打开缓冲区,比如hea ...

  3. cmd命令行的FTP使用

    进入ftp:ftp 打开连接:open 192.168.1.106 2121 用户名空:none 密码空:不用输入,直接回车 查询远程服务器当前路径:pwd 显示远程服务器当前路径下的文件:dir 远 ...

  4. js基本数据类型+判断数据类型方法

    摘要:不管是什么类型的,Object.prototype.toString.call();都可以判断出其具体的类型,简单基本类型(String.Number.Boolean.Null.Undefine ...

  5. (二)SQL -- 查询

    主要包含以下内容: 单表查询.子查询.多表查询(左连接右连接等).合并查询 单表查询: 基础查询语句: select 列名 from 表名 where 条件 group by 列名 order by ...

  6. sqli-labs(29)

    0X01 题目说有waf 那我们先来试探一波 ?id=-' union select 1,database(),3%23 成功了 那么他的WAF过滤了什么呐? 这是index.php的源码并没有过滤什 ...

  7. SPFA算法的判负环问题(BFS与DFS实现)

    经过笔者的多次实践(失败),在此温馨提示:用SPFA判负环时一定要特别小心! 首先SPFA有BFS和DFS两种实现方式,两者的判负环方式也是不同的.       BFS是用一个num数组,num[x] ...

  8. react v16.12 源码阅读环境搭建

    搭建后的代码(Keep updated): https://github.com/lirongfei123/read-react 欢迎将源码阅读遇到的问题提到issue 环境搭建思路: 搭建一个web ...

  9. eclipse 简单配置

    1.安装STS4 help-->Eclipse Maketplace-->search 'STS'-->install 2.代码提示 Window-->preferences- ...

  10. AI-人工智能/机器学习 seetafaceJNI

    基于中科院seetaface2进行封装的JAVA人脸识别库,支持人脸识别.1:1比对.1:N比对. 项目介绍 基于中科院seetaface2进行封装的JAVA人脸识别算法库,支持人脸识别.1:1比对. ...