常见的前端21道面试题及答案-创新互联
创新互联www.cdcxhl.cn八线动态BGP香港云服务器提供商,新人活动买多久送多久,划算不套路!
创新互联建站坚持“要么做到,要么别承诺”的工作理念,服务领域包括:网站建设、成都网站建设、企业官网、英文网站、手机端网站、网站推广等服务,满足客户于互联网时代的陕州网站设计、移动媒体设计的需求,帮助企业找到有效的互联网解决方案。努力成为您成熟可靠的网络建设合作伙伴!这篇文章运用简单易懂的例子给大家介绍常见的前端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。优先级:浏览器默认设置<用户设置<外部样式<内联样式
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道面试题及答案就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。
分享标题:常见的前端21道面试题及答案-创新互联
网页地址:http://myzitong.com/article/ddpoig.html