前端中高级面试（一）

cookie

• 每个域名下最多生成20个cookie
• 浏览器整体对cookie个数也有限制
• IE和Opera会清理近期少使用的cookie， Firefox会随机清理
• cookie最大4096字节 4k

优缺点

优点	缺点
只在cookie中存放不敏感数据	数量长度限制
控制cookie生命周期	并不是所有数据都存在cookie，关键数据的校验还是得放在服务端

localStroage / sessionStorage

localStorage
用于持久化本地存储，除非主动删除数据，否则数据是永远不会过期的

sessionStorage
遵循同源策略
不是持久化，仅仅是会话级别存储，只有在同一个绘画中的叶脉呢才能访问，会话结束，数据自动销毁

webstroage / cookie 对比

webstorage 不受大小限制 自身拥有setItem,getItem,removeItem,clear方法

webstorage	cookie
不受大小限制	受大小限制，并且每次请求一个新页面，cookie都会被发送，浪费带宽
自身拥有setItem,getItem,removeItem,clear方法	需自行封装 setcookie，getcookie

   | 可设置过期时间

display:none / visibility: hidden

虽然都是可以做到对元素的隐藏
但display:none 在文档布局中不在分配空间
而 visibility: hidden 扔保留原来的空间

css中link 和 @import

link	@import
Html标签	由css提供
页面加载时，link会同时加载	import引用的css会等页面加载完再加载
无兼容问题	IE5以上

position absolute/ fixed

共同点：
呈现方式发生改变， display被置为inline-block 元素脱离普通流，不占据空间

不同点
absolute 可以设置相对‘根元素’
fixed ‘根元素’为浏览器

盒模型

标准W3C盒模型 content/padding/margin/border
IE盒模型 content包含了border/padding

DOM添加、移除、移动、查找节点

createDocumentFragment() // 创建Dom节点
createElement（） // 创建一个具体元素
createTextNode() // 创建一个文本节点
appendChild()
removeChild()
insertChild()
getElementByTagName()
getElementByName()
getElementById()

Html5新标签兼容

我们可以通过 document.createElement() 创建标签，使低版本浏览器支持H5新标签。 ，当然我们也可以使用第三方进行统一处理 html5shiv

浏览器内 多个标签页 之间的通信

我们可以通过 localStorage、cookies 等本地存储方式

进程和线程

• 一个程序至少有一个进程，一个进程至少有一个线程
• 线程划分尺度少于进程，使得线程的并发性高
• 进程在执行过程中拥有独立的内存单元‘而线程多个线程共享内存，提高程序的运行效率
• 线程同时执行，线程依托于程序。 但操作系统并没有将多个线程看作多个独立的应用，来实现进程的调度和管理以及资源分配

减少加载时间（也算是优化）

• 优化图片
• 优化css（比如合并一些margin-top，margin-left等）
• 标明图片宽高，不然浏览器一边下载图片资源，一边计算大小，如果图片很多，浏览器不断的调整页面。如果知道宽高，即使暂时无法显示，页面上也会腾出图片的空位，然后继续加载页面后面的内容，用户体验提升
• 减少http请求（合并文件，合并图片） css sprite, js css 压缩， CDN，缓存，变量存储数据
• 避免直接操作 style
• 少用全局变量，减IO读取操作
• 图片预加载，将样式放在顶部，脚本放在底部

null / undefined

null	undefined
转为数字为0	转为数字为NaN
对象原型链的终点	变量声明，但未赋值
调用函数，参数未传为 undefined
对象未赋值的属性
函数没有返回值时为undefined

new 操作符

创建一个空对象，并且this变量引用该对象，同时还继承了该函数原型

例： var obj = new Base()
1、我们先为obj初始化一个空对象 {}
2、我们将这个空对象的__proto__成员指向 Base函数对象的prototype成员对象
3、我们将Base函数对象的this指针替换成 obj

var obj  = {}; 
obj.__proto__ = Base.prototype; 
Base.call(obj);

