1 实现一个函数，判断输入是不是回文字符串
2 几种方式实现已知或者未知宽度的垂直水平居中。
3 实现效果，点击容器内的图标，图标边框变成border 1px solid red，点击空白处重置
4 实现Storage，使得该对象为单例，并对localStorage进行封装设置值setItem(key,value)和getItem(key)
5 说说从输入URL到看到页面发生的全过程，越详细越好
6 三次握手，四次挥手
7 CSS和JS的位置会影响页面的效率，为什么？
8 display:none 和 visibility:hidden的区别
9 什么是回流和重绘
10 div+css 和 table相比有哪些优势
11 说你对rem的理解
12 px，em，rem的联系和区别
14 浏览器的内核分别是什么
14 CSS3那些新增属性
15 HTML5那些新增属性
16 cookies , sessionStorage和localStorage区别
17 跨域问题如何解决
18 如何优化网页加载速度
19 get和post的区别
20 为什么要用多个域名来存储资源
21 优雅降级和渐进增强？
22 谈谈垃圾回收机制方式及内存管理
23 js的基本数据类型
24 事件代理和普通事件有什么区别
25 编写一个数组去重的例子。
26 编写一个统计字符出现最多的字符，及最多的次数。
27 闭包
28 闭包的作用
20 闭包的优缺点
30 js继承的几种方式，并解释
31 ES6的新增那些东西（特性）
32 ES6的promise的理解和使用
33 vue的生命周期
34 Vuex的作用及用途
35 Vue数据绑定的原理

实现一个函数，判断输入是不是回文字符串

function isPlalindrome(input){
  if(typeof input !== 'string')return false;
  return input.split('').reverse().join('') === input;
}
console.log(isPlalindrome('level')+'  '+isPlalindrome('abc')+'  '+isPlalindrome('nonon'))

// true false true

注：回文字符串：是一个正读和反读都一样的字符串，比如“level”或者“noon”等等就是回文串。

几种方式实现已知或者未知宽度的垂直水平居中

/* box1 */
.box1{
    position: relative;
}
.box1 .inner{
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -50px;
    margin-top: -50px;
}

/* box2 */
.box2{
    position: relative;
}
.box2 .inner{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%)
}

/* box3 */
.box3{
    position: relative;
}
.box3 .inner{
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}

/* box4 */
.box4{
    display: flex;
    justify-content: center;
    align-items: center;
}

/* box5 */
.box5{
    display: table;
}
.box5 .inner{
    display: table-cell;
    vertical-align: middle;
}

实现效果，点击容器内的图标，图标边框变成border 1px solid red，点击空白处重置

<div id="box" style="padding:15px;margin:15px;">
        <div class="icon">图标</div>
</div>
<script>
window.onload = function(){
        const box = document.getElementById('box');
    function isIcon(target) {
        return target.className.includes('icon');
    }
    box.onclick = function (e) {
        e.stopPropagation();
        const target = e.target;
        if (isIcon(target)) {
            target.style.border = '1px solid red';
        }
    }
    const doc = document;
    doc.onclick = function (e) {
        const children = box.children;
        for (let i=0; i < children.length; i++) {
            if (isIcon(children)) {
                children.style.border = 'none';
            }
        }
    }
}
</script>

实现Storage，使得该对象为单例，并对localStorage进行封装设置值setItem(key,value)和getItem(key)

var instance = null;

class Storage {
    static getInstance() {
        if (!instance) {
            instance = new Storage();
        }
        return instance;
    }
    setItem = (key, value) => localStorage.setItem(key, value)
    getItem = key => localStorage.getItem(key)
}

单例模式: 保证一个类只有一个实例,并提供一个访问它的全局访问点

说说从输入URL到看到页面发生的全过程，越详细越好

1.首先浏览器主线程接管，开一个下载线程。

2.然后进行HTTP请求（DNS查询、IP寻址等等），中间会有三次握手，等待响应，开始现在响应报文。

3.将下载完的内容转交给Renderer进程管理。

4.Renderer进程开始解析css rule tree 和dom tree，这两个过程是并行的，所以一般我会把link标签放到页面的顶部。

