编程世界前端开发收藏夹前端面试集锦

前端面试题整理

2017-03-13  本文已影响11550人  程序员poetry

本文整理于网络，原文链接 http://blog.poetries.top/2017/03/12/front-end-interview-summary

面试经验谈--来自知乎芋头Live

目录

$HTML， HTTP，web综合问题

$CSS部分

$JavaScript

$jQuery

$编程题

$其他

人事面

常问

$HTML， HTTP，web综合问题

1、前端需要注意哪些SEO

2、<img>的title和alt有什么区别

3、HTTP的几种请求方法用途

4、从浏览器地址栏输入url到显示页面的步骤

5、如何进行网站性能优化

6、HTTP状态码及其含义

7、语义化的理解

8、介绍一下你对浏览器内核的理解？

9、html5有哪些新特性、移除了那些元素？

10、HTML5的离线储存怎么使用，工作原理能不能解释一下？

CACHE MANIFEST
#v0.11
CACHE:
js/app.js
css/style.css
NETWORK:
resourse/logo.png
FALLBACK:
/ /offline.html

11、浏览器是怎么对HTML5的离线储存资源进行管理和加载的呢

12、请描述一下 cookies，sessionStorage 和 localStorage 的区别？

13、iframe有那些缺点？

14、WEB标准以及W3C标准是什么?

15、xhtml和html有什么区别?

16、Doctype作用? 严格模式与混杂模式如何区分？它们有何意义?

17、行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？行内元素和块级元素有什么区别？

18、HTML全局属性(global attribute)有哪些

19、Canvas和SVG有什么区别？

20、HTML5 为什么只需要写 <!DOCTYPE HTML>？

21、如何在页面上实现一个圆形的可点击区域？

22、网页验证码是干嘛的，是为了解决什么安全问题

$CSS部分

1、css sprite是什么,有什么优缺点

2、display: none;与visibility: hidden;的区别

3、link与@import的区别

  1. link是HTML方式， @import是CSS方式
  2. link最大限度支持并行下载，@import过多嵌套导致串行下载，出现FOUC
  3. link可以通过rel="alternate stylesheet"指定候选样式
  4. 浏览器对link支持早于@import，可以使用@import对老浏览器隐藏样式
  5. @import必须在样式规则之前，可以在css文件中引用其他文件
  6. 总体来说：link优于@import

4、什么是FOUC?如何避免

5、如何创建块级格式化上下文(block formatting context),BFC有什么用

6、display,float,position的关系

7、清除浮动的几种方式，各自的优缺点

8、为什么要初始化CSS样式?

9、css3有哪些新特性

CSS3新增伪类有那些？

10、display有哪些值？说明他们的作用

11、介绍一下标准的CSS的盒子模型？低版本IE的盒子模型有什么不同的？

12、CSS优先级算法如何计算？

13、对BFC规范的理解？

14、谈谈浮动和清除浮动

15、position的值， relative和absolute定位原点是

16、display:inline-block 什么时候不会显示间隙？(携程)

17、PNG,GIF,JPG的区别及如何选

18、行内元素float:left后是否变为块级元素？

19、在网页中的应该使用奇数还是偶数的字体？为什么呢？

20、::before 和 :after中双冒号和单冒号 有什么区别？解释一下这2个伪元素的作用

21、如果需要手动写动画，你认为最小时间间隔是多久，为什么？（阿里）

22、CSS合并方法

23、CSS不同选择器的权重(CSS层叠的规则)

24、列出你所知道可以改变页面布局的属性

25、CSS在性能优化方面的实践

26、CSS3动画（简单动画的实现，如旋转等）

27、base64的原理及优缺点

28、几种常见的CSS布局

流体布局

.left {
        float: left;
        width: 100px;
        height: 200px;
        background: red;
    }
    .right {
        float: right;
        width: 200px;
        height: 200px;
        background: blue;
    }
    .main {
        margin-left: 120px;
        margin-right: 220px;
        height: 200px;
        background: green;
    }

<div class="container">
    <div class="left"></div>
    <div class="right"></div>
    <div class="main"></div>
</div>

圣杯布局

.container {
            margin-left: 120px;
            margin-right: 220px;
        }
        .main {
            float: left;
            width: 100%;
            height:300px;
            background: green;
        }
        .left {
            position: relative;
            left: -120px;
            float: left;
            height: 300px;
            width: 100px;
            margin-left: -100%;
            background: red;
        }
        .right {
            position: relative;
            right: -220px;
            float: right;
            height: 300px;
            width: 200px;
            margin-left: -200px;
            background: blue;
        }

<div class="container">
    <div class="main"></div>
    <div class="left"></div>
    <div class="right"></div>
</div>

