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。

下一章:找工作必会的经典7大Python面试题!

Python面试(一)交换变量值实现一个简单的函数,交换两个变量的值,大多数的同学给出的都是如下的答案:实际上,Python中还有更简洁的更具Python风格的实现,如下:相比前一种方法,后一种方法 ...