web前端面试题总结

web前端常见面试题总结

1.为何选择前端这个方向?

  • 对前端很感兴趣,之前也接触过其他语言,但是直到接触前端才发现真的有兴趣做下去,兴趣是一个人最好的老师。
  • 前端很有前途,像现在node.js,rn,微信小程序这类工具和框架可以让前端进行后端和移动开发,所以我觉得前端的前途会更多一点。
2.谈谈你对前端的理解?
  • 目前前端工程师最核心的技能还是:Html,CSS,JS。前端负责的是用户可以看到的部分,所以也是最接近用户的工程师,同时在产品研发流程中前端要同时与产品,设计,后端等很多人合作。
3.Vue双向数据绑定的实现?
  • vue.js则是采用数据劫持结合开发者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者(文本节点则是作为订阅者),在收到消息后执行相应的更新操作。
4.react和vue有哪些不同,说说你对这两个框架的看法?
  • 都用了virtual dom 的方式,性能都很好
  • ui上都是组件化写法,开发效率很高
  • vue是双向数据绑定,react是单项数据绑定,当工程规模比较大时双向数据绑定会很难维护
  • vue适合不会持续的小型web应用,使用vue.js能带来短期内较高的开发效率,否则采用react

5.let和const的区别?

  • let声明的变量可以改变,值和类型都可以改变,没有限制。
  • const声明的变量不得改变值

6.平时用了es6的那些特性?

  • let,const,箭头函数,字符串模板,class类,模板化promise

7.浏览器原生支持module吗?如果支持会带来那些遍历?

  • 不支持
8.介绍一下你对webpack的理解,和gulp有什么不同?
  • Webpack是模块打包工具,他会分析模块间的依赖关系,然后使用loaders处理它们,最后生成一个优秀化并且合并后的静态资源。
  • gulp是前端自动化工具,能够优化前端工作流程,比如合并压缩。

9.Webpack打包速度慢,你觉得可能的原因是什么?该如何解决模块太多?

  • Webpack可以配置externals来将依赖库指向全局变量,从而不再打包这个库

10.http响应中content-type包含哪些内容?

    请求中的消息主体是用何种方式编码
    application/x-www-form-urlencoded
    这是最常见的 POST 提交数据的方式 按照 key1=val1&key2=val2 的方式进行编码
    application/json
    告诉服务端消息主体是序列化后的 JSON 字符串

11. position:absolute和float属性的异同?

  • 共同点 :对内联元素设置float和absolute属性,可以让元素脱离文档流,并且可以设置其宽高。
  • 不同点 :float仍可占据位置,不会覆盖在另一个BFC区域上,浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。absolute会覆盖文档流中的其他元素。

12:平时是怎么学新技术的

  • 伯乐在线 infoq 掘金 简书 慕课网

13:Node,Koa用的怎么样

  • koa是一个相对于express来说,更小,更健壮,更富表现力的Web框架,不用写回调
  • koa是从第一个中间件开始执行,遇到next 进入下一个中间件,一直执行到最后一个中间件,在逆序async  await 语法的支持

14:使用模块化加载时,模块加载的顺序是怎样的,如果不知道,根据已有的知识,你觉得顺序应该是怎么样的

  • commonjs 同步 顺序执行
  • AMD 提前加载,不管是否调用模块,先解析所有模块 requirejs 速度快 有可能浪费资源
  • CMD 提前加载,在真正需要使用(依赖)模块时才解析该模块 seajs 按需解析 性能比AMD差

15: 介绍一下闭包和闭包常用场景

  • 闭包是指有权访问另一个函数作用域中的变量的函数. 创建闭包常见方式,就是在一个函数内部创建另一个函数.
  • 应用场景 设置私有变量和方法
  • 不适合场景:返回闭包的函数是个非常大的函数
  • 闭包的缺点就是常驻内存,会增大内存使用量,使用不当很容易造成内存泄露。

16: 为什么会出现闭包这种东西,解决了什么问题

  • 受JavaScript链式作用域结构的影响,父级变量中无法访问到子级的变量值,为了解决这个问题,才使用闭包这个概念

17: 介绍一下你所了解的作用域链,作用域链的尽头是什么,为什么

  • 每一个函数都有一个作用域,比如我们创建了一个函数,函数里面又包含了一个函数,那么现在  就有三个作用域,这样就形成了一个作用域链。
  • 作用域的特点就是,先在自己的变量范围中查找,如果找不到,就会沿着作用域链往上找。

