前端面试面试合集前端面试

前端面试问题总结

2016-09-11  本文已影响446人  嘤嘤嘤666

HTML

html5的新特性

Web Worker

Web Worker的基本原理就是在当前javascript的主线程中，使用Worker类加载一个javascript文件来开辟一个新的线程，起到互不阻塞执行的效果，并且提供主线程和新线程之间数据交换的接口： postMessage和onmessage。

JS : worker.js


var math =function(n) {
   //肥肠复杂的数学计算
};
onmessage =function(evt) {
    var d = evt.data;
    postMessage(d);
};

HTML:

<!DOCTYPE HTML>
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 <script type="text/javascript">
//WEB页主线程
var worker =new Worker("worker.js");
//创建一个Worker对象并向它传递将在新线程中执行的脚本的URL
var data = ... //要计算的数据
 worker.postMessage(data);
//向worker发送数据
 worker.onmessage =function(evt){
//接收worker传过来的数据函数
   console.log(evt.data);
//输出worker发送来的数据
 }
 </script>
 </head>
 <body></body>
</html>

input元素常见类型

CSS

盒模型

IE 盒子模型、W3C 盒子模型；

区 别： IE的content部分把 border 和 padding计算了进去;

content-box:让元素维持W3C的标准盒模型。

布局所占宽度Width：

Width = width + padding-left + padding-right + border-left + border-right

布局所占高度Height:

Height = height + padding-top + padding-bottom + border-top + border-bottom

border-box：让元素维持IE传统盒模型（IE6以下版本和IE6~7的怪异模式）。

布局所占宽度Width：

Width = width(包含padding-left + padding-right + border-left + border-right)

布局所占高度Height:

Height = height(包含padding-top + padding-bottom + border-top + border-bottom)

position属性

fixed实例

HTML:

<body>
  <div id="a">
    <div id="c">
        <br>
        <br>
        <br>
    </div>
  </div>
</body>

CSS:

#a{
    height: 300px;
    width: 500px;
    background-color: #7c82ab;
  }
#c{
    width:500px;
    height:auto;
    background-color:#ccc;
    postion:fixed;
    bottom:0px;
}

diplay常用属性

清除浮动

1.父级div定义 overflow: auto;

HTML:


<div class="outer over-flow">
    <div class="div1">1</div>
    <div class="div2">2</div>
    <div class="div3">3</div>
</div>

CSS:


.over-flow{
    overflow: auto;
    zoom: 1; /*zoom: 1;for IE6/7 Maxthon2*/
}

2.clear:both; 

div{
    float:left;
    clear:both;
}

3.after 方法

.outer {
    zoom:1; /*zoom: 1;for IE6/7 Maxthon2*/
}
.outer :after {
    clear:both;
    content:".";
    display:block; /*for FF/chrome/opera/IE8*/
    width: 0;
    height: 0;
    visibility:hidden;
    }

CSS选择器

CSS3新增伪类：

响应式布局的原理

@media only screen and (min-width:768px)and(max-width:1024px){}

@media only screen and (width:320px)and (width:768px){}

}

* 字体设置

一个响应式的字体应关联它的父容器的宽度，这样才能适应客户端屏幕。css3引入了新的单位叫做rem,和em类似但对于Html元素，rem更方便使用。em是相对于根元素的，需重置根元素字体大小：