5.解析绘制过程中，当浏览器遇到link标签或者script、img等标签，浏览器会去下载这些内容、遇到的时候缓存的使用缓存，不适用缓存的重新下载资源。

6.css rule tree和dom tree生成完了之后，开始合成render tree，这个时候浏览器会进行layout，开始计算每一个节点的位置，然后进行绘制。

绘制结束之后，关闭TCP连接，过程有四次挥手。

三次握手，四次挥手

(1) 第一次握手：建立连接时，客户端A发送SYN包(SYN=j)到服务器B，并进入SYN_SEND状态，等待服务器B确认。

(2) 第二次握手：服务器B收到SYN包，必须确认客户A的SYN(ACK=j+1)，同时自己也发送一个SYN包(SYN=k)，即SYN+ACK包，此时服务器B进入SYN_RECV状态。

(3) 第三次握手：客户端A收到服务器B的SYN＋ACK包，向服务器B发送确认包ACK(ACK=k+1)，此包发送完毕，客户端A和服务器B进入ESTABLISHED状态，完成三次握手

第一次挥手：Client发送一个FIN，用来关闭Client到Server的数据传送，Client进入FIN_WAIT_1状态。

第二次挥手：Server收到FIN后，发送一个ACK给Client，确认序号为收到序号+1（与SYN相同，一个FIN占用一个序号），Server进入CLOSE_WAIT状态。

第三次挥手：Server发送一个FIN，用来关闭Server到Client的数据传送，Server进入LAST_ACK状态。

第四次挥手：Client收到FIN后，Client进入TIME_WAIT状态，接着发送一个ACK给Server，确认序号为收到序号+1，Server进入CLOSED状态，完成四次挥手。

不太懂先马住

CSS和JS的位置会影响页面的效率，为什么？

css加载过程中不会影响到DOM树的生成，但是会影响到Render树的生成，进而影响到layout

所以一般来说，style的link标签尽量放在head里面，因为在解析DOM树的时候是自上而下的，而css样式又是通过异步加载的，这样的话，

解析DOM树的body节点和加载CSS样式尽可能的并行，加快Render树生成的速度。

js脚本应该放在底部，原因在于js线程和GUI渲染是互斥的关系，如果js放在首部。

当下载js的时候，会影响渲染线程绘制页面，js的作用主要是处理交互，而交互必须得先让页面呈现才能进行，所以为了保证用户体验，尽量让页面先绘制出来。

display:none 和 visibility:hidden的区别

都是元素隐藏，在文档流中，display:none不占位置。visibility:hidden占位置。
性能上，display比visibility差。display控制显示隐藏时，页面会产生回流（当页面中的一部分元素需要改变规模尺寸、布局、显示隐藏等，页面重新构建，此时就是回流。所有页面第一次加载时需要产生一次回流）

什么是回流和重绘

重绘（repaints）是一个元素外观的改变所触发的浏览器行为，例如改变vidibility、outline、背景色等属性。浏览器会根据元素的新属性重新绘制，使元素呈现新的外观。重绘不会带来重新布局，并不一定伴随回流。
回流（reflow）是更明显的一种改变，可以理解为渲染树需要重新计算。

div+css 和 table相比有哪些优势

Table： 结构 table tr td 属性border width align… 在同一个页面中，页面代码冗长，不利于维护，不利于百度搜索引擎优化
div+css：符合新型的web设计标准，页面结构和表现分离。精简代码便于维护，搜索引擎友好，提升页面加载时速度（用户体验）

说你对rem的理解

相对长度单位，相对于根元素(即html元素)font-size计算值的倍数。简单来说，就是一个相对单位，相对根元素子体大小的倍数。
例如：html的font-size:12px；那么使用rem作为单位的，1rem等价于12px，2rem等价于24px；
按定高宽设计出来页面，然后转换为rem单位，配合js查询屏幕大小来改变html的font-size，完美自适应大屏小屏。

px，em，rem的联系和区别

px：相对长度单位。像素px是相对于显示器屏幕分辨率而言的。特点：

