献给前端求职路上的大家（下)

时间  2019-11-10
标签 献给 前端 求职 路上 大家 繁體版
原文   原文链接

注明：上一篇献给前端求职路上的大家（上),主要侧重说的是前端面试中的html和css这两块常见问题，这是基础，其实在真正面试中，面试官每每采用的是由难到易的套路，那js和jQuery就是重中之重了，以及针对项目和所用技术方面的一些问题也就是你的必备储粮啦！javascript

javascriptcss

什么是闭包（closure），为何要用它？

闭包简单的说就是一个函数能访问外部函数的变量，这就是闭包，不理解就看代码，例如：html

function aa(x){
       var num=1;
      function bb(y){
          console.log(x+y+(++num));
     }
}

aa函数中的bb函数就是闭包了，bb函数可使用aa函数的局部变量，参数，最典型的闭包应该是下面这样，将定义在函数中的函数做为返回值前端

function aa(x){
       var num=1;
      function bb(y){
          console.log(x+y+(++num));
     }
return bb;
}

闭包的另外一种做用是隔离做用域，请看下面这段代码vue

for(var i=0;i<2;i++){
      setTimeout(function(){
              console.log(i);
        },0);
}

上面这段代码的执行结果是2,2而不是0,1，由于等for循环出来后，执行setTimeout中的函数时，i的值已经变成了2.html5

谈谈This对象的理解

  • this是js的一个关键字，随着函数使用场合不一样，this的值会发生变化。java

  • 可是有一个总原则，那就是this指的是调用函数的那个对象。node

  • this通常状况下：是全局对象Global。 做为方法调用，那么this就是指这个对象react

事件是？IE与火狐的事件机制有什么区别？ 如何阻止冒泡？

  1. 咱们在网页中的某个操做（有的操做对应多个事件）。例如：当咱们点击一个按钮就会产生一个事件。是能够被 JavaScript 侦测到的行为。jquery

  2. 事件处理机制：IE是事件冒泡、火狐是 事件捕获；

  3. ev.stopPropagation();

JavaScript的做用域和做用域链?

JavaScript的做用域指的是变量的做用范围，内部做用域由函数的形参，实参，局部变量，函数构成，内部做用域和外部的做用域一层层的连接起来造成做用域链，当在在函数内部要访问一个变量的时候，首先查找本身的内部做用域有没有这个变量，若是没有就到这个对象的原型对象中去查找，仍是没有的话，就到该做用域所在的做用域中找，直到到window所在的做用域，每一个函数在声明的时候就默认有一个外部做用域的存在了，代码以下：

var t=4;
function aa(){
       var num1=12;
       funciton bb(){
       var num2=34;
       console.log(t+" "+num1+" "+num2);
      }
}

bb找t变量的过程就是，先到本身的内部做用域中找，发现没有找到，而后到bb所在的最近的外部变量中找，也就是aa的内部做用域，仍是没有找到，再到window的做用域中找，结果找到了

“use strict”;是什么意思 ? 使用它的好处和坏处分别是什么？

ECMAscript 5添加了第二种运行模式："严格模式"（strict mode）。顾名思义，这种模式使得Javascript在更严格的条件下运行。
设立"严格模式"的目的，主要有如下几个：

优势：

  1. 消除Javascript语法的一些不合理、不严谨之处，减小一些怪异行为;

  2. 消除代码运行的一些不安全之处，保证代码运行的安全；

  3. 提升编译器效率，增长运行速度；

  4. 为将来新版本的Javascript作好铺垫。

    注：通过测试 IE6,7,8,9 均不支持严格模式。

缺点：

如今网站的 JS 都会进行压缩，一些文件用了严格模式，而另外一些没有。这时这些原本是严格模式的文件，被 merge 后，这个就合并到了文件的中间，不只没有指示严格模式，反而在压缩后浪费了字节。

new操做符具体干了什么呢?

一、建立一个空对象，而且 this 变量引用该对象，同时还继承了该函数的原型。
二、属性和方法被加入到 this 引用的对象中。
三、新建立的对象由 this 所引用，而且最后隐式的返回 this 。

