前端面试题（2019篇）

逃离我推掉我的手 2022-03-09 11:42 274阅读 0赞

### 文章目录 ###

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

在线代码：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) #

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

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

1.  绘制结束之后，关闭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.  过渡，动画， 多列等等
7.

# 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数据绑定的原理 #

--------------------

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