IE无法调整那些使用px作为单位的字体大小；
国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位；
Firefox能够调整px和em，rem，但是96%以上的中国网民使用IE浏览器(或内核)。
em：是相对长度单位。相对于当前对象内文本的字体尺寸。如当前未设置，则相对于浏览器的默认字体尺寸。特点：
em的值并不是固定的；
em会继承父级元素的字体大小；
rem：相对长度单位，相对于根元素(即html元素)font-size计算值的倍数。

浏览器的内核分别是什么

1、Trident内核：IE最先开发或使用的，也称IE内核 ，360浏览器使用的也是IE内核；
2、Webkit内核：谷歌chrome浏览器最先开发或使用，也叫谷歌内核 ，枫树浏览器、太阳花使用的也是谷歌内核；
3、Gecko内核： Netscape6开始采用的内核，后来的Mozilla FireFox (火狐浏览器) 也采用了该内核，K-Meleon浏览器也是使用这种内核；
4、Presto内核：目前只有Opera浏览器采用该内核


CSS3那些新增属性

边框：圆角border-radius，阴影box-shadow，边框图片border-image
背景：背景定位区域background-origin，背景大小支持百分比background-size
文字效果：文字阴影text-shadow，长单词拆分word-wrap
2D转换：transform:对元素进行移动translate()，缩放scale()，转动rotate()，拉伸skew()
3D转换：transform:对元素进行x轴旋转rotateX()，y轴旋转rotateY()
过渡，动画， 多列等等


HTML5那些新增属性

html5新增：canvas绘画，本地离线存储localStorage，sessionStorage，video和audio元素，语义化元素，表单类型（date，time，email等），地理定位等等
移除元素等

cookies , sessionStorage和localStorage区别

cookies：数据大小不超过4k，cookies过期之前一直有效，会自动传递到服务器
sessionStorage：存储大小相对cookies大得多（5M或更大），关闭浏览器窗口后自动删除，仅存本地
localStorage：存储大小相对cookies大得多（5M或更大），除非手动删除，关浏览器后不会删除，仅存本地

跨域问题如何解决

1、 通过jsonp跨域
2、 postMessage跨域
3、 跨域资源共享（CORS）
普通跨域请求：只服务端设置Access-Control-Allow-Origin即可，前端无须设置，若要带cookie请求：前后端都需要设置。
4、 nginx代理跨域：nginx配置解决iconfont跨域 ，nginx反向代理接口跨域
5、 nodejs中间件代理跨域： vue框架的跨域webpack.config.js部分配置
6、 WebSocket协议跨域

如何优化网页加载速度

减少http请求：图片地图，CSS Sprites（精灵图）。
使用CDN：内容发布网络（CDN）是一组分布在不同地理位置的Web服务器，用于更加有效的向用户发布内容。
添加Expires头：告诉客户端可以使用一个组件的当前副本，直到指定时间为止。
压缩组件，代理缓存
样式防头部，脚本放底部
避免CSS表达式
使用外部的js和css
减少DNS查找
精简javascript
避免重定向
删除重复脚本
配置ETag
使Ajax缓存
get和post的区别

最直接的区别

GET请求的参数是放在URL里的，POST请求参数是放在请求body里的；
GET请求的URL传参有长度限制，而POST请求没有长度限制；
GET请求的参数只能是ASCII码，所以中文需要URL编码，而POST请求传参没有这个限制；
其实，GET和POST本质上两者没有任何区别。他们都是HTTP协议中的请求方法：底层实现都是基于TCP/IP协议。上述的所谓区别，只是浏览器厂家根据约定，做得限制而已。
HTTP请求，最初设定了八种方法本质上没有任何区别。只是让请求，更加有语义而已。

OPTIONS 返回服务器所支持的请求方法
GET 向服务器获取指定资源


HEAD 与GET一致，只不过响应体不返回，只返回响应头
POST 向服务器提交数据，数据放在请求体里
PUT 与POST相似，只是具有幂等特性，一般用于更新
DELETE 删除服务器指定资源
TRACE 回显服务器端收到的请求，测试的时候会用到这个
CONNECT 预留，暂无使用
为什么要用多个域名来存储资源

