1. this 的理解(使用 --为什么要用、实际使用、绑定(显式隐式)常见方法(call apply bind) 作用域 闭包 变量提升 实际使用 、箭头函数 与函数的区别)
- 函数调用模式:如果一个函数不是一个对象的属性时,就是被当做一个函数来进行调用的。此时this指向了window。
- 方法调用模式: 当一个函数被保存为对象的一个属性时,我们称之为一个方法。当一个方法被调用时,this指向被绑定到当前对象。
- 构造函数调用模式:如果函数是通过new关键字进行调用的,此时this被绑定到创建出来的新对象上。
- 上下文调用模式(借用方法模式):上下文调用模式也叫方法借用模式,分为apply与call。可以改变this指向。bind也可以改变this指向,接受一个对象,返回一个新的函数,新函数中的this为参数中指定的对象。
作用域:
变量起作用的区域,也就是说:变量定义后,可以在哪个范围内使用该变量。
全局作用域、函数作用域、块级作用域(ES6)
阮一峰-块级作用域
作用域链:
只要是函数,就会形成一个作用域,如果这个函数被嵌套在其他函数中,那么外部函数也有自己的作用域,这个一直往上到全局环境,就形成了一个作用域链。
闭包:
至少两个函数,嵌套关系,内部函数需要访问外部函数的局部变量。
闭包的作用:
- 私有变量,保护数据安全
- 持久化维持数据
箭头函数:
ES6 允许使用“箭头”(=>)定义函数。
箭头函数有几个使用注意点:(区别)
(1)函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象。
(2)不可以当作构造函数,也就是说,不可以使用new命令,否则会抛出一个错误。
(3)不可以使用arguments对象,该对象在函数体内不存在。如果要用,可以用 rest 参数代替。
(4)不可以使用yield命令,因此箭头函数不能用作 Generator 函数。
2. 性能优化(垃圾回收机制、事件委托、 DOM 操作 重棑重绘 内存管理机制 图片的性能优化 、借助工具–webpack 等)
垃圾回收机制
由于字符串、对象和数组没有固定大小,所有当他们的大小已知时,才能对他们进行动态的存储分配。JavaScript 程序每次创建字符串、数组或对象时,解释器都必须分配内存来存储那个实体。只要像这样动态地分配了内存,最终都要释放这些内存以便他们能够被再用,否则,JavaScript 的解释器将会消耗完系统中所有可用的内存,造成系统崩溃。JavaScript 使用垃圾回收机制来自动管理内存。现在各大浏览器通常用采用的垃圾回收有两种方法:标记清除、引用计数。
事件委托
事件冒泡的作用------事件委托
例:在网页中,有一个ul标签,ul中包括6个标签,点击li元素要实现某种效果,以前的做法是首先找到ul,然后找到ul里面所有的li,遍历所有的li标签,给它们逐个注册点击事件。
现在,有了事件冒泡,就不用给每一个li注册点击事件了。因为冒泡事件的作用,点击li元素的时候,点击事件可以传送到父元素上来,即本来该li做的事情,交给ul去做,再者就是事件委托。
DOM 操作
- innerText、innerHTML
- document.body、document.documentElement、document.head、document.title
- document.getElementById(“id”)、document.getElementsByTagName(“tagName”)、box.getElementsByTagName(“tagName”)、document.getElementsByClassName(“class”)、document.getElementsByName(“aa”)(只适用于表单)、document.querySelector()、document.querySelectorAll()、document.getElementById(“box”)
- box.getAttribute(name)、box.setAttribute(name, value)、box.removeAttribute(name)
- offset、scroll、client
重棑重绘
- reflow重绘:某些元素的外观被改变,例如:元素的填充颜色
- repaints重排:重新生成布局,重新排列元素。
在页面的生命周期中,网页生成的时候,至少会渲染一次。在用户访问的过程中,还会不断触发重排(reflow)和重绘(repaint),不管页面发生了重绘还是重排,都会影响性能,最可怕的是重排,会使我们付出高额的性能代价,所以我们应尽量避免。
重排比重绘大,重绘不一定导致重排,但重排一定会导致重绘。
下面情况会发生重排:
- 页面初始渲染,这是开销最大的一次重排
- 添加/删除可见的DOM元素
- 改变元素位置
- 改变元素尺寸,比如边距、填充、边框、宽度和高度等
- 改变元素内容,比如文字数量,图片大小等
- 改变元素字体大小
- 改变浏览器窗口尺寸,比如resize事件发生时
- 激活CSS伪类(例如::hover)
- 设置 style 属性的值,因为通过设置style属性改变结点样式的话,每一次设置都会触发一次reflow
- 查询某些属性或调用某些计算方法:offsetWidth、offsetHeight等,除此之外,当我们调用 getComputedStyle方法,或者IE里的 currentStyle 时,也会触发重排,原理是一样的,都为求一个“即时性”和“准确性”。
一下情况会发生重绘:
- color
- visibility
- text-decoration
- background
- box-shadow
内存管理机制
JS内存空间分为栈(stack)、堆(heap)、池(一般也会归类为栈中)。 其中栈存放变量,堆存放复杂对象,池存放常量。
栈:先进后出
堆:先进先出
图片的性能优化
- 使用更小更快更强,新一代图片格式 WebP
- 图片懒加载
懒加载的原理是:将图片的url赋值给img的data-url(可自定义)属性,监听滚动事件,当图片进入可视区域时,将data-url的值赋值给img的url属性,这时才真正发出图片的http请求。具体实现可以参考
- 利用雪碧图减少http请求
- base64编码内联小图片
3.(必要)promise异步(是什么、事件 回调 js引擎机制、promise的用法、语法糖、 与axios的联系、如何创建、串联与相应多个)
- Promise 是异步编程的一种解决方案,简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果。从语法上说,Promise 是一个对象,从它可以获取异步操作的消息。
- 有三种状态:pending(进行中)、fulfilled(已成功)和rejected(已失败)。
- 有了Promise对象,就可以将异步操作以同步操作的流程表达出来,避免了层层嵌套的回调函数。
const promise = new Promise(function(resolve, reject) {
// ... some code
if (/* 异步操作成功 */){
resolve(value);
} else {
reject(error);
}
})
promise.then(function(value) {
// success
}, function(error) {
// failure
});
// 生成一个Promise对象的数组
const promises = [2, 3, 5, 7, 11, 13].map(function (id) {
return getJSON('/post/' + id + ".json");
});
Promise.all(promises).then(function (posts) {
// ...
}).catch(function(reason){
// ...
});
js引擎机制
宏任务与微任务
axios:
axios 只是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中,发送ajax的工具, 非常的轻量。
4. mvvm(什么是mvc mvvm ; 为什么用这种模式 、 前后端分离、 vue、 react jquery等的区别、 框架与 库区别 cmd、amd的区别)
MVVM是前端视图层的分层开发思想,把每个页面分成M、V、VM三块,V是view视图、M是model数据、VM是M和V之间的调度者,提供双向数据绑定。
MVC是三个单词的首字母缩写,它们是Model(模型)、View(视图)和Controller(控制)。
1)最上面的一层,是直接面向最终用户的"视图层"(View)。它是提供给用户的操作界面,是程序的外壳。
2)最底下的一层,是核心的"数据层"(Model),也就是程序需要操作的数据或信息。
3)中间的一层,就是"控制层"(Controller),它负责根据用户从"视图层"输入的指令,选取"数据层"中的数据,然后对其进行相应的操作,产生最终结果。
amd与cmd的区别:
区别:
- AMD 是 RequireJS 在推广过程中对模块定义的规范化产出。
- CMD 是 SeaJS 在推广过程中对模块定义的规范化产出。
- 对于依赖的模块,AMD 是提前执行,CMD 是延迟执行。不过 RequireJS 从 2.0 开始,也改成可以延迟执行(根据写法不同,处理方式不同)。CMD 推崇 as lazy as possible.
- CMD 推崇依赖就近,AMD 推崇依赖前置。