双飞翼布局

 .content {
            float: left;
            width: 100%;
        }
        .main {
            height: 200px;
            margin-left: 110px;
            margin-right: 220px;
            background: green;
        }
        .main::after {
            content: '';
            display: block;
            font-size:0;
            height: 0;
            zoom: 1;
            clear: both;
        }
        .left {
            float:left;
            height: 200px;
            width: 100px;
            margin-left: -100%;
            background: red;
        }
        .right {
            float: right;
            height: 200px;
            width: 200px;
            margin-left: -200px;
            background: blue;
        }

<div class="content">
    <div class="main"></div>
</div>
<div class="left"></div>
<div class="right"></div>

29、stylus/sass/less区别

30、postcss的作用

$JavaScript

1、闭包

说说你对闭包的理解

使用闭包的注意点

2、说说你对作用域链的理解

3、JavaScript原型，原型链 ? 有什么特点？

4、请解释什么是事件代理

5、Javascript如何实现继承？

 function Parent(){
        this.name = 'wang';
    }

    function Child(){
        this.age = 28;
    }
    Child.prototype = new Parent();//继承了Parent，通过原型

    var demo = new Child();
    alert(demo.age);
    alert(demo.name);//得到被继承的属性
  }

6、谈谈This对象的理解

7、事件模型

W3C中定义事件的发生经历三个阶段：捕获阶段（capturing）、目标阶段（targetin）、冒泡阶段（bubbling）

8、new操作符具体干了什么呢?

9、Ajax原理

 // 1. 创建连接
    var xhr = null;
    xhr = new XMLHttpRequest()
    // 2. 连接服务器
    xhr.open('get', url, true)
    // 3. 发送请求
    xhr.send(null);
    // 4. 接受请求
    xhr.onreadystatechange = function(){
        if(xhr.readyState == 4){
            if(xhr.status == 200){
                success(xhr.responseText);
            } else { // fail
                fail && fail(xhr.status);
            }
        }
    }

ajax 有那些优缺点?

10、如何解决跨域问题?

11、模块化开发怎么做？

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

12、异步加载JS的方式有哪些？

13、那些操作会造成内存泄漏？

14、XML和JSON的区别？

15、谈谈你对webpack的看法

16、说说你对AMD和Commonjs的理解

17、常见web安全及防护原理

XSS原理及防范

XSS防范方法

XSS与CSRF有什么区别吗？

CSRF的防御

18、用过哪些设计模式？

19、为什么要有同源限制？

20、offsetWidth/offsetHeight,clientWidth/clientHeight与scrollWidth/scrollHeight的区别

21、javascript有哪些方法定义对象

22、常见兼容性问题？

body,ul,li,ol,dl,dt,dd,form,input,h1,h2,h3,h4,h5,h6,p{
margin:0;
padding:0;
}

22、说说你对promise的了解

Promise 的构造函数

var promise = new Promise(function(resolve, reject) {

        if (...) {  // succeed

            resolve(result);

        } else {   // fails

            reject(Error(errMessage));

        }
    });

promise.then(onFulfilled, onRejected)

23、你觉得jQuery源码有哪些写的好的地方

24、vue、react、angular

25、Node的应用场景

26、谈谈你对AMD、CMD的理解

27、那些操作会造成内存泄漏？

28、web开发中会话跟踪的方法有哪些

29、介绍js的基本数据类型

30、介绍js有哪些内置对象？

31、说几条写JavaScript的基本规范？

32、JavaScript有几种类型的值？，你能画一下他们的内存图吗？

33、javascript创建对象的几种方式？

javascript创建对象简单的说,无非就是使用内置对象或各种自定义对象，当然还可以用JSON；但写法有很多种，也能混合使用

person={firstname:"Mark",lastname:"Yun",age:25,eyecolor:"black"};

 function Person(){}
    var person=new Person();//定义一个function，如果使用new"实例化",该function可以看作是一个Class
        person.name="Mark";
        person.age="25";
        person.work=function(){
        alert(person.name+" hello...");
    }
person.work();

function Pet(name,age,hobby){
       this.name=name;//this作用域：当前对象
       this.age=age;
       this.hobby=hobby;
       this.eat=function(){
          alert("我叫"+this.name+",我喜欢"+this.hobby+",是个程序员");
       }
    }
    var maidou =new Pet("麦兜",25,"coding");//实例化、创建对象
    maidou.eat();//调用eat方法

var wcDog =new Object();
     wcDog.name="旺财";
     wcDog.age=3;
     wcDog.work=function(){
       alert("我是"+wcDog.name+",汪汪汪......");
     }
     wcDog.work();

