web前端常见面试题总结

最新推荐文章于 2024-05-11 10:11:55 发布

qq_qian

最新推荐文章于 2024-05-11 10:11:55 发布

阅读量208

点赞数

原文链接：https://blog.csdn.net/a_Keri/article/details/79411312

版权

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();
    }
  };
};

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设计，产品经理沟通
做好页面结构，页面结构和用户体验
支队服务器的优化，拥抱最新的前端技术
————————————————
版权声明：本文为CSDN博主「a_Keri」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/a_Keri/article/details/79411312

qq_qian

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
web前端常见面试题总结

web前端常见面试题总结1.为何选择前端这个方向？对前端很感兴趣，之前也接触过其他语言，但是直到接触前端才发现真的有兴趣做下去，兴趣是一个人最好的老师。前端很有前途，像现在node.js,rn,微信小程序这类工具和框架可以让前端进...
复制链接

扫一扫