玄武科技——前端面试题总结

简答题（每题5分）：
1、label标签是什么，for和accesskey属性有什么用？

label标签是一种常见的表单控件。它的作用是使用户在填写表单的项目时有更好的体验。

label标签的关联方式主要有两种，显示关联和隐式关联

//显示关联   for属性的值与id值一样，表示关联
<form><label for="male">Male</label><input type="radio" name="sex" id="male" /><br /><label for="female">Female</label><input type="radio" name="sex" id="female" /></form>

隐式关联：是直接将表单控件放到label标签内，这种情况下，label标签只能包含一个表单元素，包含多个只对第一个有效。

<label>点击我可以使文本框获得焦点<input type='text' name='theinput' id='theinput'>
</label>

accesskey属性：
例如作用在元素上：
<div accesskey="1">自定义快捷访问</div>
这里的属性值 ‘1’ 对应的就是键盘上的数字 1 ，虽然说 accesskey 属性值和键盘相对应，但并不是说直接按下这个键，就能快捷访问。浏览器是通过快捷键组合访问的形式进行页面元素的快速访问的。
ie和Google都是“ALT+key”启动
火狐浏览器要“Ctrl+alt+key”才能启动

2、盒子模型
3、null和undefined的区别

undefined是一个表示"无"的原始值，转为数值时为NaN
变量被声明了，但没有赋值时，就等于undefined
调用函数时，应该提供的参数没有提供，该参数等于undefined
对象没有赋值的属性，该属性的值为undefined
函数没有返回值时，默认返回undefined

null是一个表示"无"的对象，
转为数值时为0 作为函数的参数，表示该函数的参数不是对象
作为对象原型链的终点

4、闭包及使用的场景

闭包就是能够读取其他函数内部变量的函数。闭包可以简单理解成“定义在一个函数内部的函数“。

5、三个存储的区别
6、this如何工作

this指向的情况，取决于函数调用的方式有哪些：

通过函数名()直接调用的：this指向window 通过对象.函数名()调用的：this指向这个对象；
函数作为数组的一个元素，通过数组下标调用的：this指向这个数组
函数作为window内置函数的回调函数调用时：this指window.setTimeout(func,XXms);setInterval(func,XXms)等
函数作为构造函数，用new关键字调用时：this指向的是new出的新对象通过函数指定，apply()\call()\bind()
方法指定this 箭头函数中的this问题，指向为定义时的this，而不是执行时的this

7、什么是跨域：跨域，指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器施加的安全限制。


## 跨域解决方案通过jsonp跨域document.domain + iframe跨域location.hash + iframewindow.name + iframe跨域postMessage跨域跨域资源共享（CORS）nginx代理跨域nodejs中间件代理跨域WebSocket协议跨域

8、常见状态码及含义

成功2×× 成功处理了请求的状态码。
200 服务器已成功处理了请求并提供了请求的网页。
204 服务器成功处理了请求，但没有返回任何内容。
重定向3×× 每次请求中使用重定向不要超过 5 次。
301 请求的网页已永久移动到新位置。当URLs发生变化时，使用301代码。搜索引擎索引中保存新的URL。
302 请求的网页临时移动到新位置。搜索引擎索引中保存原来的URL。
304 如果网页自请求者上次请求后没有更新，则用304代码告诉搜索引擎机器人，可节省带宽和开销。
客户端错误4×× 表示请求可能出错，妨碍了服务器的处理。
400 服务器不理解请求的语法。
403 服务器拒绝请求。
404 服务器找不到请求的网页。服务器上不存在的网页经常会返回此代码。
410 请求的资源永久删除后，服务器返回此响应。该代码与 404（未找到）代码相似，但在资源以前存在而现在不存在的情况下，有时用来替代404 代码。如果资源已永久删除，应当使用 301 指定资源的新位置。
服务器错误5×× 表示服务器在处理请求时发生内部错误。这些错误可能是服务器本身的错误，而不是请求出错。
500 服务器遇到错误，无法完成请求。
503 服务器目前无法使用（由于超载或停机维护）。通常，这只是暂时状态。

