欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

前端面试题整理3

程序员文章站 2022-03-04 12:06:09
...

1. 你觉得jQuery或zepto源码有哪些写的好的地方?

(答案仅供参考)

jQuery源码封装在一个匿名函数的自执行环境中，有助于防止变量的全局污染，然后通过传入window对象参数，可以使window对象作为局部变量使用，好处是当jquery中访问window对象的时候，就不用将作用域链退回到顶层作用域了，从而可以更快的访问window对象。同样，传入undefined参数，可以缩短查找undefined时的作用域链。

(function( window, undefined ) {        //用一个函数域包起来，就是所谓的沙箱

    //在这里边var定义的变量，属于这个函数域内的局部变量，避免污染全局  

    //把当前沙箱需要的外部变量通过函数参数引入进来

    //只要保证参数对内提供的接口的一致性，你还可以随意替换传进来的这个参数

   window.jQuery = window.$ = jQuery;

})( window );

jQuery将一些原型属性和方法封装在了jquery.prototype中，为了缩短名称，又赋值给了jquery.fn，这是很形象的写法。

有一些数组或对象的方法经常能使用到，jQuery将其保存为局部变量以提高访问速度。

jquery实现的链式调用可以节约代码，所返回的都是同一个对象，可以提高代码效率。

2. 关于HTTP和HTTPS。

HTTP协议通常承载于TCP协议之上，在HTTP和TCP之间添加一个安全协议层（SSL或TSL），这个时候，就成了我们常说的HTTPS。

默认HTTP的端口号为80，HTTPS的端口号为443。

为什么HTTPS安全?

因为网络请求需要中间有很多的服务器路由器的转发。中间的节点都可能篡改信息，而如果使用HTTPS，**在你和终点站才有。https之所以比http安全，是因为他利用ssl/tls协议传输。它包含证书，卸载，流量转发，负载均衡，页面适配，浏览器适配，refer传递等。保障了传输过程的安全性

3. 关于Http 2.0 你知道多少？

HTTP/2引入了“服务端推（server push）”的概念，它允许服务端在客户端需要数据之前就主动地将数据发送到客户端缓存中，从而提高性能。

HTTP/2提供更多的加密支持。

HTTP/2使用多路技术，允许多个消息在一个连接上同时交差。

HTTP/2增加了头压缩（header compression），因此即使非常小的请求，其请求和响应的header都只会占用很小比例的带宽。

4. 移动端和PC端的区别。

1： PC考虑的是浏览器的兼容性，而移动端开发考虑的更多的是手机兼容性，因为目前不管是android手机还是ios手机，一般浏览器使用的都是webkit内核，所以说做移动端开发，更多考虑的应该是手机分辨率的适配，和不同操作系统的略微差异化。

2： 在部分事件的处理上，移动端多出来的事件是触屏事件，而缺少的是hover事件。 另外包括移动端弹出的手机键盘的处理，这样的问题在PC端都是遇不到的。 

3： 在布局上，移动端开发一般是要做到布局自适应的，我使用的一直是rem布局，感觉很好。

4： 在动画处理上，PC端由于要考虑IE的兼容性，所以通常使用JS做动画的通用性会更好一些，但是CSS3做了很大的牺牲， 而在手机端，如果要做一些动画、特效等，第一选择肯定是CSS3， 既简单、效率又高。

5：  微信的一些接口组好能去实现一遍，熟悉一下肯定是有好处的，比如通过微信分享文章，title、description、icon等图标的配置，这些还是要会的。

6： 百度地图的一些API接口，也得去实现一下，这些对于移动端来说，LBS是一个非常重要的特性，所以地图这块肯定是要了解的，在加上百度地图这块已经是一个比较成熟的平台了，所以学起来也比较容易。

7： CSS3的动画一定要比较熟练，这在移动端用的还是比较多的。 

8： 一般pc端用jquery，移动端用zepto，因为移动端的流量还是比较重要的， 所以引入的资源或者插件，能小则小，一个30k的资源和一个80k的资源，在移动端的差别还是挺大的。

前端面试题整理3

而未压缩的jquery是262kb， 压缩的jquey是83kb，可见两者的差别之大。

9：最好能掌握一套完整的前端开发架构，比如模块化、打包、压缩、缓存、有条件的还可以做一下自动化测试等等，比较好用的有fis，另外，想要快速提升自己的前端开发技术，钻研前端架构这块是一个非常好的方向。

10： 性能优化，包括首屏的打开速度、用户响应延迟、渲染性能、动画帧率等在手机上都需要特别注意。

11： 比如在手机上的300ms的延迟，这在PC端是没有的，如果我们希望做成webapp，那么自然就不需要这300ms的延迟，所以可以使用hammer-time.js来移除这300ms的延迟。

 

5. 对前端模块化的认识。

AMD 是 RequireJS 在推广过程中对模块定义的规范化产出。

CMD 是 SeaJS 在推广过程中对模块定义的规范化产出。

AMD 是提前执行，CMD 是延迟执行。

AMD推荐的风格通过返回一个对象做为模块对象，CommonJS的风格通过对module.exports或exports的属性赋值来达到暴露模块对象的目的。

CMD模块方式

define(  function(require, exports, module) {
   // 模块代码
});

6. 说说你对AMD和Commonjs的理解。

CommonJS是服务器端模块的规范，Node.js采用了这个规范。CommonJS规范加载模块是同步的，也就是说，只有加载完成，才能执行后面的操作。AMD规范则是非同步加载模块，允许指定回调函数。

AMD推荐的风格通过返回一个对象做为模块对象，CommonJS的风格通过对module.exports或exports的属性赋值来达到暴露模块对象的目的。

7. 说说你对MVC和MVVM的理解。