CDN缓存更方便。
突破浏览器并发限制。
节省cookie带宽，尤其是上行带宽 一般比下行要慢。
节约主域名的连接数，优化页面响应速度
防止不必要的安全问题

优雅降级和渐进增强？

优雅降级：一开始就构建站点的完整功能，然后 针对浏览器测试和修复 。比如一开始使用 CSS3 的特性构建了一个应用，然后逐步针对各大浏览器进行 hack 使其可以在低版本浏览器上正常浏览
渐进增强：一开始就针对低版本浏览器进行构建页面，完成基本功能，然后再针对高级浏览器进行效果、交互、追加功能达到更好的体验。

谈谈垃圾回收机制方式及内存管理

垃圾回收机制GC：执行环境会负责管理代码执行过程中使用的内存，原理：垃圾收集器会定期（周期性）找出那些不在继续使用的变量，然后释放其内存。
垃圾回收策略：

标记清除(较为常用)：变量进入和离开环境都会被标记。某一时刻：垃圾回收器会过滤掉环境中的变量，以及被环境变量引用的变量，剩下的就是被视为准备回收的变量
引用计数：跟踪记录每个值被引用的次数。引用计数为0时，被视为准备回收的对象。
内存管理：
什么时候触发垃圾回收?
合理的GC方案

js的基本数据类型

基本数据类型：Undefined、Null、Boolean、Number和String

事件代理和普通事件有什么区别

编写一个数组去重的例子。

var arr = [1,2,3,4,5,6,7,8,9,4,3,2,5,2,5,2,10]

编写一个统计字符出现最多的字符，及最多的次数。

var str = ‘asdfssaaasasasasaa’;

闭包

定义：访问另一个函数作用域中变量的函数。即在函数的内部创建另一个函数。

闭包的作用

闭包的优缺点


js继承的几种方式，并解释


ES6的新增那些东西（特性）


ES6的promise的理解和使用


vue的生命周期


Vuex的作用及用途


Vue数据绑定的原理

答案及新增面试题，待更新 未完待续

1 实现一个函数，判断输入是不是回文字符串
2 几种方式实现已知或者未知宽度的垂直水平居中。
3 实现效果，点击容器内的图标，图标边框变成border 1px solid red，点击空白处重置
4 实现Storage，使得该对象为单例，并对localStorage进行封装设置值setItem(key,value)和getItem(key)
5 说说从输入URL到看到页面发生的全过程，越详细越好
6 三次握手，四次挥手
7 CSS和JS的位置会影响页面的效率，为什么？
8 display:none 和 visibility:hidden的区别
9 什么是回流和重绘
10 div+css 和 table相比有哪些优势
11 说你对rem的理解
12 px，em，rem的联系和区别
14 浏览器的内核分别是什么
14 CSS3那些新增属性
15 HTML5那些新增属性
16 cookies , sessionStorage和localStorage区别
17 跨域问题如何解决
18 如何优化网页加载速度
19 get和post的区别
20 为什么要用多个域名来存储资源
21 优雅降级和渐进增强？
22 谈谈垃圾回收机制方式及内存管理
23 js的基本数据类型
24 事件代理和普通事件有什么区别
25 编写一个数组去重的例子。
26 编写一个统计字符出现最多的字符，及最多的次数。
27 闭包
28 闭包的作用
20 闭包的优缺点
30 js继承的几种方式，并解释
31 ES6的新增那些东西（特性）
32 ES6的promise的理解和使用
33 vue的生命周期
34 Vuex的作用及用途
35 Vue数据绑定的原理

实现一个函数，判断输入是不是回文字符串

function isPlalindrome(input){
  if(typeof input !== 'string')return false;
  return input.split('').reverse().join('') === input;
}
console.log(isPlalindrome('level')+'  '+isPlalindrome('abc')+'  '+isPlalindrome('nonon'))

// true false true

注：回文字符串：是一个正读和反读都一样的字符串，比如“level”或者“noon”等等就是回文串。

几种方式实现已知或者未知宽度的垂直水平居中

