Open sakila1012 opened 3 years ago
邮储一面：
1、自我介绍 没有真正的说明自己做的哪些项目和内容，技术栈，细节内容讲的太多了，应该精简的说，捡重点说。 2、get post的区别 3、前端遇到的安全 4、上传有什么问题 5、post 传输的数据量过大，如何处理 这个可以后端可能会报413，请求实体过大，可以通过配置nginx提搞限制，另外对于大文件可以采用分块上传，减少post请求实体的大小 6、xss和xsrf 7、问道问什么会换工作，说岔了，加班有点多，不应该啊 还有为什么不给领带申请，和换组，换部门。 面试的过程中，有些话该说，有些话不能说，说了反而会觉得你这个人遇到问题就逃避，不愿意深入和面对困难。我都无法去回复，让自己调入这样的一个陷阱中。 8、懒加载 懒加载我当时怎么没有想到是图片的懒加载呢？ 有时候一个网页会包含很多的图片，例如淘宝京东这些购物网站，商品图片多只之又多，页面图片多，加载的图片就多。服务器压力就会很大。不仅影响渲染速度还会浪费带宽。比如一个1M大小的图片，并发情况下，达到1000并发，即同时有1000个人访问，就会产生1个G的带宽。
为了解决以上问题，提高用户体验，就出现了懒加载方式来减轻服务器的压力，优先加载可视区域的内容，其他部分等进入了可视区域再加载，从而提高性能。
vue项目中的打包，是把html、css、js进行打包，还有图片压缩。但是打包时把css和js都分成了几部分，这样就不至于一个css和就是文件非常大。也是优化性能的一种方式。 进入正题------懒加载
1.懒加载原理 一张图片就是一个标签，浏览器是否发起请求图片是根据的src属性，所以实现懒加载的关键就是，在图片没有进入可视区域时，先不给的src赋值，这样浏览器就不会发送请求了，等到图片进入可视区域再给src赋值。
2.懒加载思路及实现 实现懒加载有四个步骤，如下： 1.加载loading图片 2.判断哪些图片要加载【重点】 3.隐形加载图片 如上图所示，让在浏览器可视区域的图片显示，可视区域外的不显示，所以当图片距离顶部的距离top-height等于可视区域h和滚动区域高度s之和时说明图片马上就要进入可视区了，就是说当top-height<=s+h时，图片在可视区。 这里介绍下几个API函数： 页可见区域宽： document.body.clientWidth; 网页可见区域高： document.body.clientHeight; 网页可见区域宽： document.body.offsetWidth (包括边线的宽); 网页可见区域高： document.body.offsetHeight (包括边线的宽); 网页正文全文宽： document.body.scrollWidth; 网页正文全文高： document.body.scrollHeight; 网页被卷去的高： document.body.scrollTop; 网页被卷去的左： document.body.scrollLeft; 网页正文部分上： window.screenTop; 网页正文部分左： window.screenLeft; 屏幕分辨率的高： window.screen.height; 屏幕分辨率的宽： window.screen.width; 屏幕可用工作区高度： window.screen.availHeight;
HTMLElement.offsetTop 为只读属性，它返回当前元素相对于其 offsetParent 元素的顶部的距离。 window.innerHeight：浏览器窗口的视口（viewport）高度（以像素为单位）；如果有水平滚动条，也包括滚动条高度。
// onload是等所有的资源文件加载完毕以后再绑定事件 window.onload = function(){ // 获取图片列表，即img标签列表 var imgs = document.querySelectorAll('img'); // 获取到浏览器顶部的距离 function getTop(e){ return e.offsetTop; } // 懒加载实现 function lazyload(imgs){ // 可视区域高度 var h = window.innerHeight; //滚动区域高度 var s = document.documentElement.scrollTop || document.body.scrollTop; for(var i=0;i<imgs.length;i++){ //图片距离顶部的距离大于可视区域和滚动区域之和时懒加载 if ((h+s)>getTop(imgs[i])) { // 真实情况是页面开始有2秒空白，所以使用setTimeout定时2s (function(i){ setTimeout(function(){ // 不加立即执行函数i会等于9 // 隐形加载图片或其他资源， //创建一个临时图片，这个图片在内存中不会到页面上去。实现隐形加载 var temp = new Image(); temp.src = imgs[i].getAttribute('data-src');//只会请求一次 // onload判断图片加载完毕，真是图片加载完毕，再赋值给dom节点 temp.onload = function(){ // 获取自定义属性data-src，用真图片替换假图片 imgs[i].src = imgs[i].getAttribute('data-src') } },2000) })(i) } } } lazyload(imgs); // 滚屏函数 window.onscroll =function(){ lazyload(imgs); } }
9、axios是怎么实现异步的 axios本身是基于promise的，可以实现异步的，而我今天回答的是什么呢，扯到xmlHTTPRequest上了，真实无语了，太不应该了。 10、promise的理解 概括起来就是对异步的执行结果的描述对象 Promise 规范中规定了，promise 的状态只有3种： pending fulfilled rejected Promise 的状态一旦改变则不会再改变。 Promise 规范中还规定了 Promise 中必须有 then 方法，这个方法也是实现异步的链式操作的基本。
promise 细节 Promise 构造器中必须传入函数，否则会抛出错误。(没有执行器还怎么做异步操作。。。) Promise.prototype上的 catch(onrejected) 方法是 then(null,onrejected) 的别名,并且会处理链之前的任何的reject。 Promise.prototype 上的 then和 catch 方法总会返回一个全新的 Promise 对象。 如果传入构造器的函数中抛出了错误,该 promise 对象的[[PromiseStatus]]会赋值为 rejected，并且[[PromiseValue]]赋值为 Error 对象。 then 中的回调如果抛出错误，返回的 promise 对象的[[PromiseStatus]]会赋值为 rejected，并且[[PromiseValue]]赋值为 Error 对象。 then 中的回调返回值会影响 then 返回的 promise 对象。 Promise最大的好处是在异步执行的流程中，把执行代码和处理结果的代码清晰地分离了。 promise.gif
解决回调地狱（Callback Hell）问题 Promise还可以做更多的事情，比如，有若干个异步任务，需要先做任务1，如果成功后再做任务2，任何任务失败则不再继续并执行错误处理函数。
要串行执行这样的异步任务，不用Promise需要写一层一层的嵌套代码。有了Promise，我们只需要简单地写：
job1.then(job2).then(job3).catch(handleError); 其中，job1、job2和job3都是Promise对象。
Promise.all()并行执行异步任务
Promise.race()获得先返回的结果即可
eg.同时向两个URL读取用户的个人信息，只需要获得先返回的结果即可。
Promise如何解决这两个问题 解决可读性的问题 这一点不用多说，用过Promise的人很容易明白。Promise的应用相当于给了你一张可以把解题思路清晰记录下来的草稿纸，你不在需要用脑子去记忆执行顺序。
解决信任问题 Promise并没有取消控制反转，而是把反转出去的控制再反转一次，也就是反转了控制反转。
这种机制有点像事件的触发。它与普通的回调的方式的区别在于，普通的方式，回调成功之后的操作直接写在了回调函数里面，而这些操作的调用由第三方控制。在Promise的方式中，回调只负责成功之后的通知，而回调成功之后的操作放在了then的回调里面，由Promise精确控制。
Promise有这些特征：只能决议一次，决议值只能有一个，决议之后无法改变。任何then中的回调也只会被调用一次。Promise的特征保证了Promise可以解决信任问题。
对于回调过早的问题，由于Promise只能是异步的，所以不会出现异步的同步调用。即便是在决议之前的错误，也是异步的，并不是会产生同步（调用过早）的困扰。 今天的面试，不管怎样，还是有收获的，明白了自己存在的问题，我应该买个录音笔，把我面试过程的表现录下来，方便我后面改进。
邮储二面：
1、兼容低版本浏览器的做法
2、webpack 的理解
3、jquery有哪些方法
4、动画怎么实现
有JS动画，CSS动画 JS动画也即是定时器动画 JS动画会出现抖动现象（丢帧）
可以使用requestAnimationFrame/cancelAnimationFrame (不支持IE6~9)
requestIdleCallback：在浏览器的空闲时间段内调用的函数，这样一些不重要的任务可以延后执行，防止页面卡顿
邮储一面：
1、自我介绍 没有真正的说明自己做的哪些项目和内容，技术栈，细节内容讲的太多了，应该精简的说，捡重点说。 2、get post的区别 3、前端遇到的安全 4、上传有什么问题 5、post 传输的数据量过大，如何处理 这个可以后端可能会报413，请求实体过大，可以通过配置nginx提搞限制，另外对于大文件可以采用分块上传，减少post请求实体的大小 6、xss和xsrf 7、问道问什么会换工作，说岔了，加班有点多，不应该啊 还有为什么不给领带申请，和换组，换部门。 面试的过程中，有些话该说，有些话不能说，说了反而会觉得你这个人遇到问题就逃避，不愿意深入和面对困难。我都无法去回复，让自己调入这样的一个陷阱中。 8、懒加载 懒加载我当时怎么没有想到是图片的懒加载呢？ 有时候一个网页会包含很多的图片，例如淘宝京东这些购物网站，商品图片多只之又多，页面图片多，加载的图片就多。服务器压力就会很大。不仅影响渲染速度还会浪费带宽。比如一个1M大小的图片，并发情况下，达到1000并发，即同时有1000个人访问，就会产生1个G的带宽。
为了解决以上问题，提高用户体验，就出现了懒加载方式来减轻服务器的压力，优先加载可视区域的内容，其他部分等进入了可视区域再加载，从而提高性能。
vue项目中的打包，是把html、css、js进行打包，还有图片压缩。但是打包时把css和js都分成了几部分，这样就不至于一个css和就是文件非常大。也是优化性能的一种方式。 进入正题------懒加载
1.懒加载原理 一张图片就是一个![]()
标签，浏览器是否发起请求图片是根据![]()
的src属性，所以实现懒加载的关键就是，在图片没有进入可视区域时，先不给![]()
的src赋值，这样浏览器就不会发送请求了，等到图片进入可视区域再给src赋值。
2.懒加载思路及实现 实现懒加载有四个步骤，如下： 1.加载loading图片 2.判断哪些图片要加载【重点】 3.隐形加载图片 如上图所示，让在浏览器可视区域的图片显示，可视区域外的不显示，所以当图片距离顶部的距离top-height等于可视区域h和滚动区域高度s之和时说明图片马上就要进入可视区了，就是说当top-height<=s+h时，图片在可视区。 这里介绍下几个API函数： 页可见区域宽： document.body.clientWidth; 网页可见区域高： document.body.clientHeight; 网页可见区域宽： document.body.offsetWidth (包括边线的宽); 网页可见区域高： document.body.offsetHeight (包括边线的宽); 网页正文全文宽： document.body.scrollWidth; 网页正文全文高： document.body.scrollHeight; 网页被卷去的高： document.body.scrollTop; 网页被卷去的左： document.body.scrollLeft; 网页正文部分上： window.screenTop; 网页正文部分左： window.screenLeft; 屏幕分辨率的高： window.screen.height; 屏幕分辨率的宽： window.screen.width; 屏幕可用工作区高度： window.screen.availHeight;
HTMLElement.offsetTop 为只读属性，它返回当前元素相对于其 offsetParent 元素的顶部的距离。 window.innerHeight：浏览器窗口的视口（viewport）高度（以像素为单位）；如果有水平滚动条，也包括滚动条高度。
9、axios是怎么实现异步的 axios本身是基于promise的，可以实现异步的，而我今天回答的是什么呢，扯到xmlHTTPRequest上了，真实无语了，太不应该了。 10、promise的理解 概括起来就是对异步的执行结果的描述对象 Promise 规范中规定了，promise 的状态只有3种： pending fulfilled rejected Promise 的状态一旦改变则不会再改变。 Promise 规范中还规定了 Promise 中必须有 then 方法，这个方法也是实现异步的链式操作的基本。
promise 细节 Promise 构造器中必须传入函数，否则会抛出错误。(没有执行器还怎么做异步操作。。。) Promise.prototype上的 catch(onrejected) 方法是 then(null,onrejected) 的别名,并且会处理链之前的任何的reject。 Promise.prototype 上的 then和 catch 方法总会返回一个全新的 Promise 对象。 如果传入构造器的函数中抛出了错误,该 promise 对象的[[PromiseStatus]]会赋值为 rejected，并且[[PromiseValue]]赋值为 Error 对象。 then 中的回调如果抛出错误，返回的 promise 对象的[[PromiseStatus]]会赋值为 rejected，并且[[PromiseValue]]赋值为 Error 对象。 then 中的回调返回值会影响 then 返回的 promise 对象。 Promise最大的好处是在异步执行的流程中，把执行代码和处理结果的代码清晰地分离了。 promise.gif
解决回调地狱（Callback Hell）问题 Promise还可以做更多的事情，比如，有若干个异步任务，需要先做任务1，如果成功后再做任务2，任何任务失败则不再继续并执行错误处理函数。
要串行执行这样的异步任务，不用Promise需要写一层一层的嵌套代码。有了Promise，我们只需要简单地写：
job1.then(job2).then(job3).catch(handleError); 其中，job1、job2和job3都是Promise对象。
Promise.all()并行执行异步任务
Promise.race()获得先返回的结果即可
eg.同时向两个URL读取用户的个人信息，只需要获得先返回的结果即可。
Promise如何解决这两个问题 解决可读性的问题 这一点不用多说，用过Promise的人很容易明白。Promise的应用相当于给了你一张可以把解题思路清晰记录下来的草稿纸，你不在需要用脑子去记忆执行顺序。
解决信任问题 Promise并没有取消控制反转，而是把反转出去的控制再反转一次，也就是反转了控制反转。
这种机制有点像事件的触发。它与普通的回调的方式的区别在于，普通的方式，回调成功之后的操作直接写在了回调函数里面，而这些操作的调用由第三方控制。在Promise的方式中，回调只负责成功之后的通知，而回调成功之后的操作放在了then的回调里面，由Promise精确控制。
Promise有这些特征：只能决议一次，决议值只能有一个，决议之后无法改变。任何then中的回调也只会被调用一次。Promise的特征保证了Promise可以解决信任问题。
对于回调过早的问题，由于Promise只能是异步的，所以不会出现异步的同步调用。即便是在决议之前的错误，也是异步的，并不是会产生同步（调用过早）的困扰。 今天的面试，不管怎样，还是有收获的，明白了自己存在的问题，我应该买个录音笔，把我面试过程的表现录下来，方便我后面改进。
邮储二面：
1、兼容低版本浏览器的做法
2、webpack 的理解
3、jquery有哪些方法
4、动画怎么实现
有JS动画，CSS动画 JS动画也即是定时器动画 JS动画会出现抖动现象（丢帧）
可以使用requestAnimationFrame/cancelAnimationFrame (不支持IE6~9)
requestIdleCallback：在浏览器的空闲时间段内调用的函数，这样一些不重要的任务可以延后执行，防止页面卡顿