虽然个人认为有些知识不是必须记忆的，需要的时候可以查阅笔记，但是对于得到面试的机会还是很重要的。
HTML&CSS
1、清除浮动的几种方式，各自的优缺点
清除浮动：使父元素围住浮动的子元素，避免对后续元素造成影响。
（1）给父元素设置overflow:hidden;或float:left;或position:absolute;或position:relative;。触发块级格式化上下文（BFC），从正常文档流脱离，父元素本身实现独立布局，围住其中的浮动元素。但专门这样设置，可能会改变布局，对于后三者，使block变为inline-block，父元素宽度变化。
适用于父元素也需要浮动。
（2）在子元素后面添加空的block元素，并设置其样式为clear:both。添加了额外的元素，且block元素带有margin等。
（3）在父元素上加clearfix类名，在父元素的最后加块级元素.（伪元素选择器），通过clear:both使父元素括住浮动的元素来清除float的影响，使.不可见。常用这种方式，Bootstrap支持clearfix类名。
通常推荐这种方式。
<style>
.clearfix::after{content:".";display:block;clear:both;height:0;visibility:hidden;}
.clearfix{zoom:1;} /*IE低版本不支持after*/
div{background-color:red;}
#p1{float:left;background-color:yellow;}
#p2{float:right;background-color:green;}
</style>
<div class="clearfix">
<p id="p1">p1</p>
<p id="p2">p2</p>
<!-- <p style="clear:both"></p> 添加空的p元素，使div可以围住p1p2，不推荐-->
</div>
2、块级元素水平垂直居中的方法
<style>
.parent{background:#ddd;height:200px;width:300px;}
.child{background:#666;color:#fff;font:30px/2 'microsoft yahei';}
</style>
<div class="parent">
<div class="child">DEMO</div>
</div>
父元素和子元素的大小不确定。
（1）table-cell+inline-block
兼容IE6,7需要把结构换为<table>，通过display:inline; zoom:1;模拟inline-block。
.parent{display:table-cell; text-align:center; vertical-align:middle;}
.child{display:inline-block;}
（2） relative+absolute+transform
绝对定位脱离文档流，不会对其它元素产生影响。transform是CSS3新增内容，对IE6,7,8可能没法兼容，在高版本浏览器需要加前缀。
.parent{position:relative;}
.child{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);}
（3）flex
IE6,7,8可能没法兼容flex。
.parent{display:flex; justify-content:center; align-items:center;}
如果子元素大小确定。
.parent{position:relative;}
.child{
width:100px; height:100px;
position:absolute; top:0; right:0; bottom:0; left:0; margin:auto;
}
3、CSS选择器有哪些？优先级如何计算
（1）普通选择器：通配符选择器*、标签选择器、id选择器#、类选择器.、属性选择器[]、伪类选择器:
（2）伪元素选择器::
（3）组合选择器：后代选择器 、子选择器、兄弟选择器+、只要前面有某种元素~
优先级：将权重相加。a=行内样式style，1000；b=id选择器，100；c=类、伪类和属性选择器，10；d=标签选择器和伪元素选择器，1。相同属性优先级高覆盖低、后面覆盖前面，不同属性合并。
超链元素伪类的设置顺序:link :visited :hover :active
4、px、em和rem的区别
px，像素，相对于显示器屏幕分辨率而言；
em，相对长度单位，相对于当前对象内文本的字体大小，若字体大小未显式设置，则相对于浏览器默认的字体大小；
rem，相对长度单位，相对于html根元素的字体大小。
5、display:none和visibility:hidden的区别
display:none设置元素不显示，是彻底消失，不在文档流中占位，浏览器也不会解析该元素。visibility:hidden是视觉上消失，可理解为透明度为0的效果，在文档流中占位，浏览器会解析该元素。
使用visibility:hidden比display:none性能上要好。display:none切换显示时，页面产生回流reflow（页面中的部分元素需要改变规模尺寸、布局、显示隐藏等，页面重新构建）。而visibility:hidden切换是否显示时则不会引起回流，只是元素的外观被改变，且在没有改变布局的情况下发生。
6、用一个div写出三条横线的小图标![]()
div{
height:5px;
width:30px;
background-color:#DD575C;
background-clip:content-box;
padding-top:5px;
padding-bottom:5px;
border-top:#DD575C solid 5px;
border-bottom:#DD575C solid 5px;
}
7、用一个div实现倒三角![]()
div{
width:0;
border-top:10px solid #DD575C;
border-left:5.77px solid transparent;
border-right:5.77px solid transparent;
}
其它方法仅供参考。ASCII码31是倒三角。
/* 正方形旋转加截取 */
.parentDiv {
height:50px;
overflow:hidden;
}
.triangleDiv {
position: relative;
height:70.7px;
width:70.7px;
top:-35.4px;
left:19.6px;
background-color:#DD575C;
transform:rotate(45deg);
}
8、盒模型
在网页中，一个元素占有空间的大小由几个部分构成，其中包括元素的内容（content）、内边距（padding）、边框（border），外边距（margin）四个部分。
标准盒子模型 ＝ margin + border + padding + content （content = width | height）
IE盒子模型 ＝ margin + content （content = border + padding + width | height）
box-sizing:content-box|border-box 切换标准模型和IE模型
9、position的absolute和fixed的共同点与不同点
共同点：脱离文档流，文档流中没有它的空间，未设置偏移时在原位置。默认宽度为内容宽度。
absolute：绝对定位。参照物为第一个定位元素（非static）/根元素html（与浏览器窗口同等大小的首屏区域）。元素随页面的滚动而滚动。
fixed：固定定位。参照物是视窗。不随页面的滚动而滚动。
10、sprite精灵图
把设计稿上的小图标拼合到同一张图片中，减少网络请求，提升网页加载速度。
①排列常用横向排列和纵向排列。 ②图片之间必须保留孔隙，小图标20像素。如果更改按钮大小，CSS里背景图位置属性不须改变；容错，如果CSS设置错误，不会导致下面图片露出来。③合并原则：同属于一个模块、大小相近、色彩相近。只本页用到的图片合并、集中使用，有状态的图标合并。④IE6不支持PNG24半透明，存两份：高级浏览器PNG24 sprite.png、IE6 PNG-8 sprite_ie.png。
background-image:url("/images/x.png");
background-repeat:no-repeat;
background-position:20px 60px;
background-size:10px 10px;
11、HTML5
表现页面中的章节结构：<header><footer><nav><aside><article><section>
嵌入资源：<video><audio><canvas><svg>
新的<input>类型：email、url、number、tel、search、range、color、date
新的表单元素（datalist、keygen、output）和属性
getCurrentPosition()、web存储（localStorage、sessionStorage）、拖放
12、CSS3
选择器：属性选择器、伪类选择器
盒模型：box-shadow、box-sizing
边框：border-radius、border-image
背景：background-image、background-size、background-origin、background-clip、渐变
文字特效：text-shadow、text-overflow、word-wrap、word-break、字体@font-face
2D/3D转换：transform、transform-origin、transform-style、perspective、perspective-origin、backface-visibility
过渡和动画：transition、animation、@keyframes
多列布局：column-count、column-width、column-fill、column-gap、column-rule、column-span
用户界面：resize、outline-offset
弹性盒子：flex
13、<img>的alt和title
alt：描述图片含义。地址写错或网络状况不好，无法查看图像时，显示该说明。可用于屏幕阅读软件和搜索引擎。
title：光标悬浮在图像上时以提示的方式显示该特性内容。
14、href和src的区别
href标识超文本引用，在当前元素和引用资源之间建立联系。<link><a>。当浏览器解析到css文件时会下载，但不会停止对当前文档的处理。
src引用资源，指向外部资源的位置，将外部资源下载并替换当前元素。用在<img><script><iframe>。当浏览器解析到含src的标签时，会暂停其它资源的下载和处理，直至将该资源加载、编译、执行完毕，将该元素所指向的资源嵌套至当前标签内。
15、盒子内阴影和外阴影
box-shadow: inset? 水平偏移 垂直偏移 模糊半径? 阴影大小? 颜色?（？表示可选；水平、垂直偏移可正可负；颜色默认为文字颜色；这些参数可有多组，用,隔开）
外阴影box-shadow:3px 3px 5px 2px; 内阴影box-shadow:inset 0 0 5px red;
16、块级格式化上下文（BFC）
块级格式化上下文（BFC，Block formatting context），是一个独立的渲染区域，是布局过程中生成块级盒子的区域，也是浮动元素与其他元素的交互限定区域。下列方式会创建块级格式化上下文：
根元素
浮动元素，即float不为none
绝对定位元素，即position为absolute或fixed
display为inline-block, table-cell, table-caption, flex, inline-flex
overflow不为visible（hidden, scroll, auto）
17、input输入类型并简述其用途
text：默认，单行文本框，默认宽度为20字符。
radio：单选按钮。
checkbox：复选框。
file：输入字段和“浏览”按钮，供文件上传。
button：可点击按钮。
reset：重置按钮。
submit：提交按钮。
image：图像形式的提交按钮。
password：密码字段，该字段中字符被掩码。
hidden：隐藏的输入字段。
email：email地址。
tel：电话号码。
url：url地址。
number：数值。
range：滑动条，包含一定范围内的数值。
color：选择颜色。
Date pickers(date, month, week, time, datetime, datetime-local)。
search：搜索字段。
18、Cookie、sessionStorage和localStorage的区别
Cookie是客户端的会话跟踪技术，用来记录信息确定用户身份。通过document.cookie可以获取或设置Cookie值。
Cookie由”; ”隔开的键值对构成，作用是将网页中的数据保存到浏览器中。Cookie必须从服务器访问，直接打开html文件则设置Cookie无效。
Cookie有个数（20~50）和大小（4KB左右）的限制。默认情况下，Cookie的生命周期是一次会话，如果通过expires设置了过期时间，过期立即删除保存的数据。Cookie由每个对服务器的请求来传递，使得Cookie速度很慢且效率也不高。安全性问题，明文传递。
WebStorage克服了Cookie的一些限制，有两种API：localStorage（本地存储，没有时间限制）和sessionStorage（会话存储，在浏览器关闭后消失）。通过setItem(key, value)、getItem(key)、removeItem(key)、clear()操作数据。要访问同一个WebStorage对象，页面必须来自同一个域名（子域名无效），使用同一种协议，在同一个端口上。
WebStorage只能存储字符串类型，可使用JSON对象的stringify和parse来处理。保存在客户端，不与服务器进行交互通信。
WebStorage存储大小一般是5MB。不会传送到服务器，存储在本地的数据可以直接获取，节省了网络流量，且速度更快。安全性相对Cookie较高。
19、响应式设计的基本技巧和好处
响应式设计以媒体查询为基础，通过统一的设计和代码实现让一套Web系统能适配所有可能的终端。不必去为不同设备定制不同的网站，开发成本降低；资源冗余，即有些信息被加载，但是不显示。
（1）布局技巧及meta标签
丢弃：无关紧要的div、内联元素（inline）、少用js或flash、没用的绝对定位和浮动样式、不使用100%设置。
使用：HTML5 Doctype和相关指南、重置样式reset.css、一个简单的有语义的核心布局、给重要的网页元素使用简单的技巧（如导航菜单）。
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="HandheldFriendly" content="true">
（2）媒体查询Medial Queries：根据屏幕大小展示适配的样式。
（3）字体设置：单位使用rem，相对于根元素的字体大小。
（4）宽度：使用百分比且box-sizing:border-box;，或flex布局。
（5）图片：将图片的最大宽度设置为100%，背景图片大小设置为contain。根据不同屏幕展示不同大小的图片，将图片地址保存至data-属性中。使用精灵图
img{max-width:100%;height:auto;}
a{
background-image:url('logo.png');
background-repeat:no-repeat;
background-size:contain;
}
20、优雅降级和渐进增强
优雅降级（graceful degradation）：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。
从复杂的现状开始，试图减少用户体验的供给。
渐进增强（progressive enhancement）：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进，追加功能达到更好的用户体验。
从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。
21、label、单选框、单选按钮的应用场景
在scss中，使用@mixin命令
@mixin left{float:left;margin-left:10px;} 如何调用@mixin
Javascript
1、var变量声明
变量声明语句会被“提前”至脚本或函数的顶部，但初始化的操作还在原来var语句的位置执行，在声明语句之前变量的值是undefined。
<script>
var a=100;
function test(){
alert(a); // undefined
var a=10;
alert(a); // 10
}
test();
</script>
(function() {
var a=b=5;
})();
console.log(b); // 5
console.log(a); // Uncaught ReferenceError: a is not defined
2、操作符
使用加法操作符+时，如果其中一个操作数是字符串，则把另一个操作数也转换为字符串，并将两字符串拼接。
var foo=10+'20'; // '1020'
x||y如果x表达式运行结果转换为Boolean值为false，则返回表达式y的运行结果
(window.foo||(window.foo='bar'));
console.log(window.foo); // 'bar'
指针和赋值运算符的执行顺序
var foo={n:1};
var bar=foo; // {n: 1}
foo.x=foo={n:2};
foo.x // undefined
foo // {n: 2}
bar // {n: 1, x: {n: 2}}
3、==和===的区别
===判断左右两边对象或值是否类型相同且值相等。==判断操作符两边对象或值是否相等，类型不同时，使用Number()转换。例外规则，null==undefined，null/undefined进行==运算时不进行隐式类型转换。通常把值转为Boolean值，进行条件判断。
[1]==[1] false
var a="123";
var b="123";
var c="4";
var oa=new String("123");
var ob=new String("123"); var oc=oa; a===oa; //false，a为值类型，oa为对象类型 oa===ob; //false，不是同一个引用 oa===oc; //true，同一个引用 a===b; //true，值相等，且都是值类型 a===c; //false "99"==99; //true new String("99")==99; //true false=="0"; //true 0==null; //false "undefined"==undefined; //false
4、js各类型在转换为Boolean时的规则
5、数值
Number()函数，用于任何数据类型。对于字符串向数值型转换，数字、浮点数、十六进制数->十进制数，前导0被忽略；””->0；除此之外（包含非数字等）转换为NaN。
Number(undefined) // NaN
Number(null) // 0
Number(false) // 0
Number('11') // 11
Number('11.2') // 11.2
Number('011') // 11
Number('0x13') // 19
Number('11a') // NaN
parseInt()，忽略空格，找到第一个非空格字符，直到遇到无效字符。第二个参数为转换进制。前导0被忽略。
parseFloat()，前导0被忽略，只解析十进制。如果没有小数点或小数点后都是0则返回整数。
parseInt('10/01') // 10
parseInt('011') // 11
parseInt('x08') // NaN
parseInt('0x08') // 8
parseInt('11.12a') // 11
parseFloat('11.12a') // 11.12
4、字符串
字符串replace查找字符串替换成目标字符。
第一个参数是RegExp对象或字符串，第二个参数是字符串或函数。要想替换所有字符串，提供正则表达式，指定g标志，否则只替换第一个满足要求的字符串。
split(separator,howmany)方法，按分割符将字符串分割成字符串数组。
第一个参数分隔符是字符串或RegExp对象，第二个参数用于指定数组大小，返回数组不会超过既定大小。
"I have a cat".split("").reverse().join("-") // 't-a-c- -a- -e-v-a-h- -I'
5、正则表达式
\d：数字[0-9] \D：[^0-9]
\s：空白字符[\t\n\x0B\f\r] \S
\w：单词字符[a-zA-Z_0-9] \W
^ 以...开始 $ 以...结束
*：0到多
+：1到多
?：0或1
{n}：匹配确定的n次
{n,}：至少匹配n次
{n,m}：最少匹配n次且最多匹配m次
var reg=/^w+[^d]+$/;
console.log(reg.test('ww_32r')); // true
console.log(reg.test('123_dskr')); // false
console.log(reg.test('w7_d2')); // false
6、比较typeof和instanceof
（1）typeof运算符 typeof 变量名; //返回字符串 可以识别标准类型（Null除外），不能识别具体的对象类型（Function除外）。 （2）instanceof 变量名 instanceof 类型; 判别内置对象类型、自定义对象类型，不能判别标准类型。给定引用类型的实例则返回true，检测基本类型值返回false。
7、包装类类型识别
包装类Boolean、Number、String。所有基本包装类型的对象（new创建）都会被转换为布尔值true，typeof均得到object。
var strObj=new String('abc');
console.log(strObj instanceof String); // true
console.log(typeof strObj=='string'); // false
8、对象的深克隆
function deepClone(obj){}
9、数组
数组的sort()，默认按升序排列，返回排序后的数组。 sort()方法调用每个数组项的toString()方法，比较得到的字符串，即使是数值。sort()方法可以接收一个比较函数作为参数，指定排序方法。比较函数接收两个参数，如果第一个参数位于第二个参数之前则返回一个负数，两个参数相等则返回0，如果第一个参数应该位于第二个参数之后则返回一个正数。
colors.slice(1,4); 截取，取1-3，返回新数组 返回从起始位置到结束位置-1的项；只有一个参数，则至数组末尾；有负数，则与length相加；结束位置小于起始位置则返回空数组。 splice(start, deleteCount[, item1[, item2[, …]]])，从数组中删除或添加元素，并更改数组内容，返回一个数组，该数组包含从原始数组中删除的项。
var foo=[];foo[2]=1;foo.push(2);alert(foo.length); // 4
10、数组去重并排序，打印重复字符及次数
10、函数
var m=1;
function add(n){
return n=n+1;
}
y=add(m); // 4
function add(n) {
return n=n+3;
}
z=add(m); // 4
a(); // '函数声明'
function a(){
console.log("函数声明");
}
b(); // Uncaught TypeError: b is not a function
var b=function(){
console.log('函数表达式');
}
一个函数实现add(1)(2)(3)和add(1,2)不同的调用方式。
function add(...a){
let sum=0;
for(let num of a){
sum+=num;
}
function s(...b){
for(let num of b){
sum+=num;
}
return s;
}
s.toString=function(){return sum;}
return s;
}
console.log(add(2,3)); // 5
console.log(add(2)(3)); // 5
console.log(add(1)(2,3)(4,5,6)); // 21
11、闭包
闭包是指有权访问另一个函数作用域中的变量的函数，由函数和与其相关的引用环境组成。闭包允许函数访问其引用环境中的变量，有可能是外部环境变量，该变量称为自由变量。创建闭包的常见方式，在一个函数内部创建另一个函数。
闭包的应用，保存变量现场。闭包只能取得包含函数中任何变量的最后一个值，但可以强制创建另一个匿名函数强制让闭包的行为符合预期。
闭包的应用，私有作用域的匿名函数。临时需要一些变量，就可以使用私有作用域，限制向全局作用域中添加过多的变量和函数。私有变量包括函数的参数、局部变量和在函数内部定义的其他函数。
for(var i=0;i<6;i++){
setTimeout(function(){
console.log(i); // 打印6个6
},1000);
}
// ES6语法可以实现打印1 2 3 4吗？
var numbers=[0,1,2,3];
var functions=[];
for(var i=0;num=numbers[i],i<numbers.length;i++){
functions.push(function(){
console.log(num); // 打印四个undefined
})
}
for(var j=0;j<functions.length;j++){
functions[j]();
}
// 如何理解？
var funcs=[],
object={a:true,b:true,c:true}
for(let key in object){
funcs.push(function(){
console.log(key)
})
}
funcs.forEach(function(func){
func(); // a b c
})
12、call、apply和bind的区别
函数调用时绑定this值：call()、apply()让函数在特定的作用域下进行调用，即设置函数体内this对象的值。扩充函数运行的作用域，对象不需要与方法有任何耦合关系。区别仅在于接受参数的方式不同， call()方法传递的参数逐个列举，第一个参数是作用域；apply()方法接收两个参数，作用域和参数数组。
为函数绑定this值但并不调用：bind()传入新作用域，返回新函数，该函数在bind作用域执行。第二个参数是参数列表，与call一致。
var scope='window';
env={
scope:'inner',
getscope:function(){
console.log(this.scope);
}
}
env.getscope(); // 'inner'
env.getscope.apply(window); // 'window'
env.getscope.call(window); // 'window'
env.getscope.bind(window)(); // 'window'
var f=env.getscope;
f(); // 'window'
13、垃圾回收机制和内存管理
js具有自动垃圾回收机制，找出不再使用的变量，垃圾收集器按一定时间间隔（影响性能）释放其占用的内存。“标记清除”是目前主流的垃圾回收算法，给当前不使用的值加上标记，再回收内存。另一种算法是“引用计数”，跟踪记录所有值被引用的次数，当代码中存在循环引用现象时会导致问题。及时解除不再使用的全局对象、全局对象属性及循环引用变量的引用，确保有效回收内存。
14、异步加载JS的方式
使用defer属性让脚本在文档完全呈现之后再顺序执行，async属性同样让脚本立即下载延迟执行，但不保证顺序。
动态生成<script>标签
a.XHR注入（通过XMLHttpRequest对象来获取JS，然后创建一个script元素插入到DOM结构中）;
b.ajax eval(使用ajax得到脚本内容，然后通过eval（xmlhttp.responseText）来运行脚本);
c.iframe等
DOM
1、节点操作
（1）获取节点 getElementById getElementsByTagName getElementsByClassName
querySelector/querySelectorAll 获取指定元素的后代元素中符合选择器的节点，第一个符合条件的元素或所有元素的列表
（2）创建节点 createElement createDocumentFragment
（3）修改节点内容 textContent innerText
（4）插入节点 appendChild insertBefore
（5）删除节点 removeChild replaceChild
2、样式操作
（1）增加内联样式 element.style.color='red'; element.style.cssText='border-color:red;color:red;';
（2）更新class element.className+='invalid';
（3）更换样式表
3、offsetWidth/clientWidth/scrollWidth的区别
offsetWidth：元素在水平方向上占用的空间大小。
clientWidth：元素内容区的宽度加左右内边距的宽度。
scrollWidth：在没有滚动条的情况下，元素内容的总宽度。
console.log('one');
setTimeout(function(){
console.log('two');
},0);
console.log('three');
// one three two
对于事件委托，如何为不同子元素绑定特定的功能
event.target
12、判断一个字符串中出现次数最多的字符/单词，统计这个次数
13、去掉一个数组的重复元素
求一个字符串的字节长度