前端面试题（2019篇） - 好文

文章目录

* 实现一个函数，判断输入是不是回文字符串
<https://blog.csdn.net/u012551928/article/details/88523968#_1>
* 几种方式实现已知或者未知宽度的垂直水平居中。
<https://blog.csdn.net/u012551928/article/details/88523968#_16>
* 实现效果，点击容器内的图标，图标边框变成border 1px solid red，点击空白处重置
<https://blog.csdn.net/u012551928/article/details/88523968#border_1px_solid_red_74>
* 实现Storage，使得该对象为单例，并对localStorage进行封装设置值setItem(key,value)和getItem(key)
<https://blog.csdn.net/u012551928/article/details/88523968#StoragelocalStoragesetItemkeyvaluegetItemkey_106>
* 说说从输入URL到看到页面发生的全过程，越详细越好
<https://blog.csdn.net/u012551928/article/details/88523968#URL_123>
* 三次握手，四次挥手 <https://blog.csdn.net/u012551928/article/details/88523968#_138>
* CSS和JS的位置会影响页面的效率，为什么？
<https://blog.csdn.net/u012551928/article/details/88523968#CSSJS_155>
* display:none 和 visibility:hidden的区别
<https://blog.csdn.net/u012551928/article/details/88523968#displaynone__visibilityhidden_165>
* 什么是回流和重绘 <https://blog.csdn.net/u012551928/article/details/88523968#_169>
* div+css 和 table相比有哪些优势
<https://blog.csdn.net/u012551928/article/details/88523968#divcss__table_173>
* 说你对rem的理解
<https://blog.csdn.net/u012551928/article/details/88523968#rem_177>
* px，em，rem的联系和区别
<https://blog.csdn.net/u012551928/article/details/88523968#pxemrem_182>
* 浏览器的内核分别是什么 <https://blog.csdn.net/u012551928/article/details/88523968#_192>
* CSS3那些新增属性
<https://blog.csdn.net/u012551928/article/details/88523968#CSS3_198>
* HTML5那些新增属性
<https://blog.csdn.net/u012551928/article/details/88523968#HTML5_206>
* cookies , sessionStorage和localStorage区别
<https://blog.csdn.net/u012551928/article/details/88523968#cookies__sessionStoragelocalStorage_210>
* 跨域问题如何解决 <https://blog.csdn.net/u012551928/article/details/88523968#_216>
* 如何优化网页加载速度 <https://blog.csdn.net/u012551928/article/details/88523968#_226>
* get和post的区别
<https://blog.csdn.net/u012551928/article/details/88523968#getpost_242>
* 为什么要用多个域名来存储资源
<https://blog.csdn.net/u012551928/article/details/88523968#_259>
* 优雅降级和渐进增强？ <https://blog.csdn.net/u012551928/article/details/88523968#_266>
* 谈谈垃圾回收机制方式及内存管理
<https://blog.csdn.net/u012551928/article/details/88523968#_269>
* js的基本数据类型 <https://blog.csdn.net/u012551928/article/details/88523968#js_278>
* 事件代理和普通事件有什么区别
<https://blog.csdn.net/u012551928/article/details/88523968#_280>
* 编写一个数组去重的例子。
<https://blog.csdn.net/u012551928/article/details/88523968#_282>
* 编写一个统计字符出现最多的字符，及最多的次数。
<https://blog.csdn.net/u012551928/article/details/88523968#_285>
* 闭包 <https://blog.csdn.net/u012551928/article/details/88523968#_289>
* 闭包的作用 <https://blog.csdn.net/u012551928/article/details/88523968#_292>
* 闭包的优缺点 <https://blog.csdn.net/u012551928/article/details/88523968#_294>
* js继承的几种方式，并解释
<https://blog.csdn.net/u012551928/article/details/88523968#js_296>
* ES6的新增那些东西（特性）
<https://blog.csdn.net/u012551928/article/details/88523968#ES6_298>
* ES6的promise的理解和使用
<https://blog.csdn.net/u012551928/article/details/88523968#ES6promise_300>
* vue的生命周期 <https://blog.csdn.net/u012551928/article/details/88523968#vue_302>
* Vuex的作用及用途
<https://blog.csdn.net/u012551928/article/details/88523968#Vuex_304>
* Vue数据绑定的原理
<https://blog.csdn.net/u012551928/article/details/88523968#Vue_306>

<>实现一个函数，判断输入是不是回文字符串
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 <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 <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 <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，开始计算每一个节点的位置，然后进行绘制。

* 绘制结束之后，关闭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协议跨域
详解：https://segmentfault.com/a/1190000011145364
<https://segmentfault.com/a/1190000011145364>

<>如何优化网页加载速度

* 减少http请求：图片地图，CSS Sprites（精灵图）。
* 使用CDN：内容发布网络（CDN）是一组分布在不同地理位置的Web服务器，用于更加有效的向用户发布内容。
* 添加Expires头：告诉客户端可以使用一个组件的当前副本，直到指定时间为止。
* 压缩组件，代理缓存
* 样式防头部，脚本放底部
* 避免CSS表达式
* 使用外部的js和css
* 减少DNS查找
* 精简javascript
* 避免重定向
* 删除重复脚本
* 配置ETag
* 使Ajax缓存
详解：http://www.cnblogs.com/MarcoHan/p/5295398.html
<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请求，最初设定了八种方法本质上没有任何区别。只是让请求，更加有语义而已。

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

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

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

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

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

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

<>闭包

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

<>闭包的作用

<>闭包的优缺点

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

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

<>ES6的promise的理解和使用

<>vue的生命周期

<>Vuex的作用及用途

<>Vue数据绑定的原理
答案及新增面试题，待更新。。。未完待续。。。

热门工具换一换