json

轻量级数据交换格式，数据格式简单，易于读写，占用带宽小

解决跨域问题

• jsonp（远离动态插入script标签）
• document.domain
• window.name

内存泄漏

不再需要之后仍存在
程序中已动态分配的堆内存，由于某种原因程序未释放或无法释放引发的各种问题。

• js中可能出现的内存泄漏情况结果：变慢，崩溃，延迟大等
• setTimeout的第一个参数使用字符串而非函数的话，会引发内存泄漏
• 闭包
• 控制台日志
• 循环（在两个对象彼此引用且彼此保留时，就会产生一个循环）

原因：
1、 全局变量
2、 dom清空时还存在引用
3、 ie中使用闭包
4、 定时器未清理
5、 子元素存在，引起的内存泄漏

避免策略
1、 减少不必要的全局变量，及时对无用的数据进行垃圾回收
2、 避免死循环之类的
3、 减少层级过多的引用

判断是浏览器还是node环境

可以通过全局对象进行判断，是否为 window，node宿主环境下全局对象为global

nodejs适用场景

1、高并发（node基于事件驱动和无阻塞的，适合处理并发请求）
2、聊天
3、实时消息推送

ajax

• 创建XMLHttpRequest对象，也就是创建一个异步调用对象
• 创建一个新的HTTP请求，并指定该HTTP请求方法，url，验证信息
• 设置响应HTTP请求状态变化的函数
• 发送HTTP请求
• 获取异步调用返回的数据
• 适用js和DOM实现局部刷新

各浏览器 可并行下载6个资源

canvas Api

fillRect(x,y,width,height) 实心矩形
strokeRect(x,y,width,height) 空心矩形
fillText(‘hellow’,200,200) 实心文字
strokeText(‘hellow’,200,200) 空心文字

css reset / normalize.css

两者都是通过重置样式保持浏览器样式的一致性
后者保持了许多浏览器样式

获取高度

dom.offsetWidth/offsetHeight
dom.currentStyle.width/height IE浏览器
window.getComputedStyle(dom).width/height 相对兼容多一点浏览器

• 获取屏幕宽高 window.screen.height/width
• 获取屏幕工作区域的宽高（去掉状态栏） window.screen.availHeight
• 网页全文的高度 document.body.scrollHeight
• 滚动条卷上去的高度 document.body.scrollTop
• 网页可见区域宽高（加边线） document.body.offsetHeight
• 网页可见区域宽高（不加边线） document.body.clientHeight

js

[“1”, “2”, “3”].map(parseInt)

我们可以先来理解 map 函数的用法

array.map(function(currentValue,index,arr), thisValue)

var data = [1, 2, 3];

var arrayOfSquares = data.map(function (item) {
  return item * item;
});

console.log(arrayOfSquares); // [1, 4, 9]

所以本题即问
parseInt(‘1’, 0);
parseInt(‘2’, 1);
parseInt(‘3’, 2); // 二进制，‘3’不符合规范
parseInt方法 如果省略该参数或其值为 0，则数字将以 10 为基础来解析。

所以最终答案 为 [1,NaN,NaN]

