4月22日上午
代码精简,且结构与样式分离,易于维护
代码量减少了,减少了大量的带宽,页面加载的也更快,提升了用户的体验
对SEO搜索引擎更加友好,且H5又新增了许多语义化标签更是如此
允许更多炫酷的页面效果,丰富了页面
符合W3C标准,保证网站不会因为网络应用的升级而被淘汰
缺点: 不同浏览器对web标准默认值不同,所以更容易出现对浏览器的兼容性问题。
改变a标签css属性的排列顺序
只需要记住LoVe HAte
原则就可以了:
link→visited→hover→active
比如下面错误的代码顺序:
a:hover{
color: green;
text-decoration: none;
}
a:visited{ /* visited在hover后面,这样的话hover事件就失效了 */
color: red;
text-decoration: none;
}
正确的做法是将两个事件的位置调整一下。
注意⚠️各个阶段的含义:
a:link
:未访问时的样式,一般省略成aa:visited
:已经访问后的样式a:hover
:鼠标移上去时的样式a:active
:鼠标按下时的样式
const text = document.getElementById('text');
text.onclick = function (e) {
console.log('onclick')
}
text.onfocus = function (e) {
console.log('onfocus')
}
text.onmousedown = function (e) {
console.log('onmousedown')
}
text.onmouseenter = function (e) {
console.log('onmouseenter')
}
答案:
'onmouseenter'
'onmousedown'
'onfocus'
'onclick'
对某些数据的修改就能自动更新视图,让开发者不用再去操作DOM,有更多的时间去思考业务逻辑。
首先Vue最核心的两个特点,「响应式」和「组件化」。
「响应式」:这也就是vue.js最大的优点,通过MVVM思想实现数据的双向绑定,通过虚拟DOM让我们可以用数据来操作DOM,而不必去操作真实的DOM,提升了性能。且让开发者有更多的时间去思考业务逻辑。
「组件化」:把一个单页应用中的各个模块拆分到一个个组件当中,或者把一些公共的部分抽离出来做成一个可复用的组件。所以组件化带来的好处就是,提高了开发效率,方便重复使用,使项目的可维护性更强。
「虚拟DOM」,当然,这个不是vue中独有的。
「缺点」:基于对象配置文件的写法,也就是options写法,开发时不利于对一个属性的查找。另外一些缺点,在小项目中感觉不太出什么,vuex的魔法字符串,对ts的支持。兼容性上存在一些问题。
最明显的是在显示上,hash
模式的URL
中会夹杂着#
号,而history
没有。
Vue
底层对它们的实现方式不同。hash
模式是依靠onhashchange
事件(监听location.hash
的改变),而history
模式是主要是依靠的HTML5 history
中新增的两个方法,pushState()
可以改变url
地址且不会发送请求,replaceState()
可以读取历史记录栈,还可以对浏览器记录进行修改。
当真正需要通过URL
向后端发送HTTP
请求的时候,比如常见的用户手动输入URL
后回车,或者是刷新(重启)浏览器,这时候history
模式需要后端的支持。因为history
模式下,前端的URL
必须和实际向后端发送请求的URL
一致,例如有一个URL
是带有路径path
的(例如www.lindaidai.wang/blogs/id
),如果后端没有对这个路径做处理的话,就会返回404
错误。所以需要后端增加一个覆盖所有情况的候选资源,一般会配合前端给出的一个404
页面。
hash:
window.onhashchange = function(event){
// location.hash获取到的是包括#号的,如"#heading-3"
// 所以可以截取一下
let hash = location.hash.slice(1);
}
(技术栈是Vue
,没用过react
)
同上
4月22日下午
null
表示一个"无"
的对象,也就是该处不应该有值;而undefined
表示「未定义」。
在转换为数字时结果不同,Number(null)
为0
,而undefined
为NaN
。
使用场景上:
null
:
作为函数的参数,表示该函数的参数不是对象
作为对象原型链的终点
undefined
:
变量被声明了,但没有赋值时,就等于undefined
调用函数时,应该提供的参数没有提供,该参数等于undefined
对象没有赋值属性,该属性的值为undefined
函数没有返回值时,默认返回undefined
「冒泡排序」:
function bubbleSort (arr) {
for (let i = 0; i < arr.length; i++) {
let flag = true;
for (let j = 0; j < arr.length - i - 1; j++) {
if (arr[j] > arr[j + 1]) {
flag = false;
let temp = arr[j];
arr[j] = arr[j + 1];
arr[j + 1] = temp;
}
}
if (flag) break;
}
}
这个是优化过后的冒泡排序。用了一个flag
来优化,它的意思是:如果「某一次」循环中没有交换过元素,那么意味着排序已经完成了。
冒泡排序总会执行(N-1)+(N-2)+(N-3)+..+2+1趟,但如果运行到当中某一趟时排序已经完成,或者输入的是一个有序数组,那么后边的比较就都是多余的,为了避免这种情况,我们增加一个flag,判断排序是否在中途就已经完成(也就是判断有无发生元素交换)
「数组去重」:
Array.form(new Set(arr))
[...new Set(arr)]
for
循环嵌套,利用splice
去重
新建数组,利用indexOf
或者includes
去重
先用sort
排序,然后用一个指针从第0
位开始,配合while
循环去重
当然还有很多,例如用filter、reduce、Map、Object
等,具体可以看:
JavaScript数组去重(12种方法):https://segmentfault.com/a/1190000016418021
「Array.form(new Set(arr))
或[...new Set(arr)]
」
var arr = [1,1,2,5,6,3,5,5,6,8,9,8];
console.log(Array.from(new Set(arr)))
// console.log([...new Set(arr)])
「for
循环嵌套,利用splice
去重」:
function unique (origin) {
let arr = [].concat(origin);
for (let i = 0; i < arr.length; i++) {
for (let j = i + 1; j < arr.length; j++) {
if (arr[i] == arr[j]) {
arr.splice(j, 1);
j--;
}
}
}
return arr;
}
var arr = [1,1,2,5,6,3,5,5,6,8,9,8];
console.log(unique(arr))
「新建数组,利用indexOf
去重」:
function unique (arr) {
let res = []
for (let i = 0; i < arr.length; i++) {
if (!res.includes(arr[i])) {
res.push(arr[i])
}
}
return res;
}
var arr = [1,1,2,5,6,3,5,5,6,8,9,8];
console.log(unique(arr))
「先用sort
排序,然后用一个指针从第0
位开始,配合while
循环去重」:
function unique (arr) {
arr = arr.sort(); // 排序之后的数组
let pointer = 0;
while (arr[pointer]) {
if (arr[pointer] != arr[pointer + 1]) { // 若这一项和下一项不相等则指针往下移
pointer++;
} else { // 否则删除下一项
arr.splice(pointer + 1, 1);
}
}
return arr;
}
var arr = [1,1,2,5,6,3,5,5,6,8,9,8];
console.log(unique(arr))
4月23日上午
(从这家公司开始面试稍微有些难度了,面试官小哥哥人也很好,刚开始是一个高冷男神,但是在呆呆的猛烈回答下终于还是对我露出了微笑????,还说他也是掘友,有看过我的文章...掘友真是无处不在啊,感动????)
这道题我会先大概介绍一下Promise
:
Promise
是一个对象,它代表了一个异步操作的最终完成或者失败。由于它的then
方法和catch、finally
方法会返回一个新的Promise
所以可以允许我们链式调用,解决了传统的回调地狱问题。
再说一下then
以及catch
方法:
(此处我是直接拿我之前的一篇文章《45道Promise题》那里的总结)
Promise
的状态一经改变就不能再改变。(见3.1)
.then
和.catch
都会返回一个新的Promise
。(上面的????1.4证明了)
catch
不管被连接到哪里,都能捕获上层未捕捉过的错误。(见3.2)
在Promise
中,返回任意一个非 promise
的值都会被包裹成 promise
对象,例如return 2
会被包装为return Promise.resolve(2)
。
Promise
的 .then
或者 .catch
可以被调用多次, 但如果Promise
内部的状态一经改变,并且有了一个值,那么后续每次调用.then
或者.catch
的时候都会直接拿到该值。(见3.5)
.then
或者 .catch
中 return
一个 error
对象并不会抛出错误,所以不会被后续的 .catch
捕获。(见3.6)
.then
或 .catch
返回的值不能是 promise 本身,否则会造成死循环。(见3.7)
.then
或者 .catch
的参数期望是函数,传入非函数则会发生值透传。(见3.8)
.then
方法是能接收两个参数的,第一个是处理成功的函数,第二个是处理失败的函数,再某些时候你可以认为catch
是.then
第二个参数的简便写法。(见3.9)
.finally
方法也是返回一个Promise
,他在Promise
结束的时候,无论结果为resolved
还是rejected
,都会执行里面的回调函数。
另外也可以说一下finally
方法:
.finally()
方法不管Promise
对象最后的状态如何都会执行
.finally()
方法的回调函数不接受任何的参数,也就是说你在.finally()
函数中是没法知道Promise
最终的状态是resolved
还是rejected
的
它最终返回的默认会是一个「上一次的Promise对象值」,不过如果抛出的是一个异常则返回异常的Promise
对象。
最后可以说一下all
以及race
方法:
Promise.all()
的作用是接收一组异步任务,然后并行执行异步任务,并且在所有异步操作执行完后才执行回调。
.race()
的作用也是接收一组异步任务,然后并行执行异步任务,只保留取第一个执行完成的异步操作的结果,其他的方法仍在执行,不过执行结果会被抛弃。
Promise.all().then()
结果中数组的顺序和Promise.all()
接收到的数组顺序一致。
all和race
传入的数组中如果有会抛出异常的异步任务,那么只有最先抛出的错误会被捕获,并且是被then
的第二个参数或者后面的catch
捕获;但并不会影响数组中其它的异步任务的执行。
这个,在上一题已经说到了:
all和race
传入的数组中如果有会抛出异常的异步任务,那么只有最先抛出的错误会被捕获,并且是被then
的第二个参数或者后面的catch
捕获;但并不会影响数组中其它的异步任务的执行。
由于它的then
方法和catch、finally
方法会返回一个新的Promise
所以可以允许我们链式调用
一开始整个脚本作为一个宏任务执行
执行过程中同步代码直接执行,宏任务进入宏任务队列,微任务进入微任务队列
当前宏任务执行完出队,检查微任务列表,有则依次执行,直到全部执行完
执行浏览器UI线程的渲染工作
检查是否有Web Worker
任务,有则执行
执行完本轮的宏任务,回到2,依此循环,直到宏任务和微任务队列都为空
(具体可以看这里:https://juejin.im/post/5e58c618e51d4526ed66b5cf#heading-1)
「层级关系」:
window > document > html > body
window
是BOM
的核心对象,它一方面用来获取或设置浏览器的属性和行为,另一方面作为一个全局对象。
document
对象是一个跟文档相关的对象,拥有一些操作文档内容的功能。但是地位没有window
高。
html
元素对象和document
元素对象是属于html
文档的DOM
对象,可以认为就是html
源代码中那些标签所化成的对象。他们跟div、select
什么对象没有根本区别。
(我是这样记的,整个浏览器中最大的肯定就是窗口window
了,那么进来的我不管你是啥,就算你是document
也得给我盘着)
第三个参数涉及到冒泡和捕获,是true
时为捕获,是false
则为冒泡
使用Event
使用customEvent
(可以传参数)
使用document.createEvent('CustomEvent')和initCustomEvent()
「创建自定义事件」
原生自定义事件有三种写法:
使用Event
let myEvent = new Event('event_name');
使用customEvent
(可以传参数)
let myEvent = new CustomEvent('event_name', {
detail: {
// 将需要传递的参数放到这里
// 可以在监听的回调函数中获取到:event.detail
}
})
使用document.createEvent('CustomEvent')和initCustomEvent()
let myEvent = document.createEvent('CustomEvent');// 注意这里是为'CustomEvent'
myEvent.initEvent(
// 1. event_name: 事件名称
// 2. canBubble: 是否冒泡
// 3. cancelable: 是否可以取消默认行为
)
createEvent
:创建一个事件
initEvent
:初始化一个事件
可以看到,initEvent
可以指定3个参数。
(有些文章中会说还有第四个参数detail
,但是我查看了W3C
上并没有这个参数,而且实践了一下也没有效果)
「事件的监听」
自定义事件的监听其实和普通事件的一样,使用addEventListener
来监听:
button.addEventListener('event_name', function (e) {})
「事件的触发」
触发自定义事件使用dispatchEvent(myEvent)
。
注意⚠️,这里的参数是要自定义事件的对象(也就是myEvent
),而不是自定义事件的名称('myEvent'
)
「案例」
来看个案例吧:
// 1.
// let myEvent = new Event('myEvent');
// 2.
// let myEvent = new CustomEvent('myEvent', {
// detail: {
// name: 'lindaidai'
// }
// })
// 3.
let myEvent = document.createEvent('CustomEvent');
myEvent.initEvent('myEvent', true, true)
let btn = document.getElementsByTagName('button')[0]
btn.addEventListener('myEvent', function (e) {
console.log(e)
console.log(e.detail)
})
setTimeout(() => {
btn.dispatchEvent(myEvent)
}, 2000)
冒泡指的是:当给某个目标元素绑定了事件之后,这个事件会依次在它的父级元素中被触发(当然前提是这个父级元素也有这个同名称的事件,比如子元素和父元素都绑定了click
事件就触发父元素的click
)。
捕获则是从上层向下层传递,与冒泡相反。
(非常好记,你就想想水底有一个泡泡从下面往上传的,所以是冒泡)
来看看这个例子:
-
冒泡结果:button > li > ul > document > window
捕获结果:window > document > ul > li > button
并不是所有的事件都有冒泡的,例如以下事件就没有:
onblur
onfocus
onmouseenter
onmouseleave
function myNew (fn, ...args) {
let instance = Object.create(fn.prototype);
let result = fn.call(instance, ...args)
return typeof result === 'object' ? result : instance;
}
typeof
表示是对某个变量类型的检测,基本数据类型除了null
都能正常的显示为对应的类型,引用类型除了函数会显示为'function'
,其它都显示为object
。
而instanceof
它主要是「用于检测某个构造函数的原型对象在不在某个对象的原型链上」。
这只是 JS 存在的一个悠久 Bug。在 JS 的最初版本中使用的是 32 位系统,为了性能考虑使用低位存储变量的类型信息,000 开头代表是对象然而 null 表示为全零,所以将它错误的判断为 object 。
instanceof
它主要是「用于检测某个构造函数的原型对象在不在某个对象的原型链上」。
算了,直接手写实现吧:
function myInstanceof (left, right) {
let proto = Object.getPrototypeOf(left);
while (true) {
if (proto === null) return false;
if (proto === right.prototype) return true;
proto = Object.getPrototypeOf(proto)
}
}
指向最后调用函数的那个对象,是函数运行时内部自动生成的一个内部对象,只能在函数内部使用
函数调用时,指向最后调用的那个对象
(答案参考童欧巴的一篇webpack
面试文章哦:「吐血整理」再来一打Webpack面试题(持续更新))
loader它是一个转换器,只专注于转换文件这一个领域,完成压缩、打包、语言编译,「它仅仅是为了打包」。并且运行在打包之前。
而plugin是一个扩展器,它丰富了webpack本身,为其进行一些其它功能的扩展。「它不局限于打包,资源的加载,还有其它的功能」。所以它是在整个编译周期都起作用。
HTTP的责任是去定义数据,在两台计算机相互传递信息时,HTTP规定了每段数据以什么形式表达才是能够被另外一台计算机理解。
而TCP所要规定的是数据应该怎么传输才能稳定且高效的传递与计算机之间。
(还可以再扩展)
TCP是一个面向连接的、可靠的、基于字节流的传输层协议。
UDP是一个面向无连接的传输层协议。
TCP为什么可靠,是因为它有三次握手来保证双方都有接受和发送数据的能力。
字节流服务:将大块数据分割为以报文段为单位的数据包进行管理
虚拟DOM
本质就是用一个原生的JavaScript
对象去描述一个DOM
节点。是对真实DOM
的一层抽象。
由于在浏览器中操作DOM
是很昂贵的。频繁的操作DOM
,会产生一定的性能问题,因此我们需要这一层抽象,在patch
过程中尽可能地一次性将差异更新到DOM
中,这样保证了DOM
不会出现性能很差的情况。
另外还有很重要的一点,也是它的设计初衷,为了更好的跨平台,比如Node.js
就没有DOM
,如果想实现SSR
(服务端渲染),那么一个方式就是借助Virtual DOM
,因为Virtual DOM
本身是JavaScript
对象。
Vue2.x
中的虚拟DOM
主要是借鉴了snabbdom.js
,Vue3
中借鉴inferno.js
算法进行优化。
看三元的《(1.6w字)浏览器灵魂之问,请问你能接得住几个?》
https://juejin.im/post/5df5bcea6fb9a016091def69
分别从网络,解析,渲染来说
面试的问题基本都答出来了,当然后面还有一个技术总监的电话面,主要是问了一些工作相关的问题。
其实这家公司开出的条件也挺让呆呆心动的,包括氛围感觉也挺好,只不过可能还不是自己想要的吧,所以最终也是没去,挺可惜的...如果面试我的那位小哥哥哥看到了这里,还请不要难过哈,我们江湖会再见的????。
4月27日
一面
并详细说一下前面三道
(额,呆呆能力有限只答出来了前面三道)
二面
基本原理:主要就是利用 script
标签的src
属性没有跨域的限制,通过指向一个需要访问的地址,由服务端返回一个预先定义好的 Javascript
函数的调用,并且将服务器数据以该函数参数的形式传递过来,此方法需要前后端配合完成。
执行过程:
前端定义一个解析函数(如: jsonpCallback = function (res) {}
)
通过params
的形式包装script
标签的请求参数,并且声明执行函数(如cb=jsonpCallback
)
后端获取到前端声明的执行函数(jsonpCallback
),并以带上参数且调用执行函数的方式传递给前端
前端在script
标签返回资源的时候就会去执行jsonpCallback
并通过回调函数的方式拿到数据了。
缺点:
只能进行GET
请求
优点:
兼容性好,在一些古老的浏览器中都可以运行
代码实现:
(具体可以看我的这篇文章:JSONP原理及实现:https://www.jianshu.com/p/88bb82718517)
跨域的产生来源于现代浏览器所通用的同源策略
,所谓同源策略,是指只有在地址的:
协议名
域名
端口名
均一样的情况下,才允许访问相同的cookie、localStorage,以及访问页面的DOM
或是发送Ajax
请求。若在不同源的情况下访问,就称为跨域。
例如以下为同源:
http://www.example.com:8080/index.html
http://www.example.com:8080/home.html
以下为跨域:
http://www.example.com:8080/index.html
http://www3.example.com:8080/index.html
注意⚠️:
但是有两种情况:http
默认的端口号为80
,https
默认端口号为443
。
所以:
http://www.example.com:80 === http://www.example.com
https://www.example.com:443 === https://www.example.com
「为什么浏览器会禁止跨域?」
「简答」:
首先,跨域只存在于浏览器端,因为我们知道浏览器的形态是很开放的,所以我们需要对它有所限制。
其次,同源策略主要是为了保证用户信息的安全,可分为两种:Ajax
同源策略和DOM
同源策略。
Ajax
同源策略主要是使得不同源的页面不能获取cookie
且不能发起Ajax
请求,这样在一定程度上防止了CSRF
攻击。
DOM
同源策略也一样,它限制了不同源页面不能获取DOM
,这样可以防止一些恶意网站在自己的网站中利用iframe
嵌入正规的网站并迷惑用户,以此来达到窃取用户信息。
「深答」:
首先,跨域只存在于浏览器端。浏览器它为web
提供了访问入口,并且访问的方式很简单,在地址栏输入要访问的地址或者点击某个链接就可以了,正是这种「开放的形态」,所以我们需要对它有所限制。
所以同源策略它的产生主要是为了保证用户信息的安全,防止恶意的网站窃取数据。分为两种:Ajax
同源策略与DOM
同源策略:
同源策略它算是浏览器安全的第一层屏障吧,因为就像CSRF
攻击,它只能限制不同源页面cookie
的获取,但是攻击者还可能通过其它的方式来达到攻击效果。
(注,上面提到的iframe
限制DOM
查询,案例如下)
// HTML
// JS
// 由于没有同源策略的限制,钓鱼网站可以直接拿到别的网站的Dom
const iframe = window.frames['yinhang']
const node = iframe.document.getElementById('你输入账号密码的Input')
console.log(`拿到了这个${node},我还拿不到你刚刚输入的账号密码吗`)
Ajax
同源策略它主要做了这两种限制:1.不同源页面不能获取cookie
;2.不同源页面不能发起Ajax
请求。我认为它是防止CSRF
攻击的一种方式吧。因为我们知道cookie
这个东西它主要是为了解决浏览器与服务器会话状态的问题,它本质上是存储在浏览器或本地文件中一个小小的文本文件,那么它里面一般都会存储了用户的一些信息,包括隐私信息。如果没有Ajax
同源策略,恶意网站只需要一段脚本就可以获取你的cookie
,从而冒充你的身份去给其它网站发送恶意的请求。
DOM
同源策略也一样,它限制了不同源页面不能获取DOM
。例如一个假的网站利用iframe
嵌套了一个银行网站mybank.com,并把宽高或者其它部分调整的和原银行网站一样,仅仅只是地址栏上的域名不同,若是用户没有注意的话就以为这个是个真的网站。如果这时候用户在里面输入了账号密码,如果没有同源策略,那么这个恶意网站就可以获取到银行网站中的DOM
,也就能拿到用户的输入内容以此来达到窃取用户信息的攻击。
参考:
https://segmentfault.com/a/1190000015597029
https://juejin.im/post/5cad99796fb9a068ab40a29a
跨域资源共享(CORS
)是一种机制,是W3C标准。它允许浏览器向跨源服务器,发出XMLHttpRequest
或Fetch
请求。并且整个CORS
通信过程都是浏览器自动完成的,不需要用户参与。
而使用这种跨域资源共享
的前提是,浏览器必须支持这个功能,并且服务器端也必须同意这种"跨域"
请求。因此实现CORS
的关键是服务器需要服务器。通常是有以下几个配置:
「Access-Control-Allow-Origin」
「Access-Control-Allow-Methods」
「Access-Control-Allow-Headers」
「Access-Control-Allow-Credentials」
「Access-Control-Max-Age」
具体可看:https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS#Preflighted_requests
过程分析:
「简单回答」:
当我们发起跨域请求时,「如果是非简单请求」,浏览器会帮我们自动触发预检请求,也就是 OPTIONS 请求,用于确认目标资源是否支持跨域。「如果是简单请求,则不会触发预检,直接发出正常请求。」
浏览器会根据服务端响应的 header 自动处理剩余的请求,如果响应支持跨域,则继续发出正常请求,如果不支持,则在控制台显示错误。
「详细回答」:
浏览器先根据同源策略对前端页面和后台交互地址做匹配,若同源,则直接发送数据请求;若不同源,则发送跨域请求。
服务器收到浏览器跨域请求后,根据自身配置返回对应文件头。若未配置过任何允许跨域,则文件头里不包含 Access-Control-Allow-origin
字段,若配置过域名,则返回 Access-Control-Allow-origin + 对应配置规则里的域名的方式
。
浏览器根据接受到的 响应头里的 Access-Control-Allow-origin
字段做匹配,若无该字段,说明不允许跨域,从而抛出一个错误;若有该字段,则对字段内容和当前域名做比对,如果同源,则说明可以跨域,浏览器接受该响应;若不同源,则说明该域名不可跨域,浏览器不接受该响应,并抛出一个错误。
在CORS
中有简单请求
和非简单请求
,简单请求是不会触发CORS
的预检请求的,而非简单请求会。
“需预检的请求”
要求必须首先使用 OPTIONS
方法发起一个预检请求到服务器,以获知服务器是否允许该实际请求。"预检请求“的使用,可以避免跨域请求对服务器的用户数据产生未预期的影响。
(关于更多CORS的内容可以看我的另一篇文章:CORS原理及实现:https://www.jianshu.com/p/b2bdf55e1bf5)
这个当时面试官和我说的是,中间会经过很多的站点,比如会经过湖南,或者其它城市,由各个城市的这些站点一层一层分发下去。
面的最惨的一次...因为这次面试是当天下午6点才去面的,在这之前呆呆已经经过了3轮面试的折磨,所以身心疲惫很不在状态。当然最主要的是自己确实准备的还不够充分,其实现在回过头来看看这些题都不太难的...
当天也小小的自闭了一下,整理好状态第二天好好总结吧 ????。
4月28日
(当时是电话面,一个小时20分钟,问了我大概五六十道题,我能想到的一共是50题,还有一些记不起来了)
CommonJS模块是运行时加载,ES6 Modules是编译时输出接口
CommonJS输出是值的拷贝;ES6 Modules输出的是值的引用,被输出模块的内部的改变会影响引用的改变
CommonJs导入的模块路径可以是一个表达式,因为它使用的是require()
方法;而ES6 Modules只能是字符串
CommonJS this
指向当前模块,ES6 Modules this
指向undefined
且ES6 Modules中没有这些顶层变量:arguments
、require
、module
、exports
、__filename
、__dirname
关于第一个差异,是因为CommonJS 加载的是一个对象(即module.exports
属性),该对象只有在脚本运行完才会生成。而 ES6 模块不是对象,它的对外接口只是一种静态定义,在代码静态解析阶段就会生成。
(具体可以看我的这篇文章:https://juejin.im/post/5eaacd175188256d4345ea3a)
模块的异步加载可以使用AMD
或者CMD
规范。
(具体可以看我的这篇文章:https://juejin.im/post/5eaacd175188256d4345ea3a)
封闭开放式原则、安全性
(应该还有,但是没想到)
利用reduce
,初始值传入一个Promise.resolve()
,之后往里面不停的叠加.then()
。(类似于这里https://juejin.im/post/5e58c618e51d4526ed66b5cf#heading-51)
利用forEach
,本质和reduce
原理相同。(类似于这里https://juejin.im/post/5e58c618e51d4526ed66b5cf#heading-53)
还可以用ES9
中的for...await...of
来实现。
并发的。不过Promise.all().then()
结果中数组的顺序和Promise.all()
接收到的数组顺序一致。
之前有用过用正则去除输入框的首尾空格,正则表达式为:var trimReg = /(^\s+)|(\s+$)/g
;不过后来由于Vue
中有一个修饰符.trim
,使用起来更方便(如v-model.trim="msg"
)就用这种方式多一些;再或者也可以用ES10
新出的trimStart
和trimEnd
来去除首尾空格。
用于校验手机号的正则:var phoneReg = /^1[3456789]\d{9}$/g
。
用正则写一个根据name获取cookie中的值的方法:
function getCookie(name) {
var match = document.cookie.match(new RegExp('(^| )' + name + '=([^;]*)'));
if (match) return unescape(match[2]);
}
详细介绍可以看这里:每日一题-JS篇-根据name获取cookie中值的方法:https://github.com/LinDaiDai/niubility-coding-js/blob/master/%E6%AF%8F%E6%97%A5%E4%B8%80%E9%A2%98/%E6%AF%8F%E6%97%A5%E4%B8%80%E9%A2%98-JS%E7%AF%87.md#%E7%94%A8%E6%AD%A3%E5%88%99%E5%86%99%E4%B8%80%E4%B8%AA%E6%A0%B9%E6%8D%AEname%E8%8E%B7%E5%8F%96cookie%E4%B8%AD%E7%9A%84%E5%80%BC%E7%9A%84%E6%96%B9%E6%B3%95
^
要是放在[]
里的话就表示"除了^后面的内容都能匹配"
,也就是非的意思。
例如:
(除了l
,其它都变成了"帅"
)
var str = 'lindaidai';
console.log(str.replace(/[^l]/g, '帅'));
// l帅帅帅帅帅帅帅帅
反之,如果是不在[]
里的话则表示开头匹配:
(只有l
变成了"帅"
)
var str = 'lindaidai';
console.log(str.replace(/^l/g, '帅'));
hash
是跟整个项目的构建相关,只要项目里有文件更改,整个项目构建的hash
值都会更改,并且全部文件都共用相同的hash
值。(粒度整个项目)
chunkhash
是根据不同的入口进行依赖文件解析,构建对应的chunk
(模块),生成对应的hash
值。只有被修改的chunk
(模块)在重新构建之后才会生成新的hash
值,不会影响其它的chunk
。(粒度entry
的每个入口文件)
contenthash
是跟每个生成的文件有关,每个文件都有一个唯一的hash
值。当要构建的文件内容发生改变时,就会生成新的hash
值,且该文件的改变并不会影响和它同一个模块下的其它文件。(粒度每个文件的内容)
(具体可以看我简书上的这篇文章:https://www.jianshu.com/p/486453d81088)
这里只是说明了三种hash
的不同...至于原理暂时没了解。
这个问题在上一个问题中已经说明了,要看webpack
的配置。
有三种情况:
如果是hash
的话,是和整个项目有关的,有一处文件发生更改则所有文件的hash
值都会发生改变且它们共用一个hash
值;
如果是chunkhash
的话,只和entry
的每个入口文件有关,也就是同一个chunk
下的文件有所改动该chunk
下的文件的hash
值就会发生改变
如果是contenthash
的话,和每个生成的文件有关,只有当要构建的文件内容发生改变时才会给该文件生成新的hash
值,并不会影响其它文件。
在webpack
中有两种处理图片的loader
:
file-loader
:解决CSS
等中引入图片的路径问题;(解决通过url
,import/require()
等引入图片的问题)
url-loader
:当图片小于设置的limit
参数值时,url-loader
将图片进行base64
编码(当项目中有很多图片,通过url-loader
进行base64
编码后会减少http
请求数量,提高性能),大于limit参数值,则使用file-loader
拷贝图片并输出到编译目录中;
详细使用可以查看这里:霖呆呆的webpack之路-loader篇:https://github.com/LinDaiDai/niubility-coding-js/blob/master/%E5%89%8D%E7%AB%AF%E5%B7%A5%E7%A8%8B%E5%8C%96/webpack/%E9%9C%96%E5%91%86%E5%91%86%E7%9A%84webpack%E4%B9%8B%E8%B7%AF-loader%E7%AF%87.md#file-loader
「回流」:
触发条件:
当我们对 DOM 结构的修改引发 DOM 几何尺寸变化的时候,会发生回流
的过程。
例如以下操作会触发回流:
一个 DOM 元素的几何属性变化,常见的几何属性有width
、height
、padding
、margin
、left
、top
、border
等等, 这个很好理解。
使 DOM 节点发生增减
或者移动
。
读写 offset
族、scroll
族和client
族属性的时候,浏览器为了获取这些值,需要进行回流操作。
调用 window.getComputedStyle
方法。
回流过程:由于DOM的结构发生了改变,所以需要从生成DOM这一步开始,重新经过样式计算
、生成布局树
、建立图层树
、再到生成绘制列表
以及之后的显示器显示这整一个渲染过程走一遍,开销是非常大的。
「重绘」:
触发条件:
当 DOM 的修改导致了样式的变化,并且没有影响几何属性的时候,会导致重绘
(repaint
)。
重绘过程:由于没有导致 DOM 几何属性的变化,因此元素的位置信息不需要更新,所以当发生重绘的时候,会跳过生存布局树
和建立图层树
的阶段,直接到生成绘制列表
,然后继续进行分块、生成位图等后面一系列操作。
「如何避免触发回流和重绘」:
避免频繁使用 style,而是采用修改class
的方式。
将动画效果应用到position
属性为absolute
或fixed
的元素上。
也可以先为元素设置display: none
,操作结束后再把它显示出来。因为在display
属性为none
的元素上进行的DOM操作不会引发回流和重绘
使用createDocumentFragment
进行批量的 DOM 操作。
对于 resize、scroll 等进行防抖/节流处理。
避免频繁读取会引发回流/重绘的属性,如果确实需要多次使用,就用一个变量缓存起来。
利用 CSS3 的transform
、opacity
、filter
这些属性可以实现合成的效果,也就是CPU
加速。
参考来源:https://juejin.im/post/5df5bcea6fb9a016091def69#heading-57
box-sizing: content-box
(W3C盒模型,又名标准盒模型):元素的宽高大小表现为内容的大小。
box-sizing: border-box
(IE盒模型,又名怪异盒模型):元素的宽高表现为内容 + 内边距 + 边框的大小。背景会延伸到边框的外沿。
这里我是按照子弈的总结答的:https://juejin.im/post/5d690c726fb9a06b155dd40d#heading-81
Flex布局(子元素是块级元素)
.box {
display: flex;
width: 100px;
height: 100px;
background-color: pink;
}
.box-center{
margin: auto;
background-color: greenyellow;
}
Flex布局
.box {
display: flex;
width: 100px;
height: 100px;
background-color: pink;
justify-content: center;
align-items: center;
}
.box-center{
background-color: greenyellow;
}
绝对定位实现(定位元素定宽定高)
.box {
position: relative;
height: 100px;
width: 100px;
background-color: pink;
}
.box-center{
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto;
width: 50px;
height: 50px;
background-color: greenyellow;
}
「简单回答:」
IE6~9
不支持,IE10~11
部分支持flex的2012版
,但是需要-ms-
前缀。
其它的主流浏览器包括安卓和IOS
基本上都支持了。
「详细回答:」
IE10部分支持2012,需要-ms-前缀
Android4.1/4.2-4.3部分支持2009 ,需要-webkit-前缀
Safari7/7.1/8部分支持2012, 需要-webkit-前缀
IOS Safari7.0-7.1/8.1-8.3部分支持2012,需要-webkit-前缀
可以到Can I use
上去查看,官网地址为:https://caniuse.com/
「比较常用的」:
em
:定义字体大小时以父级的字体大小为基准;定义长度单位时以当前字体大小为基准。例父级font-size: 14px
,则子级font-size: 1em;
为font-size: 14px;
;若定义长度时,子级的字体大小如果为14px
,则子级width: 2em;
为width: 24px
。
rem
:以根元素的字体大小为基准。例如html
的font-size: 14px
,则子级1rem = 14px
。
%
:以父级的宽度为基准。例父级width: 200px
,则子级width: 50%;height:50%;
为width: 100px;height: 100px;
vw和vh
:基于视口的宽度和高度(视口不包括浏览器的地址栏工具栏和状态栏)。例如视口宽度为1000px
,则60vw = 600px;
vmin和vmax
:vmin
为当前vw
和vh
中较小的一个值;vmax
为较大的一个值。例如视口宽度375px
,视口高度812px
,则100vmin = 375px;
,100vmax = 812px;
「不常用的:」
ex和ch
:ex
以字符"x"
的高度为基准;例如1ex
表示和字符"x"
一样长。ch
以数字"0"
的宽度为基准;例如2ch
表示和2个数字"0"
一样长。
「移动端布局总结」:
移动端布局的方式主要使用rem和flex,可以结合各自的优点,比如flex布局很灵活,但是字体的大小不好控制,我们可以使用rem和媒体查询控制字体的大小,媒体查询视口的大小,然后不同的上视口大小下设置设置html的font-size。
可单独制作移动端页面也可响应式pc端移动端共用一个页面。没有好坏,视情况而定,因势利导
(总结来源:玲珑)
「em:」
定义字体大小时以父级的字体大小为基准;定义长度单位时以当前字体大小为基准。例父级font-size: 14px
,则子级font-size: 1em;
为font-size: 14px;
;若定义长度时,子级的字体大小如果为14px
,则子级width: 2em;
为width: 24px
。
「rem:」
以根元素的字体大小为基准。例如html
的font-size: 14px
,则子级1rem = 14px
。
一个简易版的初始化根元素字体大小。
页面开头处引入下面这段代码,用于动态计算font-size
:
(假设你需要的1rem = 20px
)
(function () {
var html = document.documentElement;
function onWindowResize() {
html.style.fontSize = html.getBoundingClientRect().width / 20 + 'px';
}
window.addEventListener('resize', onWindowResize);
onWindowResize();
})();
document.documentElement
:获取document
的根元素
html.getBoundingClientRect().width
:获取html
的宽度(窗口的宽度)
监听window
的resize
事件
一般还需要配合一个meta
头:
如果没有人为去改变根元素字体大小的话,默认是1rem = 16px
;根元素默认的字体大小是16px
。
实话实说没太做过。
css代码:
html代码:
语法:
animation: name duration timing-function delay iteration-count direction;
值 | 描述 |
---|---|
animation-name | 规定需要绑定到选择器的 keyframe 名称。(mymove) |
animation-duration | 规定完成动画所花费的时间,以秒或毫秒计。(2s) |
animation-timing-function | 规定动画的速度曲线。(ease|linear|ease-in|cubic-bezier(n,n,n,n)) |
animation-delay | 规定在动画开始之前的延迟。(2s) |
animation-iteration-count | 规定动画应该播放的次数。(n | infinite) n次/无限 |
animation-direction | 规定是否应该轮流反向播放动画。(normal | alternate) 正常/反向 |
一句话介绍:steps()
功能符可以让动画不连续。
地位和作用:和贝塞尔曲线(cubic-bezier()
修饰符)一样,都可以作为animation
的第三个属性值。
和贝塞尔曲线的区别:贝塞尔曲线像是滑梯且有4个关键字(参数),而steps
像是楼梯坡道且只有number
和position
两个关键字。
语法:
steps(number, position)
number: 数值,表示把动画分成了多少段
position: 表示动画是从时间段的开头连续还是末尾连续。支持start
和end
两个关键字,含义分别如下:
start
:表示直接开始。
end
:表示戛然而止。是默认值。
具体可以看这里:https://www.zhangxinxu.com/wordpress/2018/06/css3-animation-steps-step-start-end/
Chrome
浏览器 -> more tools
-> Remote devices
-> chrome://inspect/#devices
Mac
+ IOS
+ Safari
V8引擎帮助我们实现了自动的垃圾回收管理,「利用浏览器渲染页面的空闲时间进行垃圾回收。」
(这里我用的是:https://juejin.im/post/5e8b261ae51d4546c0382ab4#heading-20 里的总结)
「栈内存的回收:」
栈内存调用栈上下文切换后就被回收,比较简单。
「堆内存的回收:」
V8的堆内存分为新生代内存和老生代内存,新生代内存是临时分配的内存,存在时间短,老生代内存存在时间长。
新生代内存回收机制:
新生代内存容量小,64位系统下仅有32M。新生代内存分为「From、To」两部分,进行垃圾回收时,先扫描From,将非存活对象回收,将存活对象顺序复制到To中,之后调换From/To,等待下一次回收
老生代内存回收机制
「晋升」:如果新生代的变量经过多次回收依然存在,那么就会被放入老生代内存中
「标记清除」:老生代内存会先遍历所有对象并打上标记,然后对正在使用或被强引用的对象取消标记,回收被标记的对象
「整理内存碎片」:把对象挪到内存的一端
(当然想要详细了解的话也可以看我的这篇文章:JavaScript进阶-内存机制(表情包初探))
由于我在项目中是会对axios
做一层封装,所以每次请求的域名也是写在配置文件中,有一个baseURL
字段专门用于存储它,所以只要改这个字段就可以达到替换所有请求http
为https
了。
当然后面我也有了解到:
利用meta
标签把http
请求换为https
:
参考上一题????。
在浏览器和服务器进行传输的时候,可以被nginx
代理所拦截,也可以被网关拦截。
HTTPS主要是采用对称密钥加密和非对称密钥加密组合而成的混合加密机制进行传输。
也就是发送密文的一方用"对方的公钥"进行加密处理"对称的密钥",然后对方在收到之后使用自己的私钥进行解密得到"对称的密钥",这在确保双发交换的密钥是安全的前提下使用对称密钥方式进行通信。
对称密钥加密和非对称密钥加密都有它们各种的优缺点,而混合加密机制就是将两者结合利用它们各自的优点来进行加密传输。
比如既然对称密钥的优点是加解密效率快,那么在客户端与服务端确定了连接之后就可以用它来进行加密传输。不过前提是得解决双方都能安全的拿到这把对称密钥。这时候就可以利用非对称密钥加密来传输这把对称密钥,因为我们知道非对称密钥加密的优点就是能保证传输的内容是安全的。
所以它的好处是即保证了对称密钥能在双方之间安全的传输,又能使用对称加密方式进行通信,这比单纯的使用非对称加密通信快了很多。以此来解决了HTTP中内容可能被窃听的问题。
其它HTTP相关的问题:
如:
HTTPS的工作流程
混合加密机制的好处
数字签名
ECDHE握手和RSA握手
向前安全性
这些问题都可以看到我的这篇文章:HTTPS面试问答:https://github.com/LinDaiDai/niubility-coding-js/blob/master/%E8%AE%A1%E7%AE%97%E6%9C%BA%E7%BD%91%E7%BB%9C/HTTPS%E9%9D%A2%E8%AF%95%E9%97%AE%E7%AD%94.md
这道题主要可以从数字签名
和数字证书
上来答。
当时我答的时候就把证书的颁发流程
、HTTPS
数字证书的验证过程完整的说了一遍就算过了。
具体可以看「HTTPS面试」????问答中的第5、6、7
问。
这个无非就是配合If-None-Match
来达到一个协商缓存
的作用。值为服务器某个资源的唯一标识。
具体可以看我的这篇文章:霖呆呆你来说说浏览器缓存吧
Token
其实就是「访问资源的凭证」。
一般是用户通过用户名和密码登录成功之后,服务器将登陆凭证做数字签名,加密之后得到的字符串作为token
。
它在用户登录成功之后会返回给客户端,客户端主要有这么几种存储方式:
存储在localStorage
中,每次调用接口的时候都把它当成一个字段传给后台
存储在cookie
中,让它自动发送,不过缺点就是不能跨域
拿到之后存储在localStorage
中,每次调用接口的时候放在HTTP
请求头的Authorization
字段里
(很明显我答的不够专业,欢迎补充,感谢????)
(很明显我答的不够专业,欢迎补充,感谢????)
用户登录成功之后的一些信息
(很明显我答的不够专业,欢迎补充,感谢????)
(很明显我答的不够专业,欢迎补充,感谢????)
(很明显我答的不够专业,欢迎补充,感谢????)
只会配置一些跨域方面的问题。
events {
worker_connections 1024;
}
http {
include mime.types;
default_type application/octet-stream;
sendfile on;
keepalive_timeout 65;
server {
listen 80;
server_name localhost;
location / {
proxy_pass http://localhost:8887;
add_header Access-Control-Allow-Origin *;
}
}
}
利用ngnix跨域的关键就是在配置文件中设置server
项,然后设置其中的location
属性,proxy_pass
:需要代理的服务器地址,add_header:给响应报文中添加首部字段,例如Access-Control-Allow-Origin
设置为*
,即允许所有的请求源请求。
具体可以看:Yiming君-面试题:nginx有配置过吗?反向代理知道吗?
https://juejin.im/post/5eb0f8aaf265da7ba65f7ba2
我们将请求发送到服务器,然后服务器对我们的请求进行转发,我们只需要和代理服务器进行通信就好。所以对于客户端来说,是感知不到服务器的。
唔...没有...
(...在电话那头默默的点头)
唔...知道...
这里我是按照:
https://mp.weixin.qq.com/s/2xyP4jVevuXrGov_VsWfvA
中的第13题答的。
放在methods
中,因为computed
会有惰性,并不能知道new Date()
的改变。
小小的写了一篇文章,可以看这里:数据权限如何控制
https://github.com/LinDaiDai/niubility-coding-js/blob/master/other/%E6%95%B0%E6%8D%AE%E6%9D%83%E9%99%90%E5%A6%82%E4%BD%95%E6%8E%A7%E5%88%B6.md
和面试官扯了一堆我数据权限判断的具体过程,其中可能有多个权限:并的情况000011110001&000011110002
,或的情况000011110001|000011110002
,以及如何做的权限匹配。最后面试官:
"所以那还是用的字符串匹配咯?"
尬...我比较low
...用的字符串匹配...
(哇,真的绝了...1个小时20分钟50多道题,答的我口渴????,不过也可以看出有很多移动端的我都没有答上来,面试官也表示理解,毕竟我主要是以PC端为主,所以竟然也算是过了,很感谢这位面试官细心的帮我分析一些问题)
后来有了解这位面试官近期也跳槽去腾讯了,果然面完呆呆之后他就去大厂了,好人一生平安????????。
这家公司其实是上家公司的总部,因为面完上家之后,HR也知道我的顾虑,想要去一个大点的团队,所以就把我推荐去了他们的总部。非常Nice的HR小姐姐,好感动,就算你看不到我的文章,我也还是要感谢你 ????。
5月8日
一面(前端副总监)
(必问...)
看三元的《(1.6w字)浏览器灵魂之问,请问你能接得住几个?》
https://juejin.im/post/5df5bcea6fb9a016091def69
分别从网络,解析,渲染来说
JS
代码在加载完之后是立即执行的,且JS
代码执行时会阻塞页面的渲染。
JS属于单线程,当我们在加载script
标签内容的时候,渲染线程会被暂停,因为script
标签里可能会操作DOM
的,所以如果你加载script
标签又同时渲染页面肯定就冲突了,因此说渲染线程(GUI
)和js引擎线程互斥。
Last-Modefied
配合If-Modified-Since
ETag
配合If-None-Match
也是个常见的问题了,不了解的小伙伴可以看我的这篇文章:霖呆呆你来说说浏览器缓存吧
(当时面试官还重复了一下我说的这4个头部字段,自己回顾了一下我说的对不对,好可爱~)
Keep-Alive
是HTTP
的一个头部字段Connection
中的一个值,它是保证我们的HTTP
请求能建立一个持久连接。也就是说建立一次TCP
连接即可进行多次请求和响应的交互。它的特点就是只要有一方没有明确的提出断开连接,则保持TCP
连接状态,减少了TCP
连接和断开造成的额外开销。
另外,在HTTP/1.1
中所有的连接默认都是持久连接的,但是HTTP/1.0
并未标准化。
我工作中碰到主要是利用CORS
来解决跨域问题,说了一下它的原理以及后台需要如何做。
另外说到了JSONP
的原理,以及它的优点:兼容性好;缺点:只能进行GET
请求,且有安全问题。
还有说到了ngnix
反向代理来解决跨域。
CORS原理及实现:https://www.jianshu.com/p/b2bdf55e1bf5
JSONP原理及实现:https://www.jianshu.com/p/88bb82718517
面试题:nginx有配置过吗?反向代理知道吗?:https://juejin.im/post/5eb0f8aaf265da7ba65f7ba2
其它的,我当时说我有看过一篇文章里面详细的介绍10多种跨域解决方案,但是自己没有过多的去了解。
哈哈,其实也就是秋风大大的这篇文章10种跨域解决方案(附终极大招)
这个当时答的没用过。
我知道它是能使得客户端和服务器之间存在持久的连接,而且双方都可以随时开始发送数据,这种方式本质没有使用 HTTP 的响应头,因此也没有跨域的限制。
(多的不会了)
(必问...)
(以下回答参考子弈小哥哥的面试分享:两年工作经验成功面试阿里P6总结:https://juejin.im/post/5d690c726fb9a06b155dd40d#heading-60
以及蔡徐坤小哥哥的2万字 | 前端基础拾遗90问:https://juejin.im/post/5e8b261ae51d4546c0382ab4#heading-48
「XSS」
XSS(Cross Site Script)跨站脚本攻击。指的是攻击者向网页注入恶意的客户端代码,通过恶意的脚本对客户端网页进行篡改,从而在用户浏览网页时,对用户浏览器进行控制或者获取用户隐私数据的一种攻击方式。
主要是分为三种:
「存储型」:即攻击被存储在服务端,常见的是在评论区插入攻击脚本,如果脚本被储存到服务端,那么所有看见对应评论的用户都会受到攻击。
「反射型」:攻击者将脚本混在URL里,服务端接收到URL将恶意代码当做参数取出并拼接在HTML里返回,浏览器解析此HTML后即执行恶意代码
「DOM型」:将攻击脚本写在URL中,诱导用户点击该URL,如果URL被解析,那么攻击脚本就会被运行。和前两者的差别主要在于DOM型攻击不经过服务端
如何防御XSS攻击
「输入检查」:对输入内容中的script
和等标签进行转义或者过滤
「设置httpOnly」:很多XSS攻击目标都是窃取用户cookie伪造身份认证,设置此属性可防止JS获取cookie
「开启CSP」,即开启白名单,可阻止白名单以外的资源加载和运行
「CSRF」
CSRF攻击(Cross-site request forgery)跨站请求伪造。是一种劫持受信任用户向服务器发送非预期请求的攻击方式,通常情况下,它是攻击者借助受害者的 Cookie 骗取服务器的信任,但是它并不能拿到Cookie,也看不到Cookie的内容,它能做的就是给服务器发送请求,然后执行请求中所描述的命令,以此来改变服务器中的数据,也就是并不能窃取服务器中的数据。
防御主要有三种:
验证Token
:浏览器请求服务器时,服务器返回一个token,每个请求都需要同时带上token和cookie才会被认为是合法请求
验证Referer
:通过验证请求头的Referer来验证来源站点,但请求头很容易伪造
设置SameSite
:设置cookie的SameSite,可以让cookie不随跨站请求发出,但浏览器兼容不一
「点击挟持」
诱使用户点击看似无害的按钮(实则点击了透明 iframe 中的按钮).
监听鼠标移动事件,让危险按钮始终在鼠标下方.
使用 HTML5 拖拽技术执行敏感操作(例如 deploy key).
预防策略:
服务端添加 X-Frame-Options 响应头,这个 HTTP 响应头是为了防御用 iframe 嵌套的点击劫持攻击。这样浏览器就会阻止嵌入网页的渲染。
JS 判断顶层视口的域名是不是和本页面的域名一致,不一致则不允许操作,top.location.hostname === self.location.hostname
;
敏感操作使用更复杂的步骤(验证码、输入项目名称以删除)。
(这个来源于LuckyWinty: http://www.imooc.com/article/295400)
(必问...)
(回答参考:https://juejin.im/post/5e621f5fe51d452700567c32)
setTimeout
的运行机制:执行该语句时,是立即把当前定时器代码推入事件队列,当定时器在事件列表中满足设置的时间值时将传入的函数加入任务队列,之后的执行就交给任务队列负责。但是如果此时任务队列不为空,则需等待,所以执行定时器内代码的时间可能会大于设置的时间
说了一下它属于异步任务,然后说了一下还有哪些宏任务以及微任务,最后说了一下EventLoop
的执行过程。
一开始整个脚本作为一个宏任务执行
执行过程中同步代码直接执行,宏任务进入宏任务队列,微任务进入微任务队列
当前宏任务执行完出队,检查微任务列表,有则依次执行,直到全部执行完
执行浏览器UI线程的渲染工作
检查是否有Web Worker
任务,有则执行
执行完本轮的宏任务,回到2,依此循环,直到宏任务和微任务队列都为空
(具体可以看这里:https://juejin.im/post/5e58c618e51d4526ed66b5cf#heading-1)
(啪啪啪,不长记性,其实之前面试有被问过,但是忘了再去了解了,这就吃亏了,没答上来)
requestAnimationFrame
是浏览器用于定时循环操作的一个接口,类似于setTimeout
,主要用途是按帧对网页进行重绘。对于JS
动画,用requestAnimationFrame
会比 setInterval
效果更好。
具体可以看:https://juejin.im/post/5e621f5fe51d452700567c32
同上...
(下面看着很多,但我肯定不是全答哈,挑了几个来回答)
ES6
:
Class
模块import
和export
箭头函数
函数默认参数
...
扩展运输符允许展开数组
解构
字符串模版
Promise
let const
Proxy、Map、Set
对象属性同名能简写
ES7
:
includes
**
求幂运算符
ES8
:
async/await
Object.values()和Object.entries()
padStart()和padEnd()
Object.getOwnPropertyDescriptors()
函数参数允许尾部,
ES9
:
for...await...of
...
展开符合允许展开对象收集剩余参数
Promise.finally()
正则中的四个新功能
ES10
:
flat()
flatMap()
fromEntries()
trimStart
和trimEnd
matchAll
BigInt
try/catch
中报错允许没有err
异常参数
Symbol.prototype.description
Function.toString()
调用时呈现原本源码的样子
还不了解的小伙伴可以看看浪里哥的这篇:盘点ES7、ES8、ES9、ES10新特性
https://juejin.im/post/5dda2b5e6fb9a07a83691766
实话实话没做过,但是后来面试官告诉我:可以使用canvas
来实现。具体做法等我写篇文章哈。
(当时我还反问了一句面试官:那批量图片压缩要怎么做呢?把他惊的...然后他和我说挺复杂的...)
1个前端(我),1个小程序老哥(IOS转行的),6个后台。
例举了我最经典的bpmn.js
,以此来引出我写了很多关于这方面的教材,以及建立了微信群,为国内的bpmn.js
社区贡献了一份力量...怎么高大上怎么来...
当然也有提到我GitHub
上的bpmn-chinese-document
项目只有100
多的Star
,他说理解,毕竟这东西用的人不是很多。
喊了个挺高的数,老哥笑了笑,你这个工作年限我们可能给不到,然后扯了点别的。
团队人员分布情况
技术栈
我进去主要是负责哪块内容
年终奖/季度奖
调薪的频率以及幅度
加班多不多
(其实后面这些问题应该是等到HR面的时候问的,但是感觉和面试官挺聊的来的我就先打听了)
二面(CTO)
绝了...又来
绝了...又来X2
当时答的是是用import
来按需引入,以及提到了Vue.use
。
但后来有去了解,babel-plugin-import
就可以实现。
估计面试官看错了...虽然我的项目有个组件库的功能,但是是基于Ant Design of Vue
二次开发的。
没了...
三面(HR)
问的问题有点多,我挑一些记得住的哈
面试分享:两年工作经验成功面试阿里P6总结:https://juejin.im/post/5d690c726fb9a06b155dd40d
2万字 | 前端基础拾遗90问:https://juejin.im/post/5e8b261ae51d4546c0382ab4
一位前端小姐姐的五万字面试宝典https://juejin.im/post/5e91b01651882573716a9b23
艺术喵 2 年前端面试心路历程(字节跳动、YY、虎牙、BIGO)| 掘金技术征文:https://juejin.im/post/5e85ec79e51d4547153d0738
一年半经验前端社招7家大厂&独角兽全过经历 | 掘金技术征文:https://juejin.im/post/5e8d5a48f265da47ce6cb21f
面试完50个人后我写下这篇总结:https://juejin.im/post/5df1e312f265da33d039d06d
「吐血整理」再来一打Webpack面试题(持续更新)
(1.6w字)浏览器灵魂之问,请问你能接得住几个?: https://juejin.im/post/5df5bcea6fb9a016091def69
(还有很多大佬的很多好文,不是呆呆不写在这里啊,是因为呆呆暂时只刷了这些,抱歉了????)
有想入群的学习前端进阶的加我微信 luoxue2479
回复加群即可
喜欢这篇文章的话,点个 在看
,让更多的人看到
有写错的地方和更好的建议可以在下面 留言
,一起讨论