function Dog(){

     }
     Dog.prototype.name="旺财";
     Dog.prototype.eat=function(){
     alert(this.name+"是个吃货");
     }
     var wangcai =new Dog();
     wangcai.eat();


 function Car(name,price){
      this.name=name;
      this.price=price; 
    }
     Car.prototype.sell=function(){
       alert("我是"+this.name+"，我现在卖"+this.price+"万元");
      }
    var camry =new Car("凯美瑞",27);
    camry.sell();

34、eval是做什么的？

35、null，undefined 的区别？

36、["1", "2", "3"].map(parseInt) 答案是多少？

37、javascript 代码中的"use strict";是什么意思 ? 使用它区别是什么？

38、JSON 的了解？

var obj =eval('('+ str +')');
var obj = str.parseJSON();
var obj = JSON.parse(str);

var last=obj.toJSONString();
var last=JSON.stringify(obj);

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

40、同步和异步的区别?

41、渐进增强和优雅降级

42、defer和async

43、说说严格模式的限制

44、attribute和property的区别是什么？

45、谈谈你对ES6的理解

46、ECMAScript6 怎么写class么，为什么会出现class这种东西?

47、什么是面向对象编程及面向过程编程，它们的异同和优缺点

48、面向对象编程思想

49、对web标准、可用性、可访问性的理解

50、如何通过JS判断一个数组？

var arr = []; 
arr instanceof Array; // true

var arr = []; 
arr.constructor == Array; //true

Object.prototype.toString.call(value) == '[object Array]'
// 利用这个方法，可以写一个返回数据类型的方法
var isType = function (obj) {
     return Object.prototype.toString.call(obj).slice(8,-1); 
}

var a = new Array(123);
var b = new Date();
console.log(Array.isArray(a)); //true
console.log(Array.isArray(b)); //false

51、谈一谈let与var的区别？

52、map与forEach的区别？

53、谈一谈你理解的函数式编程？

54、谈一谈箭头函数与普通函数的区别？

55、谈一谈函数中this的指向吧？

graph LR
A-->B

56、异步编程的实现方式？

57、对原生Javascript了解程度

58、Js动画与CSS动画区别及相应实现

59、JS 数组和对象的遍历方式，以及几种方式的比较

通常我们会用循环的方式来遍历数组。但是循环是 导致js 性能问题的原因之一。一般我们会采用下几种方式来进行数组的遍历

60、gulp是什么？

61、说一下Vue的双向绑定数据的原理

$jQuery

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

 (function( window, undefined ) {

         //用一个函数域包起来，就是所谓的沙箱

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

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

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

        window.jQuery = window.$ = jQuery;

    })( window );

2、jQuery 的实现原理？

3、jQuery.fn 的 init 方法返回的 this 指的是什么对象？ 为什么要返回 this？

4、jQuery.extend 与 jQuery.fn.extend 的区别？

$.extend({
　　min: function(a, b) { return a < b ? a : b; },
　　max: function(a, b) { return a > b ? a : b; }
});
$.min(2,3); //  2
$.max(4,5); //  5

var settings = {validate:false, limit:5};
var options = {validate:true, name:"bar"};
$.extend(settings, options);  // 注意：不支持第一个参数传 false
// settings == {validate:true, limit:5, name:"bar"}


$.fn.extend({
   alertValue: function() {
      $(this).click(function(){
        alert($(this).val());
      });
   }
});

$("#email").alertValue();

5、jQuery 的属性拷贝(extend)的实现原理是什么，如何实现深拷贝？

6、jQuery 的队列是如何实现的？队列可以用在哪些地方？

var func1 = function(){alert('事件1');}
var func2 = function(){alert('事件2');}
var func3 = function(){alert('事件3');}
var func4 = function(){alert('事件4');}

// 入栈队列事件
$('#box').queue("queue1", func1);  // push func1 to queue1
$('#box').queue("queue1", func2);  // push func2 to queue1

// 替换队列事件
$('#box').queue("queue1", []);  // delete queue1 with empty array
$('#box').queue("queue1", [func3, func4]);  // replace queue1

// 获取队列事件（返回一个函数数组）
$('#box').queue("queue1");  // [func3(), func4()]

// 出栈队列事件并执行
$('#box').dequeue("queue1"); // return func3 and do func3
$('#box').dequeue("queue1"); // return func4 and do func4

// 清空整个队列
$('#box').clearQueue("queue1"); // delete queue1 with clearQueue

7、jQuery 中的 bind(), live(), delegate(), on()的区别？

8、是否知道自定义事件？ jQuery 里的 fire 函数是什么意思，什么时候用？

  document.createEvent(type); // 创建事件
  event.initEvent(eventType, canBubble, prevent); // 初始化事件
  target.addEventListener('dataavailable', handler, false); // 监听事件
  target.dispatchEvent(e);  // 触发事件

