面试知识点总结

最近面试几家前端职位，想知道目前的前端面试题是偏向哪一块，都主要问到的是ES6语法，闭包，原型链，继承那一块。并且将面试题的知识点汇总一下。有助于下次面试。

1.HTML

HTML5新特性，语义化

HTML5新增了许多标签<header>,<main>,<footer>,<nav><section>,<article>,<aside>,还用了<canvas>绘图,<video>视频,<audio>音频.本地储存localstorage,sessionstorage,定位,离线缓存等。
HTML5新特性
优点：

SEO(搜索引擎优化);结构更加清晰，方便维护.

浏览器的标准模式和怪异模式

在W3C还没有制定出标准之前,不同的浏览器有属于自己一套标准.不同浏览器会根据自己的规则渲染页面.那么渲染出来的页面就不同,为怪异模式。那么W3C制定出一系列标准规则之后。浏览器按这套规则渲染页面那就是标准模式

xhtml和html的区别

1.xhtml里面的标签必须闭合。
2.xhtml里面的标签必须小写。
3.xhtml里面必须嵌套元素是正确的。

使用data-的好处

1.自定义属性可以统一化。
2.以后维护更加的方便,页面结构清晰
3.element.dataset.获取信息 <element data-*="somevalue">

<div data-main="main"></div>
var main = document.querySeletor(‘div‘);
console.log(div.dataset.main); //main

meta标签

meta标签一般表述当前文档的属性.例如作者关键字等等信息。
详细了解参考 https://www.cnblogs.com/reaf/...

canvas

canvas是一个HTML5提供的绘图API,通过getContent()方法获取画笔才可绘图。与svg的最大差别是svg使用一个 XML 文档来描述绘图.

HTML废弃的标签

IE6 bug，和一些定位写法

1.双边距bug：当元素使用float过后，使用margin都会有两倍边距，需要明确其元素类型来解决边距问题. display:inline或display:block;
2.相对父容器绝对定位bug
ie6很多bug可以通过触发layout来解决。无论设置zoom:1或者设置宽高都能触发。
参考链接
IE6中的常见BUG
IE6相对父容器绝对定位的bug及其解决办法

css js放置位置和原因

一般来说css和js都是通过外部引入的。这样方便维护管理。
由于浏览器的加载顺序,css放在head标签中,js会阻塞html加载。我建议页面效果显示的js放在body之前，交互，事件的js可以放在后面。

什么是渐进式渲染

浏览器的渲染：过程与原理
 What is progressive rendering?

html模板语言

一般平常的数据渲染,需要用字符串与数据一个个拼接而成,但后期维护很麻烦。于是有了html模板。不同的html模板可以写法也不同。es6有一种是叫模板字符串数据通过#{}并接而成.

meta viewport

meta介绍参考
 常用的meta

2 CSS

CSS3新特性，伪类，伪元素

css3增加了很多新的特性,但兼容的话一般在IE9+,例如box-sizing,CSS选择器,背景background-size,边框阴影,圆角等等.
伪类一个冒号: 伪元素两个冒号:: 权重级别不一样
:first-child :hover :active
::before ::after 兼容性不好
伪类伪元素
一般用于真正的内容用伪类,但伪元素用于比如图标之类的没有什么实质的内容。
伪类与伪元素差别

CSS实现隐藏页面的方式

display:none元素隐藏.页面宽高不显示.不占页面位置.
opactiy: 0 只是将透明度设置为0,但占页面位置.
visibilty: hidden 也是隐藏元素

link和@import引入css的区别

link标签引用在head标签里面,@import 引用于在CSS样式表中。
加载顺序问题.link是在页面加载的时候可以同时加载CSS ,@import需要在加载页面内容之后才加载
link兼容性比@import好些。

flexbox弹性盒子

一般使用于移动端和高级浏览器.运用了弹性布局那么float,clear,vertical-align都会失效。
有分主轴和交叉轴。

实现两栏布局有哪些方法？

1.float方法实现
2.flex布局实现

CSS优先级

一般以引用的样式来说内联样式 > 内部样式 > 外部样式（就近原则）

权重级别
important 最高级
行内 +1000
id +100
属性选择器,类,伪类 +10
元素,伪元素 +1
通用符* 0
CSS权重

3.JS

js的基本类型有哪些？引用类型有哪些？null和undefined的区别?string包装对象和基本类型区别

基本类型: null,undefined,number,string,boolean
引用类型: object => function,(number,string,boolean)包装对象,Date等等。
基本类型属于栈
引用类型属于堆

null和undefined的区别
null是访问一个尚未存在的对象时所返回的值。转换成数值类型为 0
undefined是访问一个未初始化的变量时返回的值。转换数值类型为NaN.

包装对象与基本类型的区别
无法在基本类型上添加方法属性。
包装对象可以添加属性。
轻松理解JS基本包装对象

判断是否是Array类型
1.通过instanceof 判断原型对象是否指向Array构造对象
arr instanceof Array // true
2.对象的constructor属性
arr.constructor = Array // true

解释一下事件冒泡和事件捕获
一般一个事件触发时候会进行事件流，而事件流有两个阶段一个就是从外到里为捕获阶段，从里到外是冒泡阶段。

阻止冒泡方法

function stop(e){
    if(e.stopPropagation){
    e.stopPropagation();
    }else{
    e.cancelBubble = true;
    }
}

对闭包的理解？什么时候构成闭包？闭包的实现方法？闭包的优缺点
闭包是外部能访问内部变量的函数。一般来说内部定义的函数能访问到外部的变量。但外部无法访问内部函数里面定义的变量。

function a(){
var i = 0;
 function b(){
  console.log(i)
  return b;
 }
}