18: 简述Ajax的过程?,主要用到哪些状态码

  • 创建XMLHttpRequest对象,也就是创建一个异步调用对象.
  • 创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息.
  • 设置响应HTTP请求状态变化的函数.
  • 发送HTTP请求.
  • 获取异步调用返回的数据.
  • 使用JavaScript和DOM实现局部刷新.

当前状态readystate
0 代表未初始化。 还没有调用 open 方法
1 代表正在加载。 open 方法已被调用,但 send 方法还没有被调用
2 代表已加载完毕。send 已被调用。请求已经开始
3 代表交互中。服务器正在发送响应
4 代表完成。响应发送完毕
常用状态码status
404 没找到页面(not found)
403 禁止访问(forbidden)
500 内部服务器出错(internal service error)
200 一切正常(ok)
304 没有被修改(not modified)(服务器返回304状态,表示源文件没有被修改)

18:对自己未来的规划是怎样的

  • 对于刚毕业的人来说,前两年是很重要的,先打好基础,多提升js能力。三至四年在提升JS能力的同时,开始要往多方面发展,前端工程师远远不仅是JS而已。制作一个性能高、交互好、视觉美的页面,需要从前端框架选型、架构设计、构建工具,到后端通信机制、设计与交互、网络和浏览器优化等各方面的知识。一专多长才是前端工程师的终极目标。

19: 说说你知道JavaScript的内存回收机制

  • 垃圾回收器会每隔一段时间找出那些不再使用的内存,然后为其释放内存。
  • 一般使用标记清除方法  当变量进入环境 标记为进入环境,离开环境标记为离开环境
  • 还有引用计数方法
  • 堆栈
  • stack 为自动分配的内存空间,它由系统自动释放;而 heap 则是动态分配的内存,大小不定也不会自动释放。
  • 基本数据类型存放在栈中
  • 引用类型 存放在堆内存中, 首先从栈中获得该对象的地址指针,然后再从堆内存中取得所需的数据

20:UMD规范和ES6模块化,Commonjs的对比

  • CommonJS是一个更偏向于服务器端的规范。用于NodeJS 是同步的
  • AMD是依赖前置的
  • CMD推崇依赖就近,延迟执行。可以把你的依赖写进代码的任意一行
  • AMD和CMD都是用difine和require,但是CMD标准倾向于在使用过程中提出依赖,就是不管代码写到哪突然发现需要依赖另一个模块,那就在当前代码用require引入就可以了,规范会帮你搞定预加载,你随便写就可以了。但是AMD标准让你必须提前在头部依赖参数部分写好(没有写好? 倒回去写好咯)。这就是最明显的区别。
  • UMD写一个文件需要兼容不同的加载规范

ES6通过import 、export 实现模块的输入输出。其中import命令用于输入其他模块提供的功能,export命令用于规定模块的对外接口。

21:http请求头
  • get post delete put head options trace connect
  • OPTIONS:返回服务器针对特定资源所支持的HTTP请求方法
22.框架问题
什么是 MVVM , 和 MVC 是什么区别, 原理是什么?
  • mvc的界面和逻辑关联紧密,数据直接从数据库读取,必须通过Controller来承上启下,通信都是单向的。mvvm的View 和 ViewModel可以互相通信,界面数据从viewmodel中获取。
父子组件怎么通信的?
  • vue:父组件是通过props属性给子组件通信 ,子组件是通过$emit,$on通信
  • react:props传递  父给子传一个回调函数 将数据传给父亲处理
兄弟组件怎么通信的?
  • vuex 建立一个vue实例 emit触发事件 on监听事件
  redux  子A -> 父 -> 子B
生命周期有哪些, 怎么用?
  • beforecreated :el 和 data 并未初始化  
  • created :完成了 data 数据的初始化,el没有 
  • beforeMount :完成了 el 和 data 初始化 
  • mounted  :完成挂载  updated;destroyed
  • react:初始化阶段、运行中阶段、销毁阶段
  • 初始化getDefaultProps() 和getInitialState()初始化
  •  componentWillMount() 在组件即将被渲染到页面render() 组件渲染
  •  componentDidMount() 组件被渲染到页面上,
  • 运行中shouldComponentUpdate() componentWillUpdate() render() componentDidUpdate() 
  • 销毁componentWillUnmount() 