9、jQuery 通过哪个方法和 Sizzle 选择器结合的？

10、jQuery 中如何将数组转化为 JSON 字符串，然后再转化回来？

// 通过原生 JSON.stringify/JSON.parse 扩展 jQuery 实现
 $.array2json = function(array) {
    return JSON.stringify(array);
 }

 $.json2array = function(array) {
    // $.parseJSON(array); // 3.0 开始，已过时
    return JSON.parse(array);
 }

 // 调用
 var json = $.array2json(['a', 'b', 'c']);
 var array = $.json2array(json);

11、jQuery 一个对象可以同时绑定多个事件，这是如何实现的？

  $("#btn").on("mouseover mouseout", func);

  $("#btn").on({
      mouseover: func1,
      mouseout: func2,
      click: func3
  });

12、针对 jQuery 的优化方法？

13、jQuery 的 slideUp 动画，当鼠标快速连续触发, 动画会滞后反复执行，该如何处理呢?

14、jQuery UI 如何自定义组件？

15、jQuery 与 jQuery UI、jQuery Mobile 区别？

16、jQuery 和 Zepto 的区别？ 各自的使用场景？

17、jQuery对象的特点

$编程题

1、写一个通用的事件侦听器函数

 // event(事件)工具集，来源：github.com/markyun
    markyun.Event = {
       
        // 视能力分别使用dom0||dom2||IE方式 来绑定事件
        // 参数： 操作的元素,事件名称 ,事件处理程序
        addEvent : function(element, type, handler) {
            if (element.addEventListener) {
                //事件类型、需要执行的函数、是否捕捉
                element.addEventListener(type, handler, false);
            } else if (element.attachEvent) {
                element.attachEvent('on' + type, function() {
                    handler.call(element);
                });
            } else {
                element['on' + type] = handler;
            }
        },
        // 移除事件
        removeEvent : function(element, type, handler) {
            if (element.removeEventListener) {
                element.removeEventListener(type, handler, false);
            } else if (element.datachEvent) {
                element.detachEvent('on' + type, handler);
            } else {
                element['on' + type] = null;
            }
        },
        // 阻止事件 (主要是事件冒泡，因为IE不支持事件捕获)
        stopPropagation : function(ev) {
            if (ev.stopPropagation) {
                ev.stopPropagation();
            } else {
                ev.cancelBubble = true;
            }
        },
        // 取消事件的默认行为
        preventDefault : function(event) {
            if (event.preventDefault) {
                event.preventDefault();
            } else {
                event.returnValue = false;
            }
        },
        // 获取事件目标
        getTarget : function(event) {
            return event.target || event.srcElement;
        }

2、如何判断一个对象是否为数组

function isArray(arg) {
    if (typeof arg === 'object') {
        return Object.prototype.toString.call(arg) === '[object Array]';
    }
    return false;
}

3、冒泡排序

var arr = [3, 1, 4, 6, 5, 7, 2];

function bubbleSort(arr) {
for (var i = 0; i < arr.length - 1; i++) {
    for(var j = 0; j < arr.length - 1; j++) {
        if(arr[j + 1] < arr[j]) {
            var temp;
            temp = arr[j];
            arr[j] = arr[j + 1];
            arr[j + 1] = temp;
        }
    }
}
return arr;
}

console.log(bubbleSort(arr));

4、快速排序

var arr = [3, 1, 4, 6, 5, 7, 2];

function quickSort(arr) {
    if(arr.length == 0) {
        return [];    // 返回空数组
    }

    var cIndex = Math.floor(arr.length / 2);
    var c = arr.splice(cIndex, 1);
    var l = [];
    var r = [];

    for (var i = 0; i < arr.length; i++) {
        if(arr[i] < c) {
            l.push(arr[i]);
        } else {
            r.push(arr[i]);
        }
    }

    return quickSort(l).concat(c, quickSort(r));
}

console.log(quickSort(arr));

5、编写一个方法 求一个字符串的字节长度

function GetBytes(str){

        var len = str.length;

        var bytes = len;

        for(var i=0; i<len; i++){

            if (str.charCodeAt(i) > 255) bytes++;

        }

        return bytes;

    }

alert(GetBytes("你好,as"));

6、bind的用法，以及如何实现bind的函数和需要注意的点

Function.prototype.bind = function(ctx) {
    var fn = this;
    return function() {
        fn.apply(ctx, arguments);
    };
};

$其他

1、谈谈你对重构的理解

2、什么样的前端代码是好的

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

4、你觉得前端工程的价值体现在哪

5、平时如何管理你的项目？

人事面

常问

上一篇 下一篇

猜你喜欢

热点阅读