var obj  = {};
obj.__proto__ = Base.prototype;
Base.call(obj);

Javascript中，有一个函数，执行时对象查找时，永远不会去查找原型，这个函数是？

hasOwnProperty()

你对JSON 的了解？

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。
它是基于JavaScript的一个子集。数据格式简单, 易于读写, 占用带宽小 {'age':'12', 'name':'back'}

js延迟加载的方式有哪些？

defer和async、动态建立DOM方式（用得最多）、按需异步载入js

ajax 是什么?优缺点有哪些？

优势：

  1. 经过异步模式，提高了用户体验

  2. 优化了浏览器和服务器之间的传输，减小没必要要的数据往返，减小了带宽占用

  3. Ajax在客户端运行，承担了一部分原本由服务器承担的工做，减小了大用户量下的服务器负载。

Ajax的最大的特色：
Ajax能够实现动态不刷新（局部刷新）

缺点：

一、ajax不支持浏览器back按钮。
二、安全问题 AJAX暴露了与服务器交互的细节。
三、对搜索引擎的支持比较弱。
四、破坏了程序的异常机制。
五、不容易调试。

如何解决跨域问题?

jsonp（利用script标签的跨域能力）跨域、websocket（html5的新特性，是一种新协议）跨域、设置代理服务器（由服务器替咱们向不一样源的服务器请求数据）、CORS（跨源资源共享，cross origin resource sharing）、iframe跨域、postMessage(包含iframe的页面向iframe传递消息)

模块化怎么作？当即执行函数,不暴露私有成员

var module1 = (function(){
　　　　var _count = 0;
　　　　var m1 = function(){
　　　　　　//...
　　　　};
　　　　var m2 = function(){
　　　　　　//...
　　　　};
　　　　return {
　　　　　　m1 : m1,
　　　　　　m2 : m2
　　　　};
　　})();

异步加载的方式有哪些？

(1) defer，只支持IE
(2) async： false,（默认是true）;
(3) 建立script，插入到DOM中，加载完毕后callBack

documen.write和 innerHTML的区别

  • document.write只能重绘整个页面

  • innerHTML能够重绘页面的一部分

.call() 和 .apply() 的区别？

例子中用 add 来替换 sub，add.call(sub,3,1) == add(3,1) ，因此运行结果为：alert(4);
注意：js 中的函数实际上是对象，函数名是对 Function 对象的引用。

function add(a,b)
{
    alert(a+b);
}

function sub(a,b)
{
    alert(a-b);
}

add.call(sub,3,1);

Jquery与jQuery UI 有啥区别？

  • *jQuery是一个js库，主要提供的功能是选择器，属性修改和事件绑定等等。

  • *jQuery UI则是在jQuery的基础上，利用jQuery的扩展性，设计的插件。

  • 提供了一些经常使用的界面元素，诸如对话框、拖动行为、改变大小行为等等

jquery 中如何将数组转化为json字符串，而后再转化回来？

jQuery中没有提供这个功能，因此你须要先编写两个jQuery的扩展：

$.fn.stringifyArray = function(array) {
 return JSON.stringify(array)
}

$.fn.parseArray = function(array) {
 return JSON.parse(array)
} 

而后调用：
$("").stringifyArray(array)

针对 jQuery 的优化方法？

  • 基于Class的选择性的性能相对于Id选择器开销很大，由于需遍历全部DOM元素。

  • 频繁操做的DOM，先缓存起来再操做。用Jquery的链式调用更好。
    好比：var str=$("a").attr("href"); *for (var i = size; i < arr.length; i++) {}
    for 循环每一次循环都查找了数组 (arr) 的.length 属性，在开始循环的时候设置一个变量来存储这个数字，可让循环跑得更快：
    for (var i = size, length = arr.length; i < length; i++) {}

JavaScript中的变量声明提高？

在函数用var声明的变量会在函数中函数体执行以前预先加载（变量回预先声明可是不会赋值）
请看代码,就会秒懂

var num=1;
function aa(){
  console.log(num);     //undeifned
  var num=2; 
  console.log(num);  //2
}
aa();