23:清除浮动
  • 两种原理:
(1)、利用clear属性进行清理
具体的实现原理是通过引入清除区域,这个相当于加了一块看不见的框把定义clear属性的元素向下挤 
父容器结尾插入空标签<div style="clear: both;"></div>
利用CSS伪元素:
.clearfix:after {
  content: ".";
  height: 0;
  visibility: hidden;
  display: block;
  clear: both;
}
通过将这个类添加到父容器当中,会在父容器的末尾增加了一个高度为0、具有清除属性的、不可见的块级元素。
(2)、将父容器形成BFC
BFC能清理浮动主要运用的是它的布局规则:
  • 内部的Box会在垂直方向,一个接一个地放置。
  • Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
  • 每个元素的margin box的左边, 与包含块border box的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此。
  • BFC的区域不会与float box重叠。
  • BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如此。
  • 计算BFC的高度时,浮动元素也参与计算
浮动清理利用的主要是第六条规则,只要将父容器触发为BFC,就可以实现包含的效果。
那么触发BFC有哪几种方法?
1.根元素
2.float属性不为none
3.position为absolute或fixed
4.display为inline-block, table-cell, table-caption, flex, inline-flex

5.overflow不为visible

24.前端性能优化
  • 减少http请求 使用sprite图、合并js和css文件
  • 使用cdn 将用户安排在近的服务器上
  • 使用缓存 缓存ajax 使用外部的css和js以便缓存 使用expire cach-control etag
  • 压缩资源 使用gzip压缩js和css文件
  • 代码层面 避免使用样式表达式、通配符选择器、样式放在顶部、脚本放在底部
25.事件模型和事件代理
  • 事件三个阶段:事件捕获,目标,事件冒泡(低版本ie不支持捕获阶段)
  • w3c绑定事件target.addEventListener(event,handler,false)
  • 解绑target.removeEventListener(eventType, handler, false )
  • ie绑定 target.attachEvent(on+event, handler)
  • 解绑target.detachEvent("on"+eventType, handler)
事件代理优点:
  • 可以大量节省内存占用,减少事件注册,比如在table上代理所有td的click事件就非常棒
  • 可以实现当新增子对象时无需再次对其绑定事件,对于动态内容部分尤为合适
26.将url的查询参数解析成字典对象
function getQueryObject(url) {
    url = url == null ? window.location.href : url;
    var search = url.substring(url.lastIndexOf("?") + 1);
    var obj = {};
    var reg = /([^?&=]+)=([^?&=]*)/g;
    search.replace(reg, function (rs, $1, $2) {
        var name = decodeURIComponent($1);
        var val = decodeURIComponent($2);               
        val = String(val);
        obj[name] = val;
        return rs;
    });
    return obj;
}
 
getQueryObject("http://www.cnblogs.com/leee/p/4456840.html?name=1&dd=ddd**")
Object {name: "1", dd: "ddd**"}
  
27.position的值, relative和absolute分别是相对于谁进行定位的?
  • relative :相对定位,相对于自己本身在正常文档流中的位置进行定位。
  • absolute :生成绝对定位,相对于最近一级定位不为static的父元素进行定位。
  • fixed : 生成绝对定位,相对于浏览器窗口或者frame进行定位。
  • static :默认值,没有定位,元素出现在正常的文档流中。
   28.CSS 选择符有哪些?哪些属性可以继承?优先级算法如何计算? CSS3新增伪类有那些?
