前端面试问题总结

2024年5月29日 104次阅读来源: Winnie

HTML

html5的新特性

文件类型声明（<!DOCTYPE>）仅有一型：<!DOCTYPE HTML>。
新的解析顺序：不再基于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:

<!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元素常见类型

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:

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

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

清除浮动

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

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 标签在手机浏览器上控制布局
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1" />
- 通过快捷方式打开时全屏显示
<meta name="apple-mobile-web-app-capable" content="yes" />
- 隐藏状态栏
<meta name="apple-mobile-web-app-status-bar-style" content="blank" />
- iPhone会将看起来像电话号码的数字添加电话连接，应当关闭
<meta name="format-detection" content="telephone=no" />
使用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是相对于根元素的，需重置根元素字体大小：

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）

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清空或删除时，事件未清除导致的内存泄漏

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

jquery

$(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

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

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

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

返回斐波那契数列函数

输入大于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);
    }

    原文作者：Winnie
    原文地址: https://segmentfault.com/a/1190000006689664
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。

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架构

JavaScript

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

什么是内存泄漏

常见内存泄漏的原因

jquery

事件监听

原型链

字符串反转

跨域常用解决方案

事件委托

编程

查找URL中的参数

返回斐波那契数列函数

修改 this 指向

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

2.`clear:both;`