2019最新前端面试题及答案

版权声明：本文为博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。 本文链接：https://blog.csdn.net/Peng_wl/article/details/94383068

1.如何用原生js给一个按钮绑定两个onclick事件？
q：btn.addEventListener("click",hello);

2.document.write和innerHTML的区别；
q：document.write是直接写入到页面的内容流，会导致页面被重写。innerHTML将内容写入某个DOM节点，不会导致页面全部重绘；

3.ajax的步骤；
q：(1) 创建XMLHttpRequest对象,也就是创建一个异步调用对象. 
??
      (2) 创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息. 
??
      (3)设置响应HTTP请求状态变化的函数. 
??
      (4)发送HTTP请求. 
??
      (5)获取异步调用返回的数据. 
??
      (6)使用JavaScript和DOM实现局部刷新.

4.xml和json的区别；
q：json数据体积小，传递速度快，JSON与JavaScript的交互更加方便，更容易解析处理，更好的数据交互，XML对数据描述性比较好；

5.清楚浮动的方法；（常见）
q：(1).父级div定义 height ;(如果高度和父级div不一样时，会产生问题)
      (2).结尾处加空div标签 clear:both;
      (2).父级div定义 伪类:after 和 zoom;(IE8以上和非IE浏览器才支持:after)
      (2).父级div定义 overflow:hidden;(不能和position配合使用)

6.box-sizing常用的属性;
q：· box-sizing：content-box；(默认属性值，W3C)
      · box-sizing：border-box;(IE盒模型)
      · box-sizing：inherit;
(box-sizing属性在FireFox中存在兼容问题，所以需要使用-moz-box-sizing做一下兼容)

7.undefined 和 null 区别；
q：null： Null类型，代表“空值”代表一个空对象指针，使用typeof运算得到 “object”
     undefined： Undefined类型，当一个声明了一个变量未初始化时，得到的就是undefined。(null 和 undefined 都表示“值的空缺”，你可以认为undefined是表示系统级的、出乎意料的或类似错误的值的空缺，而null是表示程序级的、正常的或在意料之中的值的空缺。)

8.常见的HTTP状态码；
q：2开头 （请求成功）、3开头 （请求被重定向）、4开头 （请求错误）、5开头（服务器错误）

9.网站性能优化；
q：1. JavaScript 压缩和模块打包

      2. 按需加载资源

      3. 缓存

      4. 使用索引加速数据库查询

      5. 使用更快的转译方案

      6. 避免或最小化 JavaScript 和 CSS 的使用而阻塞渲染

      7. 图片编码优化

10.JS哪些操作会造成内存泄露；
q：1）意外的全局变量引起的内存泄露；
      2）闭包引起的内存泄露；
      3）没有清理的DOM元素引用；
      4）被遗忘的定时器或者回调；
      5）子元素存在引起的内存泄露；

11.什么是闭包，如何使用它，为什么要使用它；
q：闭包就是能够读取其他函数内部变量的函数。由于在Javascript语言中，只有函数内部的子函数才能读取局部变量，因此可以把闭包简单理解成“定义在一个函数内部的函数”；由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露。解决方法是，在退出函数之前，将不使用的局部变量全部删除。

12.JavaScript的同源策略；
q：同源策略规定跨域之间的脚本是隔离的，一个域的脚本不能访问和操作另外一个域的绝大部分属性和方法。

13.浏览器是如何渲染页面的；
q：1.解析HTML文件，创建DOM树。

? ?自上而下，遇到任何样式（link、style）与脚本（script）都会阻塞（外部样式不阻塞后续外部脚本的加载）。

     2.解析CSS。优先级：浏览器默认设置<用户设置<外部样式<内联样式<HTML中的style样式；

     3.将CSS与DOM合并，构建渲染树（Render Tree）；

     4.布局和绘制，重绘（repaint）和重排（reflow）；

14.从输入url到显示页面，都经历了什么；
q：1、首先，在浏览器地址栏中输入url

      2、浏览器先查看浏览器缓存-系统缓存-路由器缓存，如果缓存中有，会直接在屏幕中显示页面内容。若没有，则跳到第三步操作。

      3、在发送http请求前，需要域名解析(DNS解析)，解析获取相应的IP地址。

      4、浏览器向服务器发起tcp连接，与浏览器建立tcp三次握手。（TCP即传输控制协议。TCP连接是互联网连接协议集的一种。）

      5、握手成功后，浏览器向服务器发送http请求，请求数据包。

      6、服务器处理收到的请求，将数据返回至浏览器

      7、浏览器收到HTTP响应

      8、读取页面内容，浏览器渲染，解析html源码

      9、生成Dom树、解析css样式、js交互

      10、客户端和服务器交互

      11、ajax查询

15.对<meta></meta>标签有什么理解，meta的作用
q：可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务；meta里的数据是供机器解读的，告诉机器该如何解析这个页面，还有一个用途是可以添加服务器发送到浏览器的http头部内容

16.怎么去设计一个组件封装；
q：1)组件封装的目的是为了重用，提高开发效率和代码质量
      2)低耦合，单一职责，可复用性，可维护性
      3)前端组件化设计思路