选择符 :
  • id选择器(#myId);
  • 类选择器(.myClassName);
  • 标签选择器(div,p,h1);
  • 相邻选择器(h1 + p);
  • 子选择器(ul > li);
  • 后代选择器(li a);
  • 通配符选择器(*);
  • 属性选择器(button[disabled="true"]);
  • 伪类选择器(a:hover,li:nth-child);表示一种状态
  • 伪元素选择器(li:before、:after,:first-letter,:first-line,:selecton);表示文档某个部分的表现
优先级 :

!important > 行内样式(比重1000) > id(比重100) > class/属性(比重10) > tag / 伪类(比重1);

伪类和伪元素区别 :
  • 伪类:a:hover,li:nth-child;
  • 伪元素:li:before、:after,:first-letter,:first-line,:selector;
39.两个数组合并成一个数组排序返回
先依次比较两个数组,按照小的就传入新的数组。当这次比较完之后可能有一个数组的长度很长,留下一些数组,然后在新数组的末尾插入即可。
functiongetRes(arr1, arr2){
   var len1 = arr1.length,
       len2 = arr2.length,
       i = 0,
       j = 0,
       k = 0,
       res = new Array(len1+len2);
 
       while(i < len1 && j <len2){
res[k++] = arr[(arr[i] > arr[j]) ? j++ : i++];
}
While(i < len1)   res[k++]= arr1[i++];
While(j < len2)   res[k++]= arr2[j++];
Return res;

}

40.zepto和jquery区别
  • zepto比jquery体积小很多,移动端的兼容性不需要要考虑很多,jquery中的很多功能都没有。
  • width()和height()不一样  解决用.css('width')
41.css3动画和jquery动画的差别
  • css3中的过渡和animation动画都是基于css实现机制的,属于css范畴之内,并没有涉及到任何语言操作。效率略高与jQuery中的animate()函数,但兼容性很差。
  • jQuery中的animate()函数可以简单的理解为css样式的“逐帧动画”,是css样式不同状态的快速切换的结果。效率略低于css3动画执行效率,但是兼容性好。‍

42.如何解决ajax无法后退的问题

HTML5里引入了新的API,即:history.pushState, history.replaceState
可以通过pushState和replaceState接口操作浏览器历史,并且改变当前页面的URL。

onpopstate监听后退

43.实现一个once函数

function test () {console.log('test')}
var once = function (fn) {
  var isFirst = true;
  return function () {
    if (isFirst) {
      isFirst = !isFirst;
      fn();
    }
  };
};

var b = once(test);
b(); // 'test'
b(); // nothing
 
44.分域名请求图片的原因和好处
  • 浏览器的并发请求数目限制是针对同一域名的,超过限制数目的请求会被阻塞
  • 浏览器并发请求有个数限制,分域名可以同时并发请求大量图片
45.页面的加载顺序
    html顺序加载,其中js会阻塞后续dom和资源的加载,css不会阻塞dom和资源的加载但是会阻塞js的加载。
浏览器会使用prefetch对引用的资源提前下载
  • 没有 defer 或 async,浏览器会立即加载并执行指定的脚本
  • 有 async,加载和渲染后续文档元素的过程将和 script.js 的加载与执行并行进行(下载异步,执行同步,加载完就执行)。
  • 有 defer,加载后续文档元素的过程将和 script.js 的加载并行进行(异步),但是 script.js 的执行要在所有元素解析完成之后,DOMContentLoaded 事件触发之前完成。
46.生成10个20-50之间的随机数,存在数组中,常见排序方法,数组乱序方法
var arr = [];
for(var i = 0;i<10;i++){
    var num = Math.random()*30 + 20;
    num = parseInt(num, 10);
    arr.push(num);
}
arr.sort(function(a,b){
    return 0.5 - Math.random();
})
47.计算机网络的分层概述
  • tcp/ip模型:从下往上分别是链路层,网络层,传输层,应用层
  • osi模型:从下往上分别是物理层,链路层,网络层,传输层,会话层,表示层,应用层。
48.jscss缓存问题
浏览器缓存的意义在于提高了执行效率,但是也随之而来带来了一些问题,导致修改了js、css,客户端不能更新
都加上了一个时间戳作为版本号

<script type=”text/javascript” src=”{JS文件连接地址}?version=XXXXXXXX”></script>

49.setTimeout,setInterval,requestAnimationFrame之间的区别
  • setInterval如果函数执行的时间很长的话,第二次的函数会放到队列中,等函数执行完再执行第二次,导致时间间隔发生错误。
  • 而settimeout一定是在这个时间定时结束之后,它才会执行
  • requestAnimationFrame是为了做动画专用的一个方法,这种方法对于dom节点的操作会比较频繁。
50.webpack常用到哪些功能

  • 设置入口  设置输出目 设置loader  extract-text-webpack-plugin 将css从js代码中抽出并合并 处理图片文字等功能 解析jsx解析bable
51.介绍sass

  • sass是一门编程语言,css是一门标记语言,sass是一种css开发工具,可以预编译css,sass提供了很多遍历的写法:例如自定义变量,if语句,循环,嵌套,继承,混合
52.websocket和ajax轮询
Websocket是HTML5中提出的新的协议 ,注意,这里是协议,可以实现客户端与服务器端的通信,实现服务器的推送 功能。
其优点就是,只要建立一次连接,就可以连续不断的得到服务器推送的消息,节省带宽和服务器端的压力。
ajax轮询模拟长连接就是每个一段时间(0.5s)就向服务器发起ajax请求,查询服务器端是否有数据更新

其缺点显而易见,每次都要建立HTTP连接,即使需要传输的数据非常少,所以这样很浪费带宽

53.tansition和margin的百分比根据什么计算

  • transition是相对于自身,margin相对于参照物
54.冒泡排序、快速排序、去重、查找字符串最多值
//冒泡排序
var bubbleSort = function(arr) {
   for (var i = 0; i < arr.length-1; i++) {
     for (var j = i+1; j < arr.length; j++) {
       if (arr[i]>arr[j]) {
         var temp = arr[i];
         arr[i] = arr[j];
         arr[j] = temp;
       }
     }
   }
   return arr;
};
  
//快速排序
var quickSort = function(arr) {
  if (arr.length <= 1) {
    return arr;
  }
  var len = arr.length;
  var midIndex = Math.floor(len/2);
  var mid = arr.splice(midIndex,1);
  var left = [];
  var right = [];
  for (var i = 0; i < arr.length; i++) {
    if (arr[i] < mid) {
      left.push(arr[i]);
    } else {
      right.push(arr[i]);
    }
  }
  return quickSort(left).concat(mid,quickSort(right))
}
  
// 去重
 var distinct = function(arr) {
   var map = {};
   var result = [];
   for (var i = 0; i < arr.length; i++) {
      if (!map[arr[i]]) {
        map[arr[i]] = true;
        result.push(arr[i]);
      }
   }
   return result;
 }
  
//查找字符串中最多的值
var search = function(str) {
  var json = {};
  var max = 0;
  var char;
  for (var i = 0; i < str.length; i++) {
    if (!json[str[i]]) {
      json[str[i]]=1;
    } else {
      json[str[i]]++;
    }
  }
  console.log(json);
  for(var i in json){
        if(json[i]>max){
                max = json[i];
                char = i;
        }
}
  console.log(max, char);

}

55.函数组合继承
原型继承、构造函数继承、call aplly继承
var Super = function(name){
  this.name = name;
}
Super.prototype.func1 = function() { console.log('func1'); }
var Sub = function(name,age) {
  Super.call(this, name);
  this.age = age;
}

Sub.prototype = new Super();

56.事件绑定
var addEvent = function(e, type, handler, capture ) {
  if (e.addEventListener) {
    e.addEventListener(type, handler, capture);
  } else if (e.attachEvent) {
    e.attachEvent('on'+type, handler);
  } else {
    e['on'+type] = handler;
  }
}
57.浅克隆和深度克隆
 
//浅克隆
function extendCopy(p) {
    var c = {};
    for (var i in p) { 
      c[i] = p[i];
    }
    c.uber = p;
    return c;
 }
//深度克隆
var clone = function(v) {
  var o = v.constructor === Array ? [] : {};
  for (var i in v) {
    o[i] = typeof v[i] === "Object" ? clone(v[i]) : v[i];
  }
  return o;
}
58.实现一个秒针绕一点转动的效果
          animation: move 60s infinite steps(60);  
         /*设置旋转的中心点为中间底部*/  
          transform-origin: center bottom;  
        /*旋转从0度到360度*/  
        @keyframes move {  
            from {  
                transform: rotate(0deg);  
            }  
            to {  
                transform: rotate(360deg);  
            }  

        }  

59.移动端兼容问题
  • IOS移动端click事件300ms的延迟响应一些情况下对非可点击元素如(label,span)监听click事件,ios下不会触发,css增加cursor:pointer就搞定了

60.对前端界面工程师这个职位是怎么理解的?

  • 前端是最贴近用户的程序员,前端的能力就是能让产品从90分进化到100分,甚至更好
  • 参与项目,快速高质量完成时限效果图,精确到1px
  • 与团队成员,UI设计,产品经理沟通
  • 做好页面结构,页面结构和用户体验
  • 支队服务器的优化,拥抱最新的前端技术










阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页