面试题汇总-前端基础（一）

2019.8.13
1.什么是闭包
闭包就是连接内部函数和外部函数的桥梁，用函数嵌套实现内部函数请求到外部函数的变量，闭包的变量是一直存在内存中的，因为一直被引用，不会被垃圾回收机制回收

• 函数嵌套
• 函数返回函数
  应用场景：
  1.定义私有方法
  2.setTimeout传参

let callLater = function (paramA, paramB, paramC) {
    return function(){
        console.log(paramA)
    }
}
let fn = callLater('box', "display", "none");
let hideMenu = setTimeout(fn, 5000);

---

2019.8.14
2.如何理解面向对象
参考博客链接
面向对象是一种编程思想，用构造函数和原型链封装各个独立的有自己的属性和方法的对象，对象可以接收数据，处理数据，传送数据给其他对象，对象可以从父级对象继承属性和方法

---

3. 前端性能优化的方法？
参考博客链接

• 减少请求数量
  合并：js/css文件
  图片处理：雪碧图，Base64格式
  使用缓存
• 减少资源大小
  压缩：css/js/图片压缩
• 优化网络连接
  使用cdn
  dns预解析
• 优化资源加载
  资源加载位置：和样式相关文件放在head标签中，先外链后本页，js文件放在body底部引用
  资源加载时机：资源懒加载、资源预加载、模块按需加载
• 减少重绘回流
  减少dom操作、页面效果尽量使用css实现而不是js（因为css实现不会阻塞js进程）
• webpack优化

https://juejin.im/post/5b0c3b53f265da09253cbed0
图片预加载：图片还不需要展示的时候就去加载
图片懒加载：大的图片在需要用到的时候才去加载

扩展问题：CSS和JS的位置会影响页面的效率，为什么？

css放在顶部head里面是因为这样才可以让dom树和render树并行渲染
js放在底部是因为html 页面渲染是从上往下的，需要先让页面加载完成，再处理js交互

详解：css加载过程中不会影响到DOM树的生成，但是会影响到Render树的生成，进而影响到layout
所以一般来说，style的link标签尽量放在head里面，因为在解析DOM树的时候是自上而下的，而css样式又是通过异步加载的，这样的话，
解析DOM树的body节点和加载CSS样式尽可能的并行，加快Render树生成的速度。
js脚本应该放在底部，原因在于js线程和GUI渲染是互斥的关系，如果js放在首部。
当下载js的时候，会影响渲染线程绘制页面，js的作用主要是处理交互，而交互必须得先让页面呈现才能进行，所以为了保证用户体验，尽量让页面先绘制出来。

---

4. 页面从输入 URL 到页面加载显示完成
参考博客链接

• dns解析（网址到IP地址的转换）
• tcp连接
• 发送http请求
• 服务器处理请求并返回http报文
• 浏览器解析渲染页面

---

2019.8.20
5.浏览器缓存：强缓存和协商缓存
参考博客链接
强缓存是利用http的返回头中的Expires/Cache-Control两个字段来控制的，用来表示资源的缓存时间；
Expires:表示资源的失效时间，在这个时间之前，资源是缓存的
Cache-Control:该字段的max-age是一个相对时间，代表资源的有效期。优先级比Expires高

协商缓存就是由服务器来确定缓存资源是否可用，所以客户端和服务端要通过某种标识来进行通信，从而让服务器判断请求资源是否可以访问。

• HTTP响应报文Last-Modify表示资源最后的修改时间，http请求头中会包含If-Modified-Since，该值就是缓存之前返回的Last-Modified，根据资源的最后修改时间判断是否缓存

• HTTP响应报文中Etag是一个校验码，资源有更新时etag会更新，响应头中会包含If-None-Match,根据这个值是否变化判断是否缓存（优先级比Last-Modify高）

缓存类型	获取资源方式	状态码	发送请求到服务器	f5刷新是否有效
强缓存	从缓存取	200	否，直接从缓存取	无效
协商缓存	从缓存取	304	是，通过服务器来告知缓存是否可用	有效

---

6.对web安全的理解

---

7.Javascript事件循环机制(event loop)
事件循环指的是计算机系统的一种运行机制，js用这种机制解决单线程运行带来的一些问题。
在程序中设置两个线程，一个负责程序本身的运作，称为主线程，另一个负责主程序与其他进程（异步函数）的通信，称为事件循环线程。

• i.什么是事件队列？

事件队列是一个存储着待执行任务的队列，其中的任务严格按照时间先后顺序执行，先进先出的顺序

• ii.Promise的含义和用法？

Promise保存这个某个未来才会结束的事件，这个事件是放在异步函数的回调函数里，它会加到事件队列里，当所有同步任务执行完才会返回结果到主线程

• iii.什么是macro task(宏任务)和micro task(微任务)？

macro task:setTimeout, setInterval, setImmediate, I/O, UI rendering
micro task:process.nextTick, Promise, MutationObserver
任务队列中，在每一次事件循环中，宏任务只会提取一个执行，而微任务会一直提取，直到微任务为空为止。所以事件循环的执行顺序是主线程-》微任务-》宏任务
ex:

setTimeout(()=>{
    console.log('A');
},0);
var obj={
    func:function () {
        setTimeout(function () {
            console.log('B')
        },0);
        return new Promise(function (resolve) {
            console.log('C');//Promise新建后立即执行
            resolve();
        })
    }
};
obj.func().then(function () {
    console.log('D')
});
console.log('E');

/*
主线程：[c,e]
宏任务：[a,b]
微任务：[d]
打印顺序：c/e/d/a/b
事件队列是先进先出的顺序
*/