17.线程，进程
q： 1)线程是最小的执行单元，进程是最小的资源管理单元
       2)一个线程只能属于一个进程，而一个进程可以有多个线程，但至少有一个线程

18.vue数据的双向数据绑定；
q：vue数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。

19.get与post 通讯的区别；
q：1).Get 请求能缓存，Post 不能；
      2).Post 相对 Get 安全一点点，因为Get 请求都包含在 URL 里，且会被浏览器保存历史纪录，Post 不会，但是在抓包的情况下都是一样的；
      3).Post 可以通过 request body来传输比 Get 更多的数据，Get 没有这个技术；
      4).URL有长度限制，会影响 Get 请求，但是这个长度限制是浏览器规定的，不是 RFC 规定的；
      5).Post 支持更多的编码类型且不对数据类型限制；

20.页面导入样式时，使用link和@import有什么区别；
q：（1）link属于XHTML标签，除了加载CSS外，还能用于定义RSS, 定义rel连接属性等作用；而@import是CSS提供的，只能用于加载CSS;
　  （2）页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;
　  （3）import是CSS2.1 提出的，只在IE5以上才能被识别，而lin 3ff7 k是XHTML标签，无兼容问题。

21.this对象的理解；
q：this总是指向函数的直接调用者（而非间接调用者）；
　  如果有new关键字，this指向new出来的那个对象；
　  在事件中，this指向触发这个事件的对象，特殊的是，IE中的attachEvent中的this总是指向全局对象Window。

22.eval是做什么的；
q：它的功能是把对应的字符串解析成JS代码并运行；
　　应该避免使用eval，不安全，非常耗性能（2次，一次解析成js语句，一次执行）。
　　由JSON字符串转换为JSON对象的时候可以用eval，var obj =eval('('+ str +')')。

23.--------------什么叫优雅降级和渐进增强-------------------
q：优雅降级：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。
　  渐进增强：针对低版本的浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的体验效果。

24.如果解决ajax无法后退的问题；
q：1).html5里引入了新的API，即：history.pushState,history.replaceState
      2).可以通过pushState和replaceSate接口浏览器历史，并且改变当前页面的URL
      3).onpopstate监听后退

25.事件委托；
q：利用冒泡原理，把事件加到父级上，触发执行效果
      可以大量节省内存占用，减少事件注册
      可以方便地动态添加和修改元素，不需要因为元素的改动而修改事件绑定

26.let和const的区别；
q：let声明的变量可以改变，值和类型都可以改变，没有限制；
      const声明的变量不得改变值；

27.常见的ES6语法；
q：let，const，箭头函数，字符串模板，class类，模块化，promise

28.介绍promise；
q：就是一个对象，用来传递异步操作的消息。有三种状态：pending(进行中)，resolved(已完成)和rejected(失败)
      有了promise对象，就可以将异步操作以同步操作的流程表示出来，避免了层层嵌套的回调函数

29.vue父子组件通信；
q：父组件是通过props属性给子组件通信，在子组件里面emit，在父组件监听；

30.移动端兼容问题；
q：IOS移动端click时间300ms的延迟响应；
      一些情况下对非可点击元素如（label,span）监听click时间，ios下不会触发，css增加cursor:poiner就搞定了；

31.cookie和session有什么联系和区别；
q：cookie数据存放在客户的浏览器上，session数据放在服务器上
      session比cookie更安全
      单个cookie保存的数据不能超过4k，很多浏览器都限制一个站点最多保存20个cookie
      一般用cookie来存储sessionid

32.移动端性能优化；
q：1_ 尽量使用css3动画，开启硬件加速
      2_ 适当使用touch事件代替click事件
      3_ 避免使用css3渐变阴影效果
      4_ 可以用transform: translateZ(0) 来开启硬件加速
      5_ 不滥用float。float在渲染时计算量比较大，尽量减少使用
      6_ 不滥用web字体。web字体需要下载，解析，重绘当前页面
      7_ 合理使用requestAnimationFrame动画代替setTimeout

33.Cookie的弊端；
q：　cookie虽然在持久保存客户端数据提供了方便，分担了服务器存储的负担，但是有很多局限性；
    第一：每个特定的域名下最多生成20个cookie
    第二：IE和Opera 会清理近期最少使用的cookie，Firefox会随机清理cookie

34.常见兼容性问题；
q：1_ png24位的图片在ie6浏览器上出现背景，解决方案是做成png8，也可以引用一段脚本处理；
      2_ 浏览器默认的margin和padding不同，解决方案是加一个全局的*{margin: 0;padding:0;}来统一；
      3_ IE6双边距BUG：块属性标签float后，又有横行的margin情况下，在ie6显示margin得比设置的大；
      4_ IE5-8不支持opacity；
      5_ IE6只支持a标签的:hover伪类；（使用js为元素监听mouseenter,mouseleave事件，添加类实现效果）
      6_ ol内的序号全为1，不递增；（为li设置样式display: list-item）