1、vue-router 的原理
- 学习博客:
2、如何让li标签里的a标签,确定点击的是li标签而不是a标签
target和currentTarget的区别
3、HTTP2.0特性 多看
学习博客:https://segmentfault.com/a/1190000016656529
4、前端缓存,前端要做什么
5、addEventListener第三个参数除了(true 和 false)还有什么?
MDN文档:https://developer.mozilla.org/zh-CN/docs/Web/API/EventTarget/addEventListener
学习博客:https://www.jianshu.com/p/bad857d649f2
6、axios发送多个请求时如何处理(promise.all)
通过axios.all、axios. spread 来处理: https://www.cnblogs.com/Vayne-N/p/11704565.html
阮一峰ES6文档:https://es6.ruanyifeng.com/#docs/promise
7、JSONP回调文本与JSON有什么区别
-
跨域处理学习博客:https://blog.csdn.net/cuixiaogang110/article/details/81948173
- 由于跨域访问的只限制xhr类型的请求,所以js中就利用了这一特点,让服务端不在返回的是一个JSON格式的数据,而是返回一段JS代码,将JSON的数据以参数的形式传递到这个函数中,而函数的名称就是callback参数的值
-
CORS处理跨域问题:https://segmentfault.com/a/1190000006727486
-
跨域JSONP,CORS前端要做什么
8、我要让10个div平均分宽度,在同一行如何处理
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.container {
display: flex;
// flex-flow: row nowrap; 简写
flex-direction: row;
flex-wrap: nowrap;
}
.box {
300px;
height: 300px;
background: red;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</body>
</html>
9、一百万个元素选择器会大于id选择选择器吗
不能
学习博客:https://www.zhangxinxu.com/wordpress/2012/08/256-class-selector-beat-id-selector/
10、组件传值,bus总线机制是什么
11、前端优化你会怎么做
预加载、怎么预加载
12、父div设置margin-top: 10px; 父div下的子div设置margin-top:20px,结果只有子元素div的margin-top:20px;
纵向margin重叠问题,父元素设置overflow: hidden; 激活BFC属性即可解决
13、手写bind
Function.prototype.myBind = (that, ...args) => {
const funcThis = this;
return function(..._args) {
return funcThis.apply(that, args.concat(_args));
}
}
14、promise只是为了解决回调地狱吗
Promise的真正意义--不只为回调地狱:https://blog.csdn.net/napoleonxxx/article/details/90707243
15、一个http请求包含什么
http 请求包含哪几个部分(请求行、请求头、请求体):https://blog.csdn.net/stone_tomcate/article/details/100686635
16、Memory Cache (内存中的缓存)和 Disk Cache(存储在硬盘中的缓存) 的区别
Memory Cache
-
Memory Cache 也就是内存中的缓存,读取内存中的数据肯定比磁盘快。但是内存缓存虽然读取高效,可是缓存持续性很短,会随着进程的释放而释放。 一旦我们关闭 Tab 页面,内存中的缓存也就被释放了。
-
当我们访问过页面以后,再次刷新页面,可以发现很多数据都来自于内存缓存
-
从内存中读取缓存
-
那么既然内存缓存这么高效,我们是不是能让数据都存放在内存中呢?
- 先说结论,这是不可能的。首先计算机中的内存一定比硬盘容量小得多,操作系统需要精打细算内存的使用,所以能让我们使用的内存必然不多。内存中其实可以存储大部分的文件,比如说 JSS、HTML、CSS、图片等等。但是浏览器会把哪些文件丢进内存这个过程就很玄学了,我查阅了很多资料都没有一个定论。
-
当然,我通过一些实践和猜测也得出了一些结论:
- 对于大文件来说,大概率是不存储在内存中的,反之优先
- 当前系统内存使用率高的话,文件优先存储进硬盘
Disk Cache
- Disk Cache 也就是存储在硬盘中的缓存,读取速度慢点,但是什么都能存储到磁盘中,比之 Memory Cache 胜在容量和存储时效性上。
- 在所有浏览器缓存中,Disk Cache 覆盖面基本是最大的。它会根据 HTTP Herder 中的字段判断哪些资源需要缓存,哪些资源可以不请求直接使用,哪些资源已经过期需要重新请求。并且即使在跨站点的情况下,相同地址的资源一旦被硬盘缓存下来,就不会再次去请求数据。