为何在aa函数中会出现上述结果呢，这就是JavaScript的变量提高了，虽然变量num的定义在后面，不过浏览器在解析的时候，会把变量的定义放到最前面，上面的aa函数至关于

function aa(){
  var num;
  console.log(num);   //undefined
  num=2; 
  console.log(num);   //2
}

(简单的内存图)

那些操做会形成内存泄漏？

  • 内存泄漏指任何对象在您再也不拥有或须要它以后仍然存在。

  • 垃圾回收器按期扫描对象，并计算引用了每一个对象的其余对象的数量。若是一个对象的引用数量为 0（没有其余对象引用过该对象），或对该对象的唯一引用是循环的，那么该对象的内存便可回收。

  • setTimeout 的第一个参数使用字符串而非函数的话，会引起内存泄漏。

  • 闭包、控制台日志、循环（在两个对象彼此引用且彼此保留时，就会产生一个循环）

如何判断当前脚本运行在浏览器仍是node环境中？（阿里）

经过判断Global对象是否为window，若是不为window，当前脚本没有运行在浏览器中

固然，在面试中，除了要知道这些基础的知识外，不少时候须要的是你的工做经验，你有没有？接下来就是在工做中，项目中，遇到的问题，解决方案，以及思考的一些套路啦

其余问题（举一些我遇见过的及汇总下来的问题，谨供你们参考）

  • 你遇到过比较难的技术问题是？你是如何解决的？

  • 常使用的库有哪些？经常使用的前端开发工具？开发过什么应用或组件？

  • 页面重构怎么操做？

  • 列举IE 与其余浏览器不同的特性？

  • 99%的网站都须要被重构是那本书上写的？

  • 什么叫优雅降级和渐进加强？

  • WEB应用从服务器主动推送Data到客户端有那些方式？

  • 你在如今的团队处于什么样的角色，起到了什么明显的做用？

  • 除了前端之外还了解什么其它技术么？你最最厉害的技能是什么？

  • 如何设计突发大规模并发架构？

  • 你认为怎样才是全端工程师（Full Stack developer）？

  • 介绍一个你最得意的做品吧？

  • 你的优势是什么？缺点是什么？

  • 如何管理前端团队?

  • 最近在学什么？能谈谈你将来3，5年给本身的规划吗？

对Node的优势和缺点提出了本身的见解？

优势

  • 由于Node是基于事件驱动和无阻塞的，因此很是适合处理并发请求， 所以构建在Node上的代理服务器相比其余技术实现（如Ruby）的服务器表现要好得多。 此外，与Node代理服务器交互的客户端代码是由javascript语言编写的， 所以客户端和服务器端都用同一种语言编写，这是很是美妙的事情。

缺点:

  • Node是一个相对新的开源项目，因此不太稳定，它老是一直在变， 并且缺乏足够多的第三方库支持。看起来，就像是Ruby/Rails当年的样子。

你有哪些性能优化的方法？（看雅虎14条性能优化原则）

（1） 减小http请求次数：CSS Sprites, JS、CSS源码压缩、图片大小控制合适；网页Gzip，CDN托管，data缓存 ，图片服务器。
（2） 前端模板 JS+数据，减小因为HTML标签致使的带宽浪费，前端用变量保存AJAX请求结果，每次操做本地变量，不用请求，减小请求次数
（3） 用innerHTML代替DOM操做，减小DOM操做次数，优化javascript性能。
（4） 当须要设置的样式不少时设置className而不是直接操做style。
（5） 少用全局变量、缓存DOM节点查找的结果。减小IO读取操做。
（6） 避免使用CSS Expression（css表达式)又称Dynamic properties(动态属性)。
（7） 图片预加载，将样式表放在顶部，将脚本放在底部 加上时间戳。
（8） 避免在页面的主体布局中使用table，table要等其中的内容彻底下载以后才会显示出来，显示比div+css布局慢。

http状态码有那些？分别表明是什么意思？

