前端面试题

1、async和await

答:①await只能放在async函数里

② async 用于声明一个 function 是异步的，而 await 用于等待一个异步方法执行完成。

③async 函数返回的是一个 Promise 对象

④await 是个运算符，用于组成表达式，await 表达式的运算结果取决于它等的东西。

2、call和apply

①call和apply都是用来修改函数中的this的指向问题

②call方法可以传给该函数的参数分别作为自己的多个参数

③apply方法必须将该函数的参数合并成一个数组

④Object.ProtoType.toString.call（）判断复杂数据类型

⑤Array.prototype.slice.call(arguments)

3、forEach（）和map（）

答：①都是循环遍历数组中的每一项。

  .② forEachhttps://so.csdn.net/so/search?q=forEach&spm=1001.2101.3001.7020() 和 map() 里面每一次执行匿名函数都支持3个参数：数组中的当前项item,当前项的索引index,原始数组input。

③forEach（）不能return；map（）可以return；

4、从输入url?

①输入URL后解析协议、端口、路径等信息；

②DNS域名解析；

③建立TCP连接，三次握手

④发送HTTP请求；

⑤服务器处理请求并返回HTTP报文；

⑥浏览器开始渲染页面；

⑦断开TCP连接，四次握手

5、ES6新特性

①let、const

②Symbol

③async/await 更好的解决了回调地狱

④promise用于更优雅地处理异步请求；优点：让回调函数变成了规范的链式写法，程序流程可以看的很清楚。缺点：一旦开始，就无法取消；无法进度追踪；

⑤for of 遍历的是键值对中的值；for in 遍历的是键值对中的键

⑥箭头函数：写法不同、省略return关键字、this指向函数声明时所在作用域下的this值

⑦解构赋值

⑧模板字符串

6、行内元素和块级元素

①行内元素：<a>、<b>、<br>、<button>、<em>、<img>、<input>、<label>、<select>、<span>、<strong>

②块级元素：<div>、<button>、<h1>、<dl、dt、dd>、<form>、<li>、<ol>、<table>、<ul>、<tr>、<th>

7、回流和重绘

①回流：改变页面结构，Dom树发生改变；

②重绘：页面颜色发生改变，Dom树没有发生改变

8、请描述一下cookies，sessionStorage和localStorage的区别？

①localStorage长期存储数据，浏览器关闭数据后不丢失；

②sessionStorage数据在浏览器关闭后自动删除；

③cookie是网站为了标志用户身份而存储在用户本地终端上的数据，cookie始终在浏览器和服务器端来回传递。而①②不会自动把数据发送给服务器，仅保存在本地；

④存储大小：cookie数据大小不会超过4K，①②虽然也有存储大小的限制，但比cookie大，可达到5M+；

9、display都有哪些值？

display：none 隐藏

display：block 块级元素

display：inline 默认

display：inline-block

10、CSS优化、提高性能的方法有哪些？

①减少CSS嵌套，最好不要嵌套三层

②不要再ID选择器前面进行嵌套，ID本来就是唯一并且权值大，嵌套完全是浪费；

③建立公共样式类，把相同样式提取出来作为公共类使用

④减少通配符使用

⑤减少http请求：http协议是无状态的应用层协议，意味着每次http请求都需要建立通信链路、进行数据传输，而在服务器端，每个http都需要启动独立的线程去处理。这些通信和服务消耗都很大，尽量减少。

⑥减少http请求：还可以合并CSS、合并JavaScript、合并图片。将浏览器一次访问需要的javascript和CSS合并成一个文件，这样浏览器只需要请求一次。图片也可以合并，如果每张图片都有不同的超链接，可通过CSS偏移响应点击鼠标操作，构造不同的URL。

⑦使用浏览器缓存：对一个网站而言，CSS、JS、图标这些静态资源文件更新的频率都比较低，而这些文件几乎是每次http请求都需要的，如果将这些文件缓存在浏览器中，可以极好的改善性能。通过设置http头中的cache-control和expires的属性，可设定浏览器缓存，缓存时间可以使是几天、甚至是几个月

⑧启用压缩：在服务器端对文本进行压缩，在浏览器端对文件解压缩，可有效减少通信传输的数据量。尽量使用外部脚本。

11、图片懒加载原理？

①一张图片就是一个img标签，浏览器是否发起请求是根据img的src属性，所以实现懒加载的关键就是：在图片没有进入可视区域内，不给img的src赋值，这样浏览器就不会发送请求了，等到图片进入可视区域再给src赋值

②实现及思路

a、加载loading图片

b、判断哪些图片要加载

c、隐形加载图片

d、替换真图片

12、前端模块化

①作用：抽离公共代码、隔离作用域、避免变量冲突等。将一个复杂的系统分解为多个模块以方便编码。

13、WebSocket:

①websocket和http一样式一种通信协议，是H5的一种新的协议；

②websocket是为了弥补http单向请求的缺陷（eg:想了解今天的天气，只能是客户端向服务端发出请求，服务器返回查询结果，http做不到这种单向请求的特点，注定了如果服务器又连续的变化，客户端想知道就很麻烦，只能使用轮询（每隔一段时间，就发出一个询问，了解服务器有没有新的消息，例如聊天室）效率低，浪费资源，（因为必须不停的链接，或者http链接始终打开）），websocket就是为了解决it。

14、为什么在vue中会用到虚拟dom？

①比真实dom体积小，操作相对来说消耗的性能少，如果在一个页面删除一个dom,会引起重绘，影响后面元素的布局，而虚拟dom不会引起重绘和回流；

②虚拟dom进行频繁的修改，然后一次性比较并修改真实dom中需要改的部分，并且在真实dom中进行回流和重绘，减少过多dom节点的回流和重绘。