/* box1 */
.box1{
    position: relative;
}
.box1 .inner{
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -50px;
    margin-top: -50px;
}

/* box2 */
.box2{
    position: relative;
}
.box2 .inner{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%)
}

/* box3 */
.box3{
    position: relative;
}
.box3 .inner{
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}

/* box4 */
.box4{
    display: flex;
    justify-content: center;
    align-items: center;
}

/* box5 */
.box5{
    display: table;
}
.box5 .inner{
    display: table-cell;
    vertical-align: middle;
}

实现效果，点击容器内的图标，图标边框变成border 1px solid red，点击空白处重置

<div id="box" style="padding:15px;margin:15px;">
        <div class="icon">图标</div>
</div>
<script>
window.onload = function(){
        const box = document.getElementById('box');
    function isIcon(target) {
        return target.className.includes('icon');
    }
    box.onclick = function (e) {
        e.stopPropagation();
        const target = e.target;
        if (isIcon(target)) {
            target.style.border = '1px solid red';
        }
    }
    const doc = document;
    doc.onclick = function (e) {
        const children = box.children;
        for (let i=0; i < children.length; i++) {
            if (isIcon(children)) {
                children.style.border = 'none';
            }
        }
    }
}
</script>

实现Storage，使得该对象为单例，并对localStorage进行封装设置值setItem(key,value)和getItem(key)

var instance = null;

class Storage {
    static getInstance() {
        if (!instance) {
            instance = new Storage();
        }
        return instance;
    }
    setItem = (key, value) => localStorage.setItem(key, value)
    getItem = key => localStorage.getItem(key)
}

单例模式: 保证一个类只有一个实例,并提供一个访问它的全局访问点

说说从输入URL到看到页面发生的全过程，越详细越好

1.首先浏览器主线程接管，开一个下载线程。

2.然后进行HTTP请求（DNS查询、IP寻址等等），中间会有三次握手，等待响应，开始现在响应报文。

3.将下载完的内容转交给Renderer进程管理。

4.Renderer进程开始解析css rule tree 和dom tree，这两个过程是并行的，所以一般我会把link标签放到页面的顶部。

5.解析绘制过程中，当浏览器遇到link标签或者script、img等标签，浏览器会去下载这些内容、遇到的时候缓存的使用缓存，不适用缓存的重新下载资源。

6.css rule tree和dom tree生成完了之后，开始合成render tree，这个时候浏览器会进行layout，开始计算每一个节点的位置，然后进行绘制。

绘制结束之后，关闭TCP连接，过程有四次挥手。

三次握手，四次挥手

(1) 第一次握手：建立连接时，客户端A发送SYN包(SYN=j)到服务器B，并进入SYN_SEND状态，等待服务器B确认。

(2) 第二次握手：服务器B收到SYN包，必须确认客户A的SYN(ACK=j+1)，同时自己也发送一个SYN包(SYN=k)，即SYN+ACK包，此时服务器B进入SYN_RECV状态。

(3) 第三次握手：客户端A收到服务器B的SYN＋ACK包，向服务器B发送确认包ACK(ACK=k+1)，此包发送完毕，客户端A和服务器B进入ESTABLISHED状态，完成三次握手

第一次挥手：Client发送一个FIN，用来关闭Client到Server的数据传送，Client进入FIN_WAIT_1状态。

第二次挥手：Server收到FIN后，发送一个ACK给Client，确认序号为收到序号+1（与SYN相同，一个FIN占用一个序号），Server进入CLOSE_WAIT状态。

第三次挥手：Server发送一个FIN，用来关闭Server到Client的数据传送，Server进入LAST_ACK状态。

第四次挥手：Client收到FIN后，Client进入TIME_WAIT状态，接着发送一个ACK给Server，确认序号为收到序号+1，Server进入CLOSED状态，完成四次挥手。

不太懂先马住

CSS和JS的位置会影响页面的效率，为什么？

css加载过程中不会影响到DOM树的生成，但是会影响到Render树的生成，进而影响到layout

所以一般来说，style的link标签尽量放在head里面，因为在解析DOM树的时候是自上而下的，而css样式又是通过异步加载的，这样的话，

