常见的前端21道面试题及答案

这篇文章运用简单易懂的例子给大家介绍常见的前端21道面试题及答案，代码非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。

公司主营业务：网站建设、网站设计、移动网站开发等业务。帮助企业客户真正实现互联网宣传，提高企业的竞争能力。创新互联是一支青春激扬、勤奋敬业、活力青春激扬、勤奋敬业、活力澎湃、和谐高效的团队。公司秉承以“开放、自由、严谨、自律”为核心的企业文化，感谢他们对我们的高要求，感谢他们从不同领域给我们带来的挑战，让我们激情的团队有机会用头脑与智慧不断的给客户带来惊喜。创新互联推出栖霞免费做网站回馈大家。

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。优先级：浏览器默认设置<用户设置<外部样式<内联样式     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的作用

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以上才能被识别，而link是XHTML标签，无兼容问题。

21.this对象的理解；

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

关于常见的前端21道面试题及答案就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。