HTML

html5的新特性

文件类型声明（）仅有一型：。
新的解析顺序：不再基于SGML。
绘画 canvas;
用于媒介回放的 video 和 audio 元素;
语意化更好的内容元素:article、footer、header、nav、section;
表单控件:calendar、date、time、email、url、search;
input元素的新类型：date, email, url等。
新的技术:webworker, websocket, Geolocation;
新的属性：ping（用于a与area）, charset（用于meta）, async（用于script）。
全域属性：id, tabindex, repeat。
新的全域属性：contenteditable, contextmenu, draggable, dropzone, hidden, spellcheck。
新应用程序接口:
- HTML Geolocation
- HTML Drag and Drop
- HTML Local Storage
- HTML Application Cache
- HTML Web Workers
- HTML SSE
- HTML Canvas/WebGL
- HTML Audio/Video
移除的元素：
- 纯表现的元素：basefont，big，center，font, s，strike，tt，u;
- 对可用性产生负面影响的元素：frame，frameset，noframes；

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:

input元素常见类型

button
checkbox
file
hidden
image
password
radio
reset
submit
text

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属性

static：默认的属性值，按照标准流（包括浮动方式）进行布局。
relative:称为相对定位，使用相对的盒子的位置常以标准量的排版方式为基础，然后使盒子相对于它在原本的标准位置偏移指定的距离.相对定位仍在标准流中，它对父块和兄弟块盒子没有任何影响。
absolute:绝对定位，盒子的位置以它的包含框为基准进行偏移。绝对定位从标准流中脱离，并且以它最近的一个已经定位的祖先元素为基准进行定位。没有已经定位的祖先元素，则以浏览器窗口为基准进行定位。
inherit:规定从父元素继承 position 属性的值。
fixed:固定定位，与绝对定位类似，以浏览器窗口为基准进行定位，拖动浏览器窗口的滚动条时，位置保持不变。

fixed实例

HTML:

CSS:

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

diplay常用属性

block 像块类型元素一样显示。
none 缺省值。象行内元素类型一样显示。
inline-block 像行内元素一样显示，但其内容象块类型元素一样显示。
list-item 像块类型元素一样显示，并添加样式列表标记。
table 此元素会作为块级表格来显示
inherit 规定应该从父元素继承 display 属性的值

清除浮动

1.父级div定义 `overflow: auto;`

HTML:



    1
    2
    3

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选择器

id选择器（ # myid）
类选择器（.myclassname）
标签选择器（div, h1, p）
相邻选择器（h1 + p）
子选择器（ul > li）
后代选择器（li a）
通配符选择器（ * ）
属性选择器（a[rel = "external"]）
伪类选择器（a: hover, li:nth-child）

CSS3新增伪类：

p:first-of-type 选择属于其父元素的首个p元素的每个p元素。
p:last-of-type 选择属于其父元素的最后p元素的每个p元素。
p:only-of-type 选择属于其父元素唯一的p元素的每个p元素。
p:only-child 选择属于其父元素的唯一子元素的每个p元素。
p:nth-child(2) 选择属于其父元素的第二个子元素的每个p元素。
:enabled :disabled 控制表单控件的禁用状态。
:checked 单选框或复选框被选中。

响应式布局的原理

Meta标签定义
- 使用 viewport meta 标签在手机浏览器上控制布局
- 通过快捷方式打开时全屏显示

隐藏状态栏
iPhone会将看起来像电话号码的数字添加电话连接，应当关闭

使用Media Queries适配对应样式

常用于布局的CSS Media Queries有以下几种：
- 设备类型(media type):
  - all所有设备；
  - screen 电脑显示器；
  - print打印用纸或打印预览视图；
  - handheld便携设备；
  - tv电视机类型的设备；
  - speech语意和音频盒成器；
  - braille盲人用点字法触觉回馈设备；
  - embossed盲文打印机；
  - projection各种投影设备；
  - tty使用固定密度字母栅格的媒介，比如电传打字机和终端。