解析DOM树的body节点和加载CSS样式尽可能的并行，加快Render树生成的速度。

js脚本应该放在底部，原因在于js线程和GUI渲染是互斥的关系，如果js放在首部。

当下载js的时候，会影响渲染线程绘制页面，js的作用主要是处理交互，而交互必须得先让页面呈现才能进行，所以为了保证用户体验，尽量让页面先绘制出来。

display:none 和 visibility:hidden的区别

都是元素隐藏，在文档流中，display:none不占位置。visibility:hidden占位置。
性能上，display比visibility差。display控制显示隐藏时，页面会产生回流（当页面中的一部分元素需要改变规模尺寸、布局、显示隐藏等，页面重新构建，此时就是回流。所有页面第一次加载时需要产生一次回流）

什么是回流和重绘

重绘（repaints）是一个元素外观的改变所触发的浏览器行为，例如改变vidibility、outline、背景色等属性。浏览器会根据元素的新属性重新绘制，使元素呈现新的外观。重绘不会带来重新布局，并不一定伴随回流。
回流（reflow）是更明显的一种改变，可以理解为渲染树需要重新计算。

div+css 和 table相比有哪些优势

Table： 结构 table tr td 属性border width align… 在同一个页面中，页面代码冗长，不利于维护，不利于百度搜索引擎优化
div+css：符合新型的web设计标准，页面结构和表现分离。精简代码便于维护，搜索引擎友好，提升页面加载时速度（用户体验）

说你对rem的理解

相对长度单位，相对于根元素(即html元素)font-size计算值的倍数。简单来说，就是一个相对单位，相对根元素子体大小的倍数。
例如：html的font-size:12px；那么使用rem作为单位的，1rem等价于12px，2rem等价于24px；
按定高宽设计出来页面，然后转换为rem单位，配合js查询屏幕大小来改变html的font-size，完美自适应大屏小屏。

px，em，rem的联系和区别

px：相对长度单位。像素px是相对于显示器屏幕分辨率而言的。特点：

IE无法调整那些使用px作为单位的字体大小；
国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位；
Firefox能够调整px和em，rem，但是96%以上的中国网民使用IE浏览器(或内核)。
em：是相对长度单位。相对于当前对象内文本的字体尺寸。如当前未设置，则相对于浏览器的默认字体尺寸。特点：
em的值并不是固定的；
em会继承父级元素的字体大小；
rem：相对长度单位，相对于根元素(即html元素)font-size计算值的倍数。

浏览器的内核分别是什么

1、Trident内核：IE最先开发或使用的，也称IE内核 ，360浏览器使用的也是IE内核；
2、Webkit内核：谷歌chrome浏览器最先开发或使用，也叫谷歌内核 ，枫树浏览器、太阳花使用的也是谷歌内核；
3、Gecko内核： Netscape6开始采用的内核，后来的Mozilla FireFox (火狐浏览器) 也采用了该内核，K-Meleon浏览器也是使用这种内核；
4、Presto内核：目前只有Opera浏览器采用该内核


CSS3那些新增属性

边框：圆角border-radius，阴影box-shadow，边框图片border-image
背景：背景定位区域background-origin，背景大小支持百分比background-size
文字效果：文字阴影text-shadow，长单词拆分word-wrap
2D转换：transform:对元素进行移动translate()，缩放scale()，转动rotate()，拉伸skew()
3D转换：transform:对元素进行x轴旋转rotateX()，y轴旋转rotateY()
过渡，动画， 多列等等


HTML5那些新增属性

html5新增：canvas绘画，本地离线存储localStorage，sessionStorage，video和audio元素，语义化元素，表单类型（date，time，email等），地理定位等等
移除元素等

cookies , sessionStorage和localStorage区别

cookies：数据大小不超过4k，cookies过期之前一直有效，会自动传递到服务器
sessionStorage：存储大小相对cookies大得多（5M或更大），关闭浏览器窗口后自动删除，仅存本地
localStorage：存储大小相对cookies大得多（5M或更大），除非手动删除，关浏览器后不会删除，仅存本地

跨域问题如何解决