这样就形成了闭包，当外部定义个变量时候，接收a函数的返回值,执行这个函数就能获取到这个变量。
优点解决外部无法获取内部函数的值
缺点闭包会使得这个变量一直占据内存中。

this有哪些使用场景

this 指向用于三种场景
1.在构造函数中方法使用this，这this指向实例。
2.事件中使用this,这this指向对应的dom元素
3.全局方法使用this。会执行window.如果是node环境下。指向global

call，apply，bind

call，apply 都是改变函数执行上下文。
call与apply就一个区别就是传入参数的问题。call是一个个传入，apply是以数组的形式传入。
而bind是返回一个函数副本。他不会执行函数。需要自己手动执行函数。
聊一聊call、apply、bind的区别

显示原型和隐式原型，手绘原型链，原型链是什么？为什么要有原型链
 http://www.cnblogs.com/wangfu...

创建对象的多种方式

1.直接用字面量创建

var obj = {}

2.构造函数创建

function obj(){}
var obj1 = new obj;

3.直接通过new object()创建
4.工厂函数创建

JS创建对象几种不同方法详解

变量提升

在Javascript中，变量声明和函数声明会最先执行。
函数声明大于变量声明
例如

function a(){}
var a;
console.log(a) // function a(){}

函数声明

function a(){}

函数表达式

var a = function(){} 等同于 var a = 1;

宿主对象和原生对象（内部对象）的区别
宿主对象是浏览器提供的对象 BOM如Window和Document等 DOM对象
原生对象（内部对象）是指JS内置的对象 String Number Boolean Date
还有自己定义的对象自定义对象。

document load和document DOMContentLoaded两个事件的区别

document DOMContentLoaded是DOM加载完毕会执行这个函数等同于JQ中的$(function(){})
document load 是JS加载完成才执行这个函数

typeof能够得到哪些值

"number"、"string"、"boolean"、"object"、"function" 和 "undefined"
注意 typeof null , array,{} 都检测出object

什么是“use strict”,好处和坏处

好处: 1.使得JS语法更加规范化。目前的ES6是严格模式。2.能早点发现代码的错误问题，提高代码的安全性。
坏处: 一般网站都会将JS代码进行压缩，但是有些JS代码有严格模式，而有些代码没有严格模式。当他们合并在一起，会浪费字节。

函数作用域是什么？js 的作用域有几种？

函数作用域是函数里面有作用域，比如在函数体中定义个变量，在外部访问不到这个变量的。
JS作用域中有三种。全局作用域，函数作用域，块级作用域。es6语法才支持块级作用域。

弄懂JavaScript的作用域和闭包

数组常用API 字符串api

Array
增： arr.push() arr.unshift()
删： arr.pop() arr.shift()
改： arr.reverse() arr.sort() arr.concat() arr.join() arr.slice() arr.splice() arr.toString()
查： arr.indexOf() arr.lastIndexOf()
数组常用API

String
字符串常用API

浅拷贝和深拷贝

http://www.jb51.net/article/9...

编写一个通用的事件监听函数

https://blog.csdn.net/github_...

web端cookie的设置和获取

原生事件绑定（跨浏览器），dom0和dom2的区别？

dom0
ele.onclick = handler;ele.onclick=null;最古老的一种方式
优点：全浏览器兼容
缺点：同一事件只能绑定/解绑一个事件处理器

ele.add/removeEventListener(eventType, handler, catch);
和IE方式：ele.attach/detachEvent(‘on’+eventType, handler);
优点：支持绑定/解绑多个事件处理器
缺点：需要做兼容性判断。

JS原生事件处理（跨浏览器）

如何实现图片滚动懒加载

懒加载原理是图片还没到可视区域时先用一张很小的图片来当背景，如果滚动到可视区域时，再加载图片路径。
滚动加载图片（懒加载）实现原理

cookie获取设置删除

https://blog.csdn.net/qiqingj...

DOM事件的绑定的几种方式

三种绑定事件的方式
1.直接在DOM 上面绑定
2.通过脚本里面绑定
3.通过监听事件绑定
https://www.cnblogs.com/mylov...

js的设计模式知道哪些

工厂模式 Factory Pattern,
单例模式 Singleton Pattern,
模块模式,
发布订阅模式，
中介者模式 Mediator Pattern，
代理模式 Proxy Pattern

https://www.cnblogs.com/tugen...

4.ES6

谈一谈 promise

promise对象主要处理回调函数的对象。实例化一个promise对象之后有三种状态 pending: 初始状态，既不是成功，也不是失败状态。
fulfilled: 意味着操作成功完成，rejected: 意味着操作失败。
实例化promise对象有两个参数 resolve 和 reject 。

promise实例化生成之后可以通过then() 和catch()链式调用自定义方法。
参考网站

面试题

图片过多的时候如何优化

1.图标很多的时候可以用雪碧图
2.图片过大时候可以压缩一下。
3.小图标如果不用雪碧图可以考虑用base64编码
4.图片缓存

怎么将字符串中的字符用空格隔开

function aaa(str){
return str.split("").join(" ");
}
aaa(‘123‘); // 1 2 3

怎么获取checkbox的元素,用JS怎么写

document.getElementsByName("") 获取所有name属性的元素
其次还有document.getElementsByTagName() 获取标签元素
document.getElementById 获取ID
document.getElementsByClassName 获取类名

JS JQ 增删改查方法

JS
createElement //创建一个元素
createTextNode //创建一个文本节点

JQ
$("<div>123</div>")

添加，移除，插入
JS
insertBefore() // 被选元素的前面插入
appendChild() // 被选元素的后面插入
removeChild() // 删除

JQ
append() //被选元素插入内容
prepend()
remove()
insertAfter() //被选元素的前面插入
instetBefore()