9、reflow和repaint

repaint就是重绘，reflow就是回流
严重性：在性能优先的前提下，reflow的性能消耗要比repaint的大

10、 JSONP使用场景

1、在RPC远程调用时,或者提供给外部访问接口，一般数据交互格式通常为JSON
2、例如提供移动APP接口
3、前端ajax异步访问数据
4、项目合作时提供外部访问接口等。

11、如何优化网站

大题（每题10分）

-手写快速排序算法

function quickSort(arr){if(arr.length == 0){return [];}var left = [];var right = [];var selectItem = arr[0];for(var i = 1; i < arr.length; i++){if(arr[i] < selectItem){left.push(arr[i]);} else{right.push(arr[i]);}}return quickSort(left).concat(selectItem, quickSort(right));
}

-说一下vuex，讲一下他的使用场景和解决痛点

Vuex是一个专为vue.js应用程序开发的状态管理模式。
当我们构建一个中大型的单页面应用程序时，Vuex可以更好的帮助我们在组件外部统一管理状态。

-一次完整的http的事务过程

1、域名解析

2、发起TCP的三次握手

3、建立TCP连接后发起http请求

4、服务器端响应http请求，浏览器得到html码

5、浏览器解析html代码，并请求html代码中的资源

6、浏览器对页面进行渲染并呈现给客户

玄武科技——前端面试题总结相关推荐

2017年商汤科技前端面试题
我是10.12在现场宣讲做的笔试,好像商汤都是如此吧.过了好久,才收到面试邀请,目前看来一般商汤会有五面. 一面: 自我介绍给各项技能html css js打个分(后面好像针对最高和最低分别问) h ...
【前端】前端面试题整理
前端和计算机相关知识你能描述一下渐进增强和优雅降级之间的不同吗浏览器兼容问题如何对网站的文件和资源进行优化? 怎么学习前端?怎么接触前端新知识? 关于前后端分离关于浏览器内核(渲染引擎) 浏览 ...
金三银四，磨砺锋芒；剑指大厂，扬帆起航（2020年最全大厂WEB前端面试题精选）上
引言元旦匆匆而过,2020年的春节又接踵而来,大家除了忙的提着裤子加班.年底冲冲冲外,还有着对于明年的迷茫和期待!2019年有多少苦涩心酸,2020年就有更多幸福美好,加油,奥利给!怀着一颗积极向上 ...
「前端面试题系列7」Javascript 中的事件机制（从原生到框架）
前言这是前端面试题系列的第 7 篇,你可能错过了前面的篇章,可以在这里找到: 理解函数的柯里化 ES6 中箭头函数的用法 this 的原理以及用法伪类与伪元素的区别及实战如何实现一个圣杯布局? ...
前端面试题整理（定期更新）
前言因为面试的原因,最近又开始关注前端面试题,浏览过网上很多面试题集合,有很多小伙伴整理的很全面,但是我发现其中有很多技术点在当下已不再流行,而面试题一般都是映射开发中常遇到的一些技能和问题,再结合 ...
JavaScript中的load事件的作用_史上最全的web前端面试题汇总及答案JavaScript之二（二）...
作者:樱桃小丸子儿链接:https://www.jianshu.com/p/abadcc84e2a4 JavaScript JS的基本数据类型 number,string,boolean,objec ...
noah的前端面试题（三）｜掘金技术征文
上一篇前端面试题(二) 1.JavaScript对于cookie的读.写操作写入 cookie function setCookie(cName, cValue, days) { var expi ...
应届生web前端面试题_2020最新Web前端经典面试题试题及答案（持续更新）
Web前端面试题 Web前端面试题:说说你对webpack的看法解析:webpack是一个模块打包工具,可以使用webpack管理你的模块依赖,并编译输出模块们所需要的静态文件.能很好的管理.打包w ...
前端面试题（html篇）
前端面试题(html篇) 转载于:https://www.cnblogs.com/mc67/p/5311613.html

玄武科技——前端面试题总结

玄武科技——前端面试题总结相关推荐

最新文章

热门文章