2019前端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。优先级：浏览器默认设置<用户设置<外部样式<内联样式<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以上才能被识别，而link是XHTML标签，无兼容问题。

21.this对象的理解；

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