前端面试题（2019篇）

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

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”等等就是回文串。

在线代码：http://jsrun.net/R6XKp

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

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

在线代码： http://jsrun.net/C6XKp

实现效果，点击容器内的图标，图标边框变成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[i])) {
                children[i].style.border = 'none';
            }
        }
    }
}
</script>

在线代码：http://jsrun.net/u6XKp

实现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，开始计算每一个节点的位置，然后进行绘制。

7. 绘制结束之后，关闭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是相对于显示器屏幕分辨率而言的。特点：

1. IE无法调整那些使用px作为单位的字体大小；
2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位；
3. Firefox能够调整px和em，rem，但是96%以上的中国网民使用IE浏览器(或内核)。
   em：是相对长度单位。相对于当前对象内文本的字体尺寸。如当前未设置，则相对于浏览器的默认字体尺寸。特点：
4. em的值并不是固定的；
5. 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那些新增属性

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

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协议跨域
详解：https://segmentfault.com/a/1190000011145364

如何优化网页加载速度

1. 减少http请求：图片地图，CSS Sprites（精灵图）。
2. 使用CDN：内容发布网络（CDN）是一组分布在不同地理位置的Web服务器，用于更加有效的向用户发布内容。
3. 添加Expires头：告诉客户端可以使用一个组件的当前副本，直到指定时间为止。
4. 压缩组件，代理缓存
5. 样式防头部，脚本放底部
6. 避免CSS表达式
7. 使用外部的js和css
8. 减少DNS查找
9. 精简javascript
10. 避免重定向
11. 删除重复脚本
12. 配置ETag
13. 使Ajax缓存
    详解：http://www.cnblogs.com/MarcoHan/p/5295398.html

get和post的区别

最直接的区别，

• GET请求的参数是放在URL里的，POST请求参数是放在请求body里的；
• GET请求的URL传参有长度限制，而POST请求没有长度限制；
• GET请求的参数只能是ASCII码，所以中文需要URL编码，而POST请求传参没有这个限制；

其实，GET和POST本质上两者没有任何区别。他们都是HTTP协议中的请求方法：底层实现都是基于TCP/IP协议。上述的所谓区别，只是浏览器厂家根据约定，做得限制而已。
HTTP请求，最初设定了八种方法本质上没有任何区别。只是让请求，更加有语义而已。

1. OPTIONS 返回服务器所支持的请求方法
2. GET 向服务器获取指定资源
3. HEAD 与GET一致，只不过响应体不返回，只返回响应头
4. POST 向服务器提交数据，数据放在请求体里
5. PUT 与POST相似，只是具有幂等特性，一般用于更新
6. DELETE 删除服务器指定资源
7. TRACE 回显服务器端收到的请求，测试的时候会用到这个
8. CONNECT 预留，暂无使用
   详情参考：https://baijiahao.baidu.com/s?id=1620934682611653374&wfr=spider&for=pc

为什么要用多个域名来存储资源

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

优雅降级和渐进增强？

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

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

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

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

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

闭包

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

function test(){
     let a = 1;
     function add(){
         a = a + 1;
         console.log(a);//2
     };
     console.log(a);//1
     return add;
 }

 let abc = test(); // 1
 abc(); // 2

闭包的作用

闭包的优缺点

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

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

ES6的promise的理解和使用

vue的生命周期

Vuex的作用及用途

Vue数据绑定的原理

---

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