MVC

  1. View 传送指令到 Controller

  2. Controller 完成业务逻辑后，要求 Model 改变状态

  3. Model 将新的数据发送到 View，用户得到反馈

所有通信都是单向的。

Angular它采用双向绑定（data-binding）：View的变动，自动反映在 ViewModel，反之亦然。

  1. 组成部分Model、View、ViewModel

  2. View：UI界面

  3. ViewModel：它是View的抽象，负责View与Model之间信息转换，将View的Command传送到Model；

  4. Model：数据访问层

 

8. 说说TCP传输的三次握手四次挥手策略。

为了准确无误地把数据送达目标处，TCP协议采用了三次握手策略。用TCP协议把数据包送出去后，TCP不会对传送 后的情况置之不理，它一定会向对方确认是否成功送达。握手过程中使用了TCP的标志：SYN和ACK。

发送端首先发送一个带SYN标志的数据包给对方。接收端收到后，回传一个带有SYN/ACK标志的数据包以示传达确认信息。 
最后，发送端再回传一个带ACK标志的数据包，代表“握手”结束。 
若在握手过程中某个阶段莫名中断，TCP协议会再次以相同的顺序发送相同的数据包。

断开一个TCP连接则需要“四次握手”：

  • 第一次挥手：主动关闭方发送一个FIN，用来关闭主动方到被动关闭方的数据传送，也就是主动关闭方告诉被动关闭方：我已经不 会再给你发数据了(当然，在fin包之前发送出去的数据，如果没有收到对应的ack确认报文，主动关闭方依然会重发这些数据)，但是，此时主动关闭方还可 以接受数据。

  • 第二次挥手：被动关闭方收到FIN包后，发送一个ACK给对方，确认序号为收到序号+1（与SYN相同，一个FIN占用一个序号）。

  • 第三次挥手：被动关闭方发送一个FIN，用来关闭被动关闭方到主动关闭方的数据传送，也就是告诉主动关闭方，我的数据也发送完了，不会再给你发数据了。

  • 第四次挥手：主动关闭方收到FIN后，发送一个ACK给被动关闭方，确认序号为收到序号+1，至此，完成四次挥手。

9. TCP和UDP的区别。

TCP（Transmission Control Protocol，传输控制协议）是基于连接的协议，也就是说，在正式收发数据前，必须和对方建立可靠的连接。一个TCP连接必须要经过三次“对话”才能建立起来

UDP（User Data Protocol，用户数据报协议）是与TCP相对应的协议。它是面向非连接的协议，它不与对方建立连接，而是直接就把数据包发送过去！ 
UDP适用于一次只传送少量数据、对可靠性要求不高的应用环境。

10.你觉得前端工程的价值体现在哪。

  1. 为简化用户使用提供技术支持（交互部分）

  2. 为多个浏览器兼容性提供支持

  3. 为提高用户浏览速度（浏览器性能）提供支持

  4. 为跨平台或者其他基于webkit或其他渲染引擎的应用提供支持

  5. 为展示数据提供支持（数据接口）

11.如何评价AngularJS和BackboneJS?

backbone具有依赖性，依赖underscore.js。Backbone + Underscore + jQuery(or Zepto) 就比一个AngularJS 多出了2 次HTTP请求.

Backbone的Model没有与UI视图数据绑定，而是需要在View中自行操作DOM来更新或读取UI数据。AngularJS与此相反，Model直接与UI视图绑定，Model与UI视图的关系，通过directive封装，AngularJS内置的通用directive，就能实现大部分操作了，也就是说，基本不必关心Model与UI视图的关系，直接操作Model就行了，UI视图自动更新。

AngularJS的directive，你输入特定数据，他就能输出相应UI视图。是一个比较完善的前端MVW框架，包含模板，数据双向绑定，路由，模块化，服务，依赖注入等所有功能，模板功能强大丰富，并且是声明式的，自带了丰富的 Angular 指令。

 

 

12. 对前端界面工程师这个职位是怎么样理解的？它的前景会怎么样？

前端是最贴近用户的程序员，比后端、数据库、产品经理、运营、安全都近。

1、实现界面交互

2、提升用户体验

3、有了Node.js，前端可以实现服务端的一些事情

前端是最贴近用户的程序员，前端的能力就是能让产品从 90分进化到 100 分，甚至更好，

参与项目，快速高质量完成实现效果图，精确到1px；

与团队成员，UI设计，产品经理的沟通；

做好的页面结构，页面重构和用户体验；

处理hack，兼容、写出优美的代码格式；

针对服务器的优化、拥抱最新前端技术。

 

13. 说说你对前端架构师的理解。

负责前端团队的管理及与其他团队的协调工作，提升团队成员能力和整体效率； 
带领团队完成研发工具及平台前端部分的设计、研发和维护； 
带领团队进行前端领域前沿技术研究及新技术调研，保证团队的技术领先 
负责前端开发规范制定、功能模块化设计、公共组件搭建等工作，并组织培训。

14. 说说mongoDB和MySQL的区别?

MySQL是传统的关系型数据库，MongoDB则是非关系型数据库。

mongodb以BSON结构（二进制）进行存储，对海量数据存储有着很明显的优势。

对比传统关系型数据库,NoSQL有着非常显著的性能和扩展性优势，与关系型数据库相比，MongoDB的优点有： 
①弱一致性（最终一致），更能保证用户的访问速度： 
②文档结构的存储方式，能够更便捷的获取数据。

15. 一些开放性题目。

1.自我介绍：除了基本个人信息以外，面试官更想听的是你与众不同的地方和你的优势。

2.项目介绍

3.如何看待前端开发？

4.平时是如何学习前端开发的？

5.未来三到五年的规划是怎样的？

上一篇： 前端面试题整理1

下一篇： 2018秋招前端笔试题（58同城）

推荐阅读