- 设备特性(media feature):
  - width浏览器宽度；
  - height浏览器高度；
  - device-width设备屏幕分辨率的宽度值；
  - device-height设备屏幕分辨率的高度值；
  - orientation浏览器窗口的方向纵向还是横向，当窗口的高度值大于等于宽度时该特性值为portrait，否则为landscape；
  - aspect-ratio比例值，浏览器的纵横比；
  - device-aspect-ratio比例值，屏幕的纵横比。
设置多种视图宽度

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

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

百分比布局

宽度不固定，可以使用百分比

#head{width:100%;}
#content{width:50%;}

响应式图片

#wrap img{
  max-width:100%;
  height:auto;

}

* 字体设置

一个响应式的字体应关联它的父容器的宽度，这样才能适应客户端屏幕。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的差别

relative
- 生成相对定位的元素，通过top,bottom,left,right的设置相对于其正常位置进行定位。可通过z-index进行层次分级。
- 定位为relative的元素脱离正常的文本流中，但其在文本流中的位置依然存在。
- relative定位的层总是相对于其最近的父元素，无论其父元素是何种定位方式。

absolute
- 生成绝对定位的元素，相对于static定位以外的第一个父元素进行定位。元素的位置通过"left","top","right"以及"bottom"属性进行规定。可通过z-index进行层次分级。
- 定位为absolute的层脱离正常文本流，但与relative的区别是其在正常流中的位置不在存在。
- 对于absolute定位的层总是相对于其最近的定义为absolute或relative的父层，而这个父层并不一定是其直接父层。如果其父层中都未定义absolute或relative，则其将相对body进行定位。

隐藏元素

overflow
opacity
visibility
display
postion
clip/clip-path
z-index

HTTP

状态码

1. 常见状态码

200 - 请求成功
301 - 资源（网页等）被永久转移到其它URL
404 - 请求的资源（网页等）不存在
500 - 内部服务器错误

2. 状态码分类

1** 信息，服务器收到请求，需要请求者继续执行操作
2** 成功，操作被成功接收并处理
3** 重定向，需要进一步的操作以完成请求
4** 客户端错误，请求包含语法错误或无法完成请求
5** 服务器错误，服务器在处理请求的过程中发生了错误

请求方式

GET：GET是http的默认请求方式，一般用来获取数据。
HEAD：HEAD方法与GET方法一样，都是向服务器发出指定资源的请求。但是，服务器在响应HEAD请求时不会回传资源的内容部分，即：响应主体。这样，我们可以不传输全部内容的情况下，就可以获取服务器的响应头信息。HEAD方法常被用于客户端查看服务器的性能。
POST：POST请求会向指定资源提交数据，请求服务器进行处理。如：表单提交、文件上传。
PUT：PUT请求会身向指定资源位置上传其最新内容，通过该方法客户端可以将指定资源的最新数据传送给服务器取代指定的资源的内容。
DELETE：DELETE请求用于请求服务器删除所请求URI所标识的资源。DELETE请求后指定资源会被删除。
TRACE：返回接受到的请求，用来查看数据经过中间服务器时发生了哪些变动。
OPTIONS：OPTIONS请求与HEAD类似，一般也是用于客户端查看服务器的性能。这个方法会请求服务器返回该资源所支持的所有HTTP请求方法，该方法会用'*'来代替资源名称，向服务器发送OPTIONS请求，可以测试服务器功能是否正常。JavaScript的XMLHttpRequest对象进行CORS跨域资源共享时，就是使用OPTIONS方法发送嗅探请求，以判断是否有对指定资源的访问权限。
CONNECT：要求使用SSL和TLS进行TCP通信。
PATCH：请求修改局部数据

RESTful架构

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

架构约束：

客户-服务器:通信只能由客户端单方面发起，表现为请求-响应的形式。
无状态:通信的会话状态（Session State）应该全部由客户端负责维护。
缓存:响应内容可以在通信链的某处被缓存，以改善网络效率。
统一接口:通信链的组件之间通过统一的接口相互通信，以提高交互的可见性。
分层系统:通过限制组件的行为（即，每个组件只能"看到"与其交互的紧邻层），将架构分解为若干等级的层。
按需代码:支持通过下载并执行一些代码（例如Java Applet、Flash或JavaScript），对客户端的功能进行扩展。

