2024十家公司前端面试小记，2024年最新前端优化性能的方法面试-CSDN博客

还有一些面试官会问到事件如何派发也就是事件广播（dispatchEvent）等等，这里不再展开。

有关事件的考核点大概也就这么多了

前端性能优化

======

这个简直老生常谈，不管是园子里还是园子外，关于前端优化的东西太多太多了，不同角度不同方向也有很多，网络性能优化，加快访问速度，浏览器并行加载数量，怎样实现原生JS异步载入，CDN加速的原理，如何将不同静态资源发布到多个域名服务器上，发布后这些静态字段的url路径改怎么批量改写，用什么工具进行项目打包，css打包后的相对路径怎么转换为绝对路径，用什么工具进行项目模块依赖管理，怎么进行cookie优化等等，

这个说起来就很多了，尽可能的按照自己做过的优化来讲，否则面试官随便挑一项深究都可能会卡壳，与其这样还不如不讲

闭包原理及应用

=======

这个问题的经典性，几乎所有面试官都会问到这个问题，什么情况下会发生闭包，为什么需要闭包，什么场景下需要，闭包闭了谁，怎么释放被闭包的变量内存，闭包的优点是什么，缺点是什么等等。

关于闭包，有的是上述提问，有的是直接做闭包面试题。关于概念网上一搜一大把，关于闭包面试题，可以参考我之前写过的一篇文章：大部分人都会做错的经典JS闭包面试题（http://www.cnblogs.com/xxcanghai/p/4991870.html）

不夸张的讲，如果这篇文章完全弄懂了，基本上没有可以难住的闭包的题目了。

手写Function.bind函数

=================

首先会要求解释下这个函数的作用，以及在什么场景下需要用到它，最后手写一个Function.bind函数。

只要掌握核心几点就没问题：

1、Function.bind返回的也是一个函数，所以注定发生了闭包，

2、在返回的这个函数中去调用一个其他的函数，这其实本质上就是函数钩子(HOOK)

关于在JS里的函数钩子，我认为只需要维护以下三点即可：

1、保持函数的this指向

2、保持函数的所有参数都传递到目标函数

3、保持函数的返回值

有了以上这几点，这个函数就非常好写了，下面是MSDN上的标准Polyfill：

if (!Function.prototype.bind) {

Function.prototype.bind = function (oThis) {

if (typeof this !== “function”) {

// closest thing possible to the ECMAScript 5

// internal IsCallable function

throw new TypeError(“Function.prototype.bind - what is trying to be bound is not callable”);

}

var aArgs = Array.prototype.slice.call(arguments, 1),

fToBind = this,

fNOP = function () {},

fBound = function () {

return fToBind.apply(this instanceof fNOP

? this

oThis || this,

aArgs.concat(Array.prototype.slice.call(arguments)));

};

fNOP.prototype = this.prototype;

fBound.prototype = new fNOP();

return fBound;

};

}

手写数组快速排序/去重

===========

不管是排序也好，还是去重也罢，都是计算机基础知识了，虽然快排写出来了，去重也用多种方式实现了，但是算法是我的弱项，这里就不展开了。不过对于准备面试的童鞋来讲，准备下常用算法还是比较重要的，大部分公司还是比较看重此类基础知识的。

JS的定义提升

=======

利用js的特性定义提升这个知识点衍生出来的面试题相当之多，诸如以下等等

(function(a){

console.log(a);

var a=10;

function a(){};

}(100))

这算是我做过的定义提升里面的最简单的题目了,建议可以看下我的上一篇文章:一道常被人轻视的前端JS面试题（http://www.cnblogs.com/xxcanghai/p/5189353.html）

基本上能做对那篇文章中所说的题目的话，此类面试题基本平趟无悬念

跨域

关于跨域大概可以分iframe的跨域，和纯粹的跨全域请求。

关于跨域的可以去看园子里的这几篇文章:

JavaScript跨域总结与解决办法（http://www.cnblogs.com/rainman/archive/2011/02/20/1959325.html）

跨域-知识（http://www.cnblogs.com/scottckt/archive/2011/11/12/2246531.html）

跨域资源共享的10种方式（http://www.cnblogs.com/cat3/archive/2011/06/15/2081559.html）

其实正统的跨全域的解决方法大致也就，JSONP,Access Control和服务器代理这么三种

JSONP原理

=======

只要你聊到跨域，就必须聊到JSONP，那么就必须要讲一下JSONP的实现原理，以及你在项目中那个需求使用了JSONP，这里简单讲就是HTML里面所有带src属性的标签都可以跨域，如iframe，img，script等。

所以可以把需要跨域的请求改成用script脚本加载即可，服务器返回执行字符串，但是这个字符串是在window全局作用域下执行的，你需要把他返回到你的代码的作用域内，这里就需要临时创建一个全局的回调函数，并把到传到后台，最后再整合实际要请求的数组，返回给前端，让浏览器直接调用，用回调的形式回到你的原代码流程中。

基本讲到这也就没什么要再讲的了。

将url的查询参数解析成字典对象

================

这个题目不约而同的出现在了多家公司的面试题中，当然也是因为太过于典型，解决方案无非就是拆字符或者用正则匹配来解决，我个人强烈建议用正则匹配，因为url允许用户随意输入，如果用拆字符的方式，有任何一处没有考虑到容错，就会导致整个js都报错。而正则就没有这个问题，他只匹配出正确的配对，非法的全部过滤掉，简单，方便。

实现代码：

function getQueryObject(url) {

url = url == null ? window.location.href : url;

var search = url.substring(url.lastIndexOf(“?”) + 1);

var obj = {};

var reg = /([^?&=]+)=([?&=]*)/g;

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

由于文件比较大，这里只是将部分目录大纲截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且后续会持续更新

如果你觉得这些内容对你有帮助，可以添加V获取：vip1024c （备注前端）

后话

对于面试，说几句个人观点。

面试，说到底是一种考试。正如我们一直批判应试教育脱离教育的本质，为了面试学习技术也脱离了技术的初心。但考试对于人才选拔的有效性是毋庸置疑的，几千年来一直如此。除非你有实力向公司证明你足够优秀，否则，还是得乖乖准备面试。这也并不妨碍你在通过面试之后按自己的方式学习。
其实在面试准备阶段，个人的收获是很大的，我也认为这是一种不错的学习方式。首先，面试问题大部分基础而且深入，这些是平时工作的基础。就好像我们之前一直不明白学习语文的意义，但它的意义就在每天的谈话间。

所谓面试造火箭，工作拧螺丝。面试往往有更高的要求，也迫使我们更专心更深入地去学习一些知识，也何尝不是一种好事。

一个人可以走的很快，但一群人才能走的更远。不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎扫码加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！