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
事件队列是先进先出的顺序
*/
网友评论