主要特征：

面向资源（Resource Oriented）
可寻址（Addressability）
连通性（Connectedness）
无状态（Statelessness）
统一接口（Uniform Interface）
超文本驱动（Hypertext Driven）

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 会自动垃圾收集，但是如果我们的代码写法不当，会让变量一直处于“进入环境”的状态，无法被回收。

常见内存泄漏的原因

全局变量引起的内存泄漏

function yyy(){
  yyy = 'xxxxxx';//yyy 成为一个全局变量，不会被回收
}

闭包引起的内存泄漏

  var yyy = (function(){
      var yyy = 'xxxxxx';// 被闭包所引用，不会被回收
      return function(){
          console.log(yyy);
      }
  })()

dom清空或删除时，事件未清除导致的内存泄漏

  
  
  $('#container').bind('click', function(){
      console.log('click');
  }).remove();
  //把事件清除了，即可从内存中移除
  
  
  $('#container').bind('click', function(){
      console.log('click');
  }).off('click').remove();

清空数组的常用方法

将数组 length 赋值为0
将数组赋值为[ ]
splice()删除数组元素arr.splice(0, arr.length);

引用变量和数值变量

基本类型值简单的数据段，保存在栈内存中；typeof检测。
引用类型值可能有多个值构成的对象，保存在堆内存中；instanceof检测。

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

按值访问相当于是将原数据的值进行一次拷贝，给新的变量，原变量发生改变后，按值访问的不会变化。一般是string，number这样的基本类型。
```
var a = 1;
var b = a;
alert(a+";"+b);//1;1
a = 2;
alert(a+";"+b);//2;1  b不会发生改变，因为是按值访问
```
按引用是指在内存区内只有一份，新的变量只是拥有一个指向它的指针，一旦内存区内的内容发生变化，所有指向它的引用都将发生变化，一般是对象，包括用户自定义对象和内置对象，Array和Function。
```
var a = {name: "Zoe"};
var b = a;
console.log(a.name);//Zoe
console.log(b.name);//Zoe

a.name = "Alex"; 
console.log(a.name);//Alex
console.log(b.name);//Alex 按引用访问,指针指向的区域已经被更改
```

bind,call,apply的用法

Function.prototype.call()和Function.prototype.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]);

Function.prototype.bind()

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的区别

执行时间不同
window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。
$(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕。
编写个数不同

window.onload不能同时编写多个，如果有多个window.onload方法，只会执行一个
$(document).ready()可以同时编写多个，并且都可以得到执行
简化写法

window.onload没有简化写法
$(document).ready(function(){})可以简写成$(function(){});

事件监听

element.addEventListener(type, listener[, useCapture]); // IE6~8不支持
element.attachEvent('on' + type, listener); // IE6~10，IE11不支持
element['on' + type] = function(){} // 所有浏览器

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

跨域常用解决方案

JSONP
CORS 通过设置响应头的 Access-Control-Allow-Origin
window.name
window.postMessage() HTML5新特性
location.hash
document.domain

事件委托

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

HTML

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中的参数

指定参数名称，返回该参数的值或者空字符串
不指定参数名称，返回全部的参数对象或者{}
如果存在多个同名参数，则返回数组

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

前端面试问题总结

HTML

html5的新特性

Web Worker

input元素常见类型

CSS

盒模型

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

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

position属性

diplay常用属性

清除浮动

1.父级div定义 overflow: auto;

2.clear:both;

3.after 方法

CSS选择器

响应式布局的原理

absolute和relative的差别

隐藏元素

HTTP

状态码

1. 常见状态码

2. 状态码分类

请求方式

RESTful架构

WebSocket原理

JavaScript

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

原生ajax

什么是内存泄漏

常见内存泄漏的原因

清空数组的常用方法

引用变量和数值变量

bind,call,apply的用法

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

事件监听

原型链

字符串反转

跨域常用解决方案

事件委托

编程

查找URL中的参数

斐波那契数列

返回斐波那契数列函数

修改 this 指向

实现函数add

快速排序

你可能感兴趣的:(前端面试问题总结)

1.父级div定义 `overflow: auto;`

2.`clear:both;`