```css
html{font-size:100%;}
完成后，可以定义响应式字体：
@media (min-width:640px){body{font-size:1rem;}}
@media (min-width:960px){body{font-size:1.2rem;}}
@media (min-width:1200px){body{font-size:2rem;}}

absolute和relative的差别

隐藏元素

  1. overflow
  2. opacity
  3. visibility
  4. display
  5. postion
  6. clip/clip-path
  7. z-index

HTTP

状态码

1. 常见状态码

2. 状态码分类

请求方式

RESTful架构

REST是一种架构风格：无状态，以资源为中心，充分利用HTTP协议和URI协议，提供统一的接口定义，使得它作为一种设计Web服务的方法而变得流行。在某种意义上，通过强调URI和HTTP等早期Internet标准，REST是对大型应用程序服务器时代之前的Web方式的回归。

架构约束：

主要特征：

WebSocket原理

Websocket是应用层第七层上的一个应用层协议，它必须依赖 HTTP 协议进行一次握手 ，握手成功后，数据就直接从 TCP 通道传输，与 HTTP 无关了。

Websocket的数据传输是frame形式传输的，比如会将一条消息分为几个frame，按照先后顺序传输出去。这样做会有几个好处：

1 大数据的传输可以分片传输，不用考虑到数据大小导致的长度标志位不足够的情况。

2 和http的chunk一样，可以边生成数据边传递消息，即提高传输效率。

JavaScript

多人合作的项目中如何解决命名空间冲突

  var ValidateUtil = {
    type1 : function(){};
    type2: function(){};
  };

原生ajax

  //1. 创建ajax对象
  var xhr = null;
  if(window.XMLHttpRequest){
      xhr = new XMLHttpRequest();
  } else {
      //为了兼容IE6
      xhr = new ActiveXObject('Microsoft.XMLHTTP');
  }

  //2. 连接服务器open(方法GET/POST，请求地址， 异步传输)
  xhr.open('GET',  'data.txt',  true);

  //3. 发送请求
  xhr.send();

  //4.处理返回数据
  /*
  ** 每当readyState改变时，就会触发onreadystatechange事件
  ** readyState属性存储有XMLHttpRequest的状态信息
  ** 0 ：请求未初始化
  ** 1 ：服务器连接已建立
  ** 2 ：请求已接受
  ** 3 : 请求处理中
  ** 4 ：请求已完成，且相应就绪
  */
  xhr.onreadystatechange = function(){
      if(xhr.readyState == 4){
          /*
          ** Http状态码
          ** 1xx ：信息展示
          ** 2xx ：成功
          ** 3xx ：重定向
          ** 4xx : 客户端错误
          ** 5xx ：服务器端错误
          */
          if(xhr.status == 200){
              success(xhr.responseText);
          } else {
              if(failed){
                  failed(xhr.status);
              }
          }
      }
  }

什么是内存泄漏

JavaScript中最常用的垃圾收集方式是标记清除(mark-and-sweep)。当变量进入环境（例如，在函数中声明一个变量）时，就将这个变量标记为“进入环境”。从逻辑上讲，永远不能释放进入环境的变量所占的内存，因为只要执行流进入相应的环境，就可能用到它们。而当变量离开环境时，这将其 标记为“离开环境”。
虽然JavaScript 会自动垃圾收集，但是如果我们的代码写法不当，会让变量一直处于“进入环境”的状态，无法被回收。

常见内存泄漏的原因

清空数组的常用方法

引用变量和数值变量

与其他语言不用，JavaScript不允许直接访问内存中的位置，也就是说不能直接操作对象的内存空间。在操作对象时，实际上是在操作对象的引用而不是实际的对象。也就是说包含引用类型值的变量实际上包含的并不是对象本身，而是一个指向该对象的指针。

bind,call,apply的用法

call()和apply()可以看作为某个对象的方法，通过调用方法的形式来间接调用函数。 它们的第一个参数是要调用函数的母对象，它是调用上下文，在函数体内通过this来获得对它的引用。 apply()方法和call()方法的作用相同，只不过函数传递的方式不一样，它的实参都放入在一个数组中。

    var n = {};
   
   function f(a, b) {
     return a + b;
   }
   
   f.call(n, 1, 2);        // 将函数f作为n的方法，实际上就是重新设置函数f的上下文
   f.apply(n, [1, 2]);

bind()是在ES5中新增的方法，从名字可以看出，这个方法的主要作用就是将函数绑定到某个对象。 当在函数f()上调用bind()方法并后窜入一个对象n作为参数，这个方法将返回一个新函数： （以函数调用的方式）调用新的函数将会把原始的函数f()作为n的方法来调用。例如：

```js
function f(y) {
  return this.x + y;
}

var a = {
  x: 1
};