100-199 用于指定客户端应相应的某些动做。 
200-299 用于表示请求成功。 
300-399 用于已经移动的文件而且常被包含在定位头信息中指定新的地址信息。 
400-499 用于指出客户端的错误。
400    一、语义有误，当前请求没法被服务器理解。
401   当前请求须要用户验证 
403  服务器已经理解请求，可是拒绝执行它。
500-599 用于支持服务器错误。 503 – 服务不可用

一个页面从输入 URL 到页面加载显示完成，这个过程当中都发生了什么？（流程说的越详细越好）

  • 查找浏览器缓存

  • DNS解析、查找该域名对应的IP地址、重定向（301）、发出第二个GET请求

  • 进行HTTP协议会话

  • 客户端发送报头(请求报头)

  • 服务器回馈报头(响应报头)

  • html文档开始下载

  • 文档树创建，根据标记请求所需指定MIME类型的文件

  • 文件显示

    {浏览器这边作的工做大体分为如下几步：
加载：根据请求的URL进行域名解析，向服务器发起请求，接收文件（HTML、JS、CSS、图象等）。
解析：对加载到的资源（HTML、JS、CSS等）进行语法解析，建议相应的内部数据结构（好比HTML的DOM树，JS的（对象）属性表，CSS的样式规则等等）}

你经常使用的开发工具是什么，为何？

能够从你接触前端到逐步深刻学习使用的过程当中，你用过什么编辑器以及转化的过程和缘由方面回答

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

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

    • 实现界面交互

    • 提高用户体验

    • 有了Node.js，前端能够实现服务端的一些事情

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

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

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

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

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

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

平时如何管理你的项目？

  • 先期团队必须肯定好全局样式（globe.css），编码模式(utf-8) 等；

  • 编写习惯必须一致（例如都是采用继承式的写法，单样式都写成一行）；

  • 标注样式编写人，各模块都及时标注（标注关键样式调用的地方）；

  • 页面进行标注（例如 页面 模块 开始和结束）；

  • CSS跟HTML 分文件夹并行存放，命名都得统一（例如style.css）；

  • JS 分文件夹存放 命名以该JS功能为准的英文翻译。

  • 图片采用整合的 images.png png8 格式文件使用 尽可能整合在一块儿使用方便未来的管理

说说最近最流行的一些东西吧？常去哪些网站？

Node.js、Mongodb、npm、MVVM、MEAN、three.js 、angular、react、vue
github 、 知乎 、 MDN、 ES6、 Bootstrap 、 git

移动端（Android IOS）怎么作好用户体验?

  • 清晰的视觉纵线、信息的分组、极致的减法、

  • 利用选择代替输入、标签及文字的排布方式、

  • 依靠明文确认密码、合理的键盘利用、

在面试中，实际上是一个互动的环节，不只要回答问题，也要抓住机会，得到主动权，想问公司的一些问题？

问公司问题：

  • 目前关注哪些最新的Web前端技术（将来的发展方向）？

  • 前端团队如何工做的（实现一个产品的流程）？

  • 公司的薪资结构是什么样子的？（摸清本身具体在什么层次）

  • 公司的晋升机制具体是怎么样的？（看出你的上进心的稳定性）

最后赠言

企业面试主要是看你能不能干的了。企业很难招到一个适合的人，不会轻易把你淘汰掉。

若是对方挑你毛病，证实对方有招聘你的意图，不然的话，对方不会浪费时间挑你毛病，挑你毛病的主要缘由是，想压榨你工资，因此你要自信一点，不管对方怎么挑你毛病都不要惧怕。企业中没有专门的面试官。

不是说我面试了这一家，他就必定要录取我，还有不少公司等着你去挑，目光放长远一点，必定要拿到本身满意的薪资才作。

面试就是一个解开双方谎话的过程，你能瞒过对方，证实你赢了。

换个心态去面试，不是企业在挑你，而是你在挑企业。昂起你自信的头颅，勇敢的去迎接挑战吧！你的将来属于你!

转载自：http://www.jianshu.com/p/87fa...

~END~

好了，下面是广告时间。前端学习群，入群即送学习资料。如今还不满，从速哦！入群加笑笑微信：iamaixiaoxiao。

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程