1、 通过jsonp跨域
2、 postMessage跨域
3、 跨域资源共享（CORS）
普通跨域请求：只服务端设置Access-Control-Allow-Origin即可，前端无须设置，若要带cookie请求：前后端都需要设置。
4、 nginx代理跨域：nginx配置解决iconfont跨域 ，nginx反向代理接口跨域
5、 nodejs中间件代理跨域： vue框架的跨域webpack.config.js部分配置
6、 WebSocket协议跨域

如何优化网页加载速度

减少http请求：图片地图，CSS Sprites（精灵图）。
使用CDN：内容发布网络（CDN）是一组分布在不同地理位置的Web服务器，用于更加有效的向用户发布内容。
添加Expires头：告诉客户端可以使用一个组件的当前副本，直到指定时间为止。
压缩组件，代理缓存
样式防头部，脚本放底部
避免CSS表达式
使用外部的js和css
减少DNS查找
精简javascript
避免重定向
删除重复脚本
配置ETag
使Ajax缓存
get和post的区别

最直接的区别

GET请求的参数是放在URL里的，POST请求参数是放在请求body里的；
GET请求的URL传参有长度限制，而POST请求没有长度限制；
GET请求的参数只能是ASCII码，所以中文需要URL编码，而POST请求传参没有这个限制；
其实，GET和POST本质上两者没有任何区别。他们都是HTTP协议中的请求方法：底层实现都是基于TCP/IP协议。上述的所谓区别，只是浏览器厂家根据约定，做得限制而已。
HTTP请求，最初设定了八种方法本质上没有任何区别。只是让请求，更加有语义而已。

OPTIONS 返回服务器所支持的请求方法
GET 向服务器获取指定资源


HEAD 与GET一致，只不过响应体不返回，只返回响应头
POST 向服务器提交数据，数据放在请求体里
PUT 与POST相似，只是具有幂等特性，一般用于更新
DELETE 删除服务器指定资源
TRACE 回显服务器端收到的请求，测试的时候会用到这个
CONNECT 预留，暂无使用
为什么要用多个域名来存储资源

CDN缓存更方便。
突破浏览器并发限制。
节省cookie带宽，尤其是上行带宽 一般比下行要慢。
节约主域名的连接数，优化页面响应速度
防止不必要的安全问题

优雅降级和渐进增强？

优雅降级：一开始就构建站点的完整功能，然后 针对浏览器测试和修复 。比如一开始使用 CSS3 的特性构建了一个应用，然后逐步针对各大浏览器进行 hack 使其可以在低版本浏览器上正常浏览
渐进增强：一开始就针对低版本浏览器进行构建页面，完成基本功能，然后再针对高级浏览器进行效果、交互、追加功能达到更好的体验。

谈谈垃圾回收机制方式及内存管理

垃圾回收机制GC：执行环境会负责管理代码执行过程中使用的内存，原理：垃圾收集器会定期（周期性）找出那些不在继续使用的变量，然后释放其内存。
垃圾回收策略：

标记清除(较为常用)：变量进入和离开环境都会被标记。某一时刻：垃圾回收器会过滤掉环境中的变量，以及被环境变量引用的变量，剩下的就是被视为准备回收的变量
引用计数：跟踪记录每个值被引用的次数。引用计数为0时，被视为准备回收的对象。
内存管理：
什么时候触发垃圾回收?
合理的GC方案

js的基本数据类型

基本数据类型：Undefined、Null、Boolean、Number和String

事件代理和普通事件有什么区别

编写一个数组去重的例子。

var arr = [1,2,3,4,5,6,7,8,9,4,3,2,5,2,5,2,10]

编写一个统计字符出现最多的字符，及最多的次数。

var str = ‘asdfssaaasasasasaa’;

闭包

定义：访问另一个函数作用域中变量的函数。即在函数的内部创建另一个函数。

闭包的作用

闭包的优缺点


js继承的几种方式，并解释


ES6的新增那些东西（特性）


ES6的promise的理解和使用


vue的生命周期


Vuex的作用及用途


Vue数据绑定的原理

答案及新增面试题，待更新 未完待续