今日份牛客刷面试错题总结

奇安信2019春招前端开发试题

一些基础知识细节题目：

• 关于无障碍性的role属性，role属性是供给有障碍人士使用的，加在标签中可以告知有障碍人士的使用的专门应用，role属性所在的元素扮演着什么样角色。一般标签中不经常使用role属性，因为现在html5已经提供了语义化。使用场景一般是在表单中，给表单语义不明确的标签添加role属性。

完整内容可以看看这位网友的总结：https://blog.csdn.net/annip/article/details/53455226

• tabindex 属性用来指定使用键盘访问该元素的快捷键。

• form 元素的enctype属性

1. enctype属性在get请求中会被忽略，在post请求中才有效
2. application/x-www-form-urlencoded表示会对特殊字符进行转义
3. text/plain 以文本的形式进行编码，不会对特殊字符进行编码
4. multipart/form-data向服务器发送二进制文件的时候有用，例如提交文件

• 让一个元素内的文字永远在一行内显示（文字很长时也不会换行）
  word-break:keep-all; /* 不换行 /
  white-space:nowrap; / 不换行 /
  overflow:hidden; / 内容超出宽度时隐藏超出部分的内容 /
  text-overflow:ellipsis; / 溢出时显示省略标记…；需要与overflow:hidden;一起使用*/

• padding不可以为负值，可以为负值的是margin

• PostCSS：转换CSS的工具
  BEM：命名规范block-name__element-name–modifier-name，也就是模块名 + 元素名 + 修饰器名，以保证命名不会冲突
  LESS、SASS都是CSS预处理器

HTML5 Canvas 性能优化：

1.将渲染阶段的开销转嫁到计算阶段之上
2.使用多个分层的 Canvas 绘制复杂场景
3.不要频繁设置绘图上下文的 font 属性
4.不在动画中使用 putImageData 方法
5.通过计算和判断，避免无谓的绘制操作
6.将固定的内容预先绘制在离屏 Canvas 上以提高性能
7.使用 Worker 和拆分任务的方法避免复杂算法阻塞动画运行

具体内容可以看看这位网友的文章：https://blog.csdn.net/weixin_33940102/article/details/90687163?depth_1-utm_source=distribute.pc_relevant.none-task&utm_source=distribute.pc_relevant.none-task

解析：
A选项：Canvas绘图中只有一个元素-canvas，每一个图形/图像都不是元素，不能直接进行事件绑定。而SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的，可以为某个元素附加 JavaScript 事件处理器。
B选项：SVG 是一种使用 XML 描述 2D 图形的语言。
D选项：SVG更适合静态图片的展示。

JS :

A选项：比较的是字符编码，返回false
B选项： NaN代表的是一个本来要返回数值的操作数未返回数值，它与任何值都不相等
D选项：tyoeof操作符返回的值是数据类型的字符串表达，返回的是’Object’

扩展：判断的方法
①　typeof :返回数据类型的字符串表达。注意，它无法区分null 和 object , array 和object。
②　instanceof :返回布尔值，可以判具体的类型，A instanceof B ：A是否为B的实例。
③　“= = = ”和“= =”: 区别在于前者不会发生强制类型转换，后者会。

结果：a, b, c
解析：

• 在使用for-in循环时，返回的是所有能够通过对象访问的、可枚举的（enumerable）属性，其中既包括存在于实例中的属性，也包括存在于原型中的属性。

• 可枚举性（enumerable）用来控制所描述的属性，是否将被包括在for…in循环之中。具体来说，如果一个属性的enumerable为false，下面三个操作不会取到该属性。

• for…in循环 ：只遍历对象自身的和继承的可枚举的属性
• Object.keys方法 ：返回对象自身的所有可枚举的属性的键名
• JSON.stringify方法：只串行化对象自身的可枚举的属性

具体可以到这篇博文了解：https://www.cnblogs.com/1571523732-qq/p/10071656.html

• 阻止事件的冒泡：
  preventDefault() 阻止事件默认行为
  stopPropagation() W3C标准的阻止冒泡
  cancelBubble() ie的阻止冒泡

• RequireJS 不是 JavaScript 模块化规范。

B选项：const没有变量提升机制，但是会形成暂时性死区，也即在const声明之前使用声明变量会报错。
C选项：const实质只是规定声明变量的内容不被改变，对于引用类型的对象，变量存的是指针，只要不改动指针，改对象的属性是可以的。
D选项：var声明全局变量会注册到window对象上，但是let和const不会。

答案：inner, outer, body
解析：
事件的传递分为三个阶段-------事件捕获，目标事件，事件冒泡。事件冒泡事件开始由最具体的元素接受，而添加监听器方法的第三个参数没写，这里默认就是冒泡（第三个参数一般是会用来取消默认事件），所以这里由内往外走，就是inner,outer,body。

• Symbol（）都是独一无二的

其它：

选项A：localStorage 属性允许你访问一个Document 源（origin）的对象 Storage；存储的数据将保存在浏览器会话中。localStorage 类似 sessionStorage，但其区别在于：存储在 localStorage 的数据可以长期保留；而当页面会话结束——也就是说，当页面被关闭时，存储在 sessionStorage 的数据会被清除 。

选项B：Cookie 是一些数据, 存储于你电脑上的文本文件中。
选项C：IndexedDB 是一种底层 API，用于在客户端存储大量的结构化数据
选项D：fetch是一种HTTP数据请求的方式。

• 如果不定义cookie的过期时间，那么cookie 的过期时间就会是会话期间，也就是说，此时的cookie是和sesstion等效的，唯一的不同是此种cookie是存储在客户端的内存中，Session是存储在服务器端的内存中。

A选项：Last-Modified：缓存的一种弱校验器。说它弱是因为它只能精确到一秒。如果响应头里含有这个信息，客户端可以在后续的请求中带上 If-Modified-Since 来验证缓存。
C选项：HTTP/1.1定义的 Cache-Control 头用来区分对缓存机制的支持情况， 请求头和响应头都支持这个属性。
D选项：Etag：缓存的一种强校验器。如果资源请求的响应头里含有ETag, 客户端可以在后续的请求的头中带上 If-None-Match 头来验证缓存。