[[3,2,1].reduce(Math.pow,[].reduce(Math.pow)]

• Math.pow返回 x 的 y 次幂的值。

arr.reduce(callback, initialValue)
reduce接受两个参数, 一个回调, 一个初始值.
回调函数接受四个参数 previousValue, currentValue, currentIndex, array
需要注意的是 If the array is empty and no initialValue was provided, TypeError would be thrown.
所以第二个表达式会报异常. 第一个表达式等价于 Math.pow(3, 2) => 9; Math.pow(9, 1) =>9

typeof instanceof

typeof 返回一个表示类型的字符串.
instanceof 运算符用来检测 constructor.prototype 是否存在于参数 object 的原型链上.

type	result
Undefined	“undefined”
Null	“object”
Boolean	“boolean”
Number	“number”
String	“string”
Symbol	“symbol”
Function	“function”
Object	“object”

怎么判断对象类型

1、 可以通过Object.prototype.toString.call(xxx),这样我们就可以获得类似[object Type]的字符串 // [object Object]
2、 instanceof 可以正确的判断对象的类型，因为内部机制是通过判断对象的原型链中是不是能找到类型的prototype // {} instanceof object //true

数组去重

• 思路1：定义一个新数组，并存放原数组的第一个元素，然后将元素组一一和新数组的元素对比，若不同则存放在新数组中
• 思路2：先将原数组排序，在与相邻的进行比较，如果不同则存入新数组。
• 思路3：利用对象属性存在的特性，如果没有该属性则存入新数组。
• 思路4（最常用）：使用es6 set
  let arr= [1, 2, 3, 3, 5, 7, 2, 6, 8];
  console.log([…new Set(arr)]);

数组合并去重并排序

let arr1 = [1, 25, 2, 26, 1234, 6, 213];
let arr2 = [2, 6, 2134, 6, 31, 623];
let c = [...new Set([...arr1, ...arr2])].sort((a, b) => {
	return a - b;
});

proto / prototype

最肤浅的理解就是，每个对象都有__proto__属性，但只有函数对象才有prototype

js如何继承

1. 使用原型链继承：既继承了父类的模版，又继承了父类的原型对象
2. 使用call的方式：继承了父类的模版，但不继承父类的原型对象

事件流向

事件冒泡
事件捕获
addEventListener 最后一个参数true代表捕获反之冒泡

osi模型

七层结构： 物理层，数据链路层，网络层，传输层，会话层，表示层，应用层
tcp，ucp属于传输层
http属于应用层

vue相关

vue双向绑定

原理：
利用Object.defineProperty()这个方法重新定义了对象获取属性值(get)和设置属性值(set)的操作来实现

缺点：
双向数据流是自动管理状态的，但是在实际应用中会有很多不得不手动处理状态的逻辑，使得程序复杂度上升，难以调试

computed、watch、methods

区别

• 前两者自动追踪数据，执行相关函数，最后一个手动调用
• computed是计算属性，用法与data一致
• watch像事件监听，对象发生变化时，执行相关操作
• methods与js中执行方法类似
• computed通常只有get属性
• 数据变化的同时，进行异步操作或者是比较大的开销，那么watch为最佳选择
• watch的对象必须事先声明

组件封装

目的
为了重用，提高开发效率和代码质量
注意
低耦合，单一职责，可复用性，可维护性

js异步加载

• 动态生成 script标签
• 添加h5的async、defer属性
• async是下载完成就执行，defer是渲染完再执行

async/defer

状态	备注
无async/defer	浏览器会立即加载并执行指定的脚本，“立即”指的是在渲染该script标签之下的文档元素之前，也就是说不等待后续载入的文档元素，读到就加载并执行，并非异步执行
async	加载和渲染后续文档元素的过程将和script.js的加载与执行并行进行（异步）
defer	加载和渲染后续文档元素的过程将和script.js的加载并行进行（异步）,但script.js的执行要在所有元素解析完成之后，DOMContentLoaded事件触发之前完成

---

注意 async是一个乱序执行的主，用处不大，因为它完全不考虑依赖，不过它对于那些可以不依赖任何脚本或不被任何脚本依赖的脚本来说非常合适

CDN

内容分发网络，基本思路是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节，使内容传输的更快、更稳定

箭头函数

其实是没有this的，这个函数中的this只取决于它外面的第一个不是箭头函数的函数的this

怎么判断页面是否加载完成

Load事件触发，代表页面中的DOM、CSS、js、图片已全部加载完毕
DOMContentLoaded事件触发代表初始的HTML被完全加载和解析，不需要等待css，js，图片加载

jsonp和cors

jsonp原理，利用script标签，拼接callback回调函数
cors 服务端设置 Access-Control-Allow-Orign

待续