你们为何如此相似

machinist_wq
222 阅读6分钟

前段时间比较闲，没事胡乱看突然想到了这些面试常问的比较性问题，权当是留个笔记吧欢迎补充！

opacity、visibility与display

opacity

DOM结构：opacity属性值为0时透明度为100%，元素隐藏，占据空间，opacity值为0到1，为1时显示元素。 事件监听：可以进行DOM事件监听。 性能：提升为合成层，不会引发重绘，性能较高。 继承：会被子元素继承，子元素不能通过设置opacity:1;来取消隐藏。。 transtion：opacity可以延时显示与隐藏。

visibility

DOM结构：元素被隐藏了，浏览器会渲染visibility属性为hidden的元素，占据空间，意思就是页面上有它的空间，在开发者模式中能选中那个元素。 事件监听：无法进行DOM事件监听。 性能：动态改变此属性时会引起重绘，性能较高。 继承：会被子元素继承，子元素通过设置visibility:visible;来显示自身，使子元素取消自身隐藏。 transtion：visibility会立即显示，隐藏时会延时。

display

DOM结构：浏览器不会渲染display属性为none的元素，不占据空间，意思就是页面上没有它的一席之地，你在开发者模式中选不中那个元素。 事件监听：无法进行DOM事件监听。 性能：动态改变此属性时会引起重排，性能较差。 继承：不会被子元素继承，因为子元素也不被渲染。 transtion过渡不支持display。

disabled与readonly

Readonly和Disabled是用在表单中的两个属性 共同点： 比如都设为true，则form属性将不能被编辑； 不同点：

  • 如果一个输入项的disabled设为true，则该表单输入项不能获取焦点，用户的所有操作（鼠标点击和键盘输入等）对该输入项都无效，最重要的一点是当提交表单时，这个表单输入项将不会被提交。
  • readonly只是针对文本输入框这类可以输入文本的输入项，如果设为true，用户只是不能编辑对应的文本，但是仍然可以聚焦焦点，并且在提交表单的时候，该输入项会作为form的一项提交。

axios与fetch

axios 与 fetch 某种程度上讲，并不是一个层面的

axios

  • axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，本质上也是对原生XHR的封装，只不过它是Promise的实现版本，符合最新的ES规范；

  • 从浏览器中创建 XMLHttpRequest

  • 支持 Promise API

  • 提供一些并发请求的接口（重要，方便了很多的操作）

  • 从 nodejs 创建 http 请求

  • 支持拦截请求和响应

  • 转换请求合响应数据

  • 支持取消请求

  • 自动转换JSON数据

  • 客户端支持防止 CSRF。

  • 客户端支持防御 XSRF。 因为是封装之后的，非要说什么缺点那只能说是需要安装并且对于原生的支持没有fetch那么好吧！

fetch

fetch是一个低层次的API，你可以把它考虑成原生的XHR，所以使用起来并不是那么舒服，需要进行封装。

优点：

  • 语法简洁，更加语义化
  • 基于标准 Promise 实现，支持 async/await
  • 更加底层，无需安装，提供丰富的API
  • 支持jsonp
  • 脱离了 XHR，是ES规范里新的实现方法

缺点：

  • fetch 只对网络请求报错，对于400,500都当做成功的请求，服务请返回400,500错误码时，并不会reject，只有网络错误这些导致请求不能完成时，fetch 才会被 reject
  • fetch 默认不会带 cookie，需要添加配置项：fetch（url,{credentials:'include'}）
  • fetch 不支持 abort，不支持超时控制，使用 setTimeout 及promise.reject的实现的超时控制并不能阻止请求过程继续在后台运行，造成了流量的浪费
  • fetch 没有办法原生监听请求的进度，而XHR可以
  • fetch 上传文件时，不支持进度检测

typeof、instanceof与{}.toString.call()

typeof

使用typeof可以判断基本数据类型，但对于对象（进一步区别数组，对象等）引用数据类型 就有局限性了，因为无论你怎么检测，输出都是object类型，比如Date类型、RegExp类型、Null类型，均会返回object类型；

instanceof

可以判断一个实例是否是某个对象的实例，判断已知对象类型的方法，可区分Date类型、RegExp类型、Null类型，但是判端这些类型是不是object类型的实例的时候一样也是成立的,比如[] instanceof Object同样会返回true；

{}.toString.call()

这是对象的一个原生原型扩展函数，用来精确的区分数据类型… toString方法的作用是返回一个对象的字符串形式，默认情况下返回类型字符串。

  • 数值：返回[object Number]。
  • 字符串：返回[object String]。
  • 布尔值：返回[object Boolean]。
  • undefined：返回[object Undefined]。
  • null：返回[object Null]。
  • 数组：返回[object Array]。
  • arguments对象：返回[object Arguments]。
  • 函数：返回[object Function]。
  • Error对象：返回[object Error]。
  • Date对象：返回[object Date]。
  • RegExp对象：返回[object RegExp]。
  • 其他对象：返回[object Object]。

hash与history

hash

  • hash模式较丑, url上带有#；

  • hash只可修改#后面的部分，故只可设置与当前同文档的URL；

  • hash设置的新值必须与原来不一样才会触发记录添加到栈中；

  • hash只可添加短字符串；

  • hash兼容IE8以上； history

  • history模式较优雅；

  • pushState设置的新URL可以是与当前URL同源的任意URL；

  • pushState设置的新URL可以与当前URL一模一样，这样也会把记录添加到栈中；

  • pushState通过stateObject可以添加任意类型的数据到记录中；

  • history兼容IE10以上；

  • history模式需要后端配合将所有访问都指向index.html，否则用户刷新页面，会导致404错误；

proxy与defineProperty

熟悉vue的应该对这两个属性不陌生，vue3升级的一个重要方面就是将原来的响应式数据的处理方式由defineProperty转换成proxy，不在需要遍历处理，从而提升性能；（更深的等回头在补充吧，正好最近在学习vue3.x的源码先欠着 呵呵）

canvas与svg

canvas

  • 依赖分辨率;
  • 不支持事件处理器;
  • 弱的文本渲染能力;
  • 能够以 .png 或 .jpg 格式保存结果图像;
  • 最适合图像密集型的游戏，其中的许多对象会被频繁重绘;
  • Canvas 通过 JavaScript 来绘制 2D 图形;
  • Canvas 是逐像素进行渲染的;
  • 在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象;

svg

  • 不依赖分辨率;
  • 支持事件处理器;
  • 最适合带有大型渲染区域的应用程序（比如谷歌地图）;
  • 复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）;
  • 不适合游戏应用;
  • SVG 是一种使用 XML 描述 2D 图形的语言。;
  • SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器;
  • 在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形;
avatar
文章
阅读
粉丝