前端常用面试题

1.document.write和innerHTML的区别；

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

2.ajax的步骤；

 答：(1) 创建XMLHttpRequest对象,也就是创建一个异步调用对象. 

      (2) 创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息. 

      (3)设置响应HTTP请求状态变化的函数. 

      (4)发送HTTP请求. 

      (5)获取异步调用返回的数据. 

      (6)使用JavaScript和DOM实现局部刷新.

3.xml和json的区别；

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

4.清楚浮动的几种方法；

 答：(1).父级div定义 height ;(如果高度和父级div不一样时，会产生问题)

      (2).结尾处加空div标签 clear:both;

      (2).父级div定义 伪类:after 和 zoom;(IE8以上和非IE浏览器才支持:after)

      (2).父级div定义 overflow:hidden;(不能和position配合使用)

5.box-sizing常用的属性;

 答：· box-sizing：content-box；(默认属性值，W3C)

      · box-sizing：border-box;(IE盒模型)

      · box-sizing：inherit;

(box-sizing属性在FireFox中存在兼容问题，所以需要使用-moz-box-sizing做一下兼容)

6.常见的ES6语法；

 答：let，const，箭头函数，字符串模板，class类，模块化，promise

7.undefined 和 null 区别；

 答：null： Null类型，代表“空值”代表一个空对象指针，使用typeof运算得到 “object”

     undefined： Undefined类型，当一个声明了一个变量未初始化时，得到的就是undefined。(null 和 undefined 都表示“值的空缺”，你可以认为undefined是表示系统级的、出乎意料的或类似错误的值的空缺，而null是表示程序级的、正常的或在意料之中的值的空缺。)

8.常见的HTTP状态码；

 答：2开头 （请求成功）、3开头 （请求被重定向）、4开头 （请求错误）、5开头（服务器错误）

9.网站性能优化；

 答：1. JavaScript 压缩和模块打包

      2. 按需加载资源

      3. 缓存

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

      5. 使用更快的转译方案

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

      7. 图片编码优化

10.JS哪些操作会造成内存泄露；

 答：1）意外的全局变量引起的内存泄露；

      2）闭包引起的内存泄露；

      3）没有清理的DOM元素引用；

      4）被遗忘的定时器或者回调；

      5）子元素存在引起的内存泄露；

11.什么是闭包，如何使用它，为什么要使用它；

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

12.JavaScript的同源策略；

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

13.浏览器是如何渲染页面的；

 答：1.解析HTML文件，创建DOM树。自上而下，遇到任何样式（link、style）与脚本（script）都会阻塞（外部样式不阻塞后续外部脚本的加载）。

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

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

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

14.从输入url到显示页面，都经历了什么；

 答：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的作用

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

16.怎么去设计一个组件封装；

 答：1)组件封装的目的是为了重用，提高开发效率和代码质量

      2)低耦合，单一职责，可复用性，可维护性

      3)前端组件化设计思路

17.线程，进程

 答： 1)线程是最小的执行单元，进程是最小的资源管理单元

       2)一个线程只能属于一个进程，而一个进程可以有多个线程，但至少有一个线程

18.vue数据的双向数据绑定；

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

19.get与post 通讯的区别；

 答：1).Get 请求能缓存，Post 不能；

      2).Post 相对 Get 安全一点点，因为Get 请求都包含在 URL 里，且会被浏览器保存历史纪录，Post 不会，但是在抓包的情况下都是一样的；

      3).Post 可以通过 request body来传输比 Get 更多的数据，Get 没有这个技术；

      4).URL有长度限制，会影响 Get 请求，但是这个长度限制是浏览器规定的，不是 RFC 规定的；

      5).Post 支持更多的编码类型且不对数据类型限制；

20.页面导入样式时，使用link和@import有什么区别；

 答：（1）link属于XHTML标签，除了加载CSS外，还能用于定义RSS, 定义rel连接属性等作用；而@import是CSS提供的，只能用于加载CSS;

　  （2）页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;

　  （3）import是CSS2.1 提出的，只在IE5以上才能被识别，而link是XHTML标签，无兼容问题。

21.this对象的理解；

 答：this总是指向函数的直接调用者（而非间接调用者）；

　  如果有new关键字，this指向new出来的那个对象；

　  在事件中，this指向触发这个事件的对象，特殊的是，IE中的attachEvent中的this总是指向全局对象Window。

22.eval是做什么的；

 答：它的功能是把对应的字符串解析成JS代码并运行；

　　应该避免使用eval，不安全，非常耗性能（2次，一次解析成js语句，一次执行）。

　　由JSON字符串转换为JSON对象的时候可以用eval，var obj =eval('('+ str +')')。

23.--------------什么叫优雅降级和渐进增强-------------------

 答：优雅降级：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

　  渐进增强：针对低版本的浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的体验效果。

24.如果解决ajax无法后退的问题；

 答：1).html5里引入了新的API，即：history.pushState,history.replaceState

      2).可以通过pushState和replaceSate接口浏览器历史，并且改变当前页面的URL

      3).onpopstate监听后退

25.事件委托；

 答：利用冒泡原理，把事件加到父级上，触发执行效果

      可以大量节省内存占用，减少事件注册

      可以方便地动态添加和修改元素，不需要因为元素的改动而修改事件绑定

26.let和const的区别；

 答：let声明的变量可以改变，值和类型都可以改变，没有限制；

      const声明的变量不得改变值；

27.Cookie的弊端；

 答：　cookie虽然在持久保存客户端数据提供了方便，分担了服务器存储的负担，但是有很多局限性；

    第一：每个特定的域名下最多生成20个cookie

    第二：IE和Opera 会清理近期最少使用的cookie，Firefox会随机清理cookie

28.介绍promise；

 答：就是一个对象，用来传递异步操作的消息。有三种状态：pending(进行中)，resolved(已完成)和rejected(失败)

      有了promise对象，就可以将异步操作以同步操作的流程表示出来，避免了层层嵌套的回调函数

29.vue父子组件通信；

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

30.移动端兼容问题；

 答：IOS移动端click时间300ms的延迟响应；

      一些情况下对非可点击元素如（label,span）监听click时间，ios下不会触发，css增加cursor:poiner就搞定了；

31.cookie和session有什么联系和区别；

 答：cookie数据存放在客户的浏览器上，session数据放在服务器上

      session比cookie更安全

      单个cookie保存的数据不能超过4k，很多浏览器都限制一个站点最多保存20个cookie

      一般用cookie来存储sessionid

32.移动端性能优化；

 答：1_ 尽量使用css3动画，开启硬件加速

      2_ 适当使用touch事件代替click事件

      3_ 避免使用css3渐变阴影效果

      4_ 可以用transform: translateZ(0) 来开启硬件加速

      5_ 不滥用float。float在渲染时计算量比较大，尽量减少使用

      6_ 不滥用web字体。web字体需要下载，解析，重绘当前页面

      7_ 合理使用requestAnimationFrame动画代替setTimeout

33.常见兼容性问题；

 答：1_ png24位的图片在ie6浏览器上出现背景，解决方案是做成png8，也可以引用一段脚本处理；

      2_ 浏览器默认的margin和padding不同，解决方案是加一个全局的*{margin: 0;padding:0;}来统一；

      3_ IE5-8不支持opacity；

      4_ ol内的序号全为1，不递增；（为li设置样式display: list-item）

版权声明：本文为CSDN博主「树尚」的原创文章，稍作修改， 原文链接：https://blog.csdn.net/Peng_wl/article/details/94383068