var m = f.bind(a);  // 通过调用 g(x) 来调用 a.f(x)
m(2); // 3
```

实现bind()方法：

```js
// 返回一个函数，通过调用它来调用n中的方法f()，传递它所有的实参
function bind(f, n) {
  if (f.bind) return f.bind(n); // 如果bind()方法存在，使用bind()方法
  else return function () {
    return f.apply(n, arguments);
  }
}
```

$(document).ready() 与window.onload的区别

事件监听

DEMO:

function test() {
    console.log(1);
    }
element.addEventListener('click', test, false);
element.attachEvent('onclick', test);
element.onclick = test;

原型链

在JavaScript中，每个对象都有一个指向它的原型对象的内部链接。这个原型对象又有自己的原型，知道某个对象的原型为null为止，组成这条链的最后一环。这种一级一级的链结构就成为原型链。

ES6写法：

class a {
    constructor(name) {
    this.name = name;
    }
speak() {
    console.log(this.name + ' lalala');
    }
}
class aa extends a {
    speak() {
    console.log(this.name + ' hahaha');
     }
}

字符串反转

JS方法：

  var reverseString = function(string) {
     string = string.split('').reverse().join('');
     return string;
  };

CSS方法：

  p{
      direction: rtl;
      unicode-bidi: bidi-override;
  }

跨域常用解决方案

事件委托

对“事件处理程序过多” 问题的解决方案就是事件委托。事件委托利用了事件冒泡，只指定一个事件处理程序，就可以管理某一类的所有事件。例如，click事件会一直冒泡到document层次，所以我们可以为整个页面制定一个onclick事件处理程序，而不必给每个可单机的元素分别添加事件处理程序。

HTML

<ul id="myLinks">
  <li id="a"></li>
  <li id="b"></li>
  <li id="c"></li>
</ul>

JavaScript

  var list = document.getElementById("myLinks");

  EventUtil.addHandler(list, "click", function(event){
    event = EventUtil.getEvent(event);

    switch(target.id){
      case "a":
        console.log("1");
        break;

      case "b":
        console.log("2");
        break;

      case "c":
        console.log("3"):
        break;
    }
  });

编程

查找URL中的参数

  1. 指定参数名称，返回该参数的值或者空字符串
  2. 不指定参数名称，返回全部的参数对象或者{}
  3. 如果存在多个同名参数，则返回数组
function getUrlParam(sUrl,sKey){
    var result = {};
    sUrl.replace(/\??(\w+)=(\w+)&?/g,function(a,k,v){
        if(result[k] !== void 0){
            var t = result[k];
            result[k] = [].concat(t,v);
        }else{
            result[k] = v;
        }
    });
    if(sKey === void 0){
        return result;
    }else{
        return result[sKey] || '';
    }
}

斐波那契数列

用 JavaScript 实现斐波那契数列函数,返回第n个斐波那契数。 f(1) = 1, f(2) = 1 等

//递归
function fibonacci(n) {
    if(n<0){
        return -1;
    }else if(n < 2){
        return n;
    }else{
       return arguments.callee(n-1) +  arguments.callee(n-2);
    }
}

//非递归
function getNthFibonacci(count) {
    if(count<0) return 0;
    if(count<=1) return 1;
    var first = 1;
    var second = 1;
    var third = 0;
    for(var i = 2; i <= count; i++) {
        third = first + second;
        first = second;
        second = third;
    }
    return third;
}

返回斐波那契数列函数

输入大于0的整数n返回长度为n的斐波那契数列。

function fibonacci(n) {
  var result = [1,1];
    if(n <= 0){
        return -1;
    }else if(n == 1){
      result.pop(1);
    }else {
       for(var i = 2; i < n; i++){
         result.push(result[i-1] + result[i-2]);
       }
    }
    return result;
}

修改 this 指向

题目描述

封装函数 f，使 f 的 this 指向指定的对象
输入例子:

bindThis(function(a, b){return this.test + a + b}, {test: 1})(2, 3)

输出例子:

6

function bindThis(f, oTarget) {
    return f.bind(oTarget);
}

实现函数add

\* add(2,3);//5
   add(2)(3);//5
*\
function add(a) {
    if(arguments.length > 1){
    return arguments[0] + arguments[1];
}else {
    return (function (b){return a + b});
}

add(2,3);//5
add(2)(3);//5

快速排序

var quickSort = function(arr) {
　　if (arr.length <= 1) { return arr; }
　　var pivotIndex = Math.floor(arr.length / 2);
　　var pivot = arr.splice(pivotIndex, 1)[0];
　　var left = [];
　　var right = [];
　　for (var i = 0; i < arr.length; i++){
　　　　if (arr[i] < pivot) {
　　　　　　left.push(arr[i]);
　　　　} else {
　　　　　　right.push(arr[i]);
　　　　}
　　}
　　return quickSort(left).concat([pivot], quickSort(right));
};
上一篇 下一篇

猜你喜欢

热点阅读