2024十家公司前端面试小记

最新推荐文章于 2024-11-05 22:47:34 发布

2401_84152126

最新推荐文章于 2024-11-05 22:47:34 发布

阅读量851

点赞数 24

分类专栏：程序员文章标签：前端面试职场和发展

本文链接：https://blog.csdn.net/2401_84152126/article/details/138444488

版权

程序员专栏收录该内容

190 篇文章 0 订阅

订阅专栏

本文概述了前端开发面试中常见的优化策略，如网络性能优化、闭包原理的应用、Function.bind实现、数组操作、跨域处理、JSONP、查询参数解析、函数节流等，同时也提及了与Android开发相关的知识点，如自适应布局和资源管理。

摘要由CSDN通过智能技术生成

这个简直老生常谈，不管是园子里还是园子外，关于前端优化的东西太多太多了，不同角度不同方向也有很多，网络性能优化，加快访问速度，浏览器并行加载数量，怎样实现原生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都报错。而正则就没有这个问题，他只匹配出正确的配对，非法的全部过滤掉，简单，方便。

实现代码：