前端面试题(JS篇五)

一、同步与异步的区别

同步指的是当一个进程在执行某一个请求的时候,如果这个请求需要等待一段时间才能返回,那么这个进程会一直等待下去,直到这个消息返回之后才会继续执行。

指的是当一个进程在执行某一个请求的时候,如果这个请求需要等待一段时间才能返回,这时候进程会继续进行下去,不会阻塞等待消息的返回,当消息返回时系统在通知进程进行处理。

简单而言,同步就是你做一件事情,必须要等你将手头的事情做完才能做下一件事,异步就相当于点外卖一样,你点完外卖之后可以去干其他事情。

资料参考:

《同步和异步的区别》icon-default.png?t=N7T8https://blog.csdn.net/tennysonsky/article/details/45111623

二、如何解决跨域问题?

相关知识点:

  • 通过 jsonp 跨域
  • document.domain + iframe 跨域
  • location.hash + iframe
  • window.name + iframe 跨域
  • postMessage 跨域
  • 跨域资源共享(CORS)
  • nginx 代理跨域
  • nodejs 中间件代理跨域
  • WebSocket 协议跨域

回答:

解决跨域的方法我们可以根据我们想要实现的目的来划分。

首先我们如果只是想要实现主域名下的不同子域名的跨域操作,我们可以使用设置 document.domain 来解决。

(1)将 document.domain 设置为主域名,来实现相同子域名的跨域操作,这个时候主域名下的 cookie 就能够被子域名所访问。同时如果文档中含有主域名相同,子域名不同的 iframe 的话,我们也可以对这个 iframe 进行操作。

如果是想要解决不同跨域窗口间的通信问题,比如说一个页面想要和页面的中的不同源的 iframe 进行通信的问题,我们可以使用 location.hash 或者 window.name 或者 postMessage 来解决。

(2)使用 location.hash 的方法,我们可以在主页面动态的修改 iframe 窗口的 hash 值,然后在 iframe 窗口里实现监听函数来实现这样一个单向的通信。因为在 iframe 是没有办法访问到不同源的父级窗口的,所以我们不能直接修改父级窗口的 hash 值来实现通信,我们可以在 iframe 中再加入一个 iframe ,这个 iframe 的内容是和父级页面同源的,所以我们可以 window.parent.parent 来修改最顶级页面的 src,以此来实现双向通信。

(3)使用 window.name 的方法,主要是基于同一个窗口中设置了 window.name 后不同源的页面也可以访问,所以不同源的子页面可以首先在 window.name 中写入数据,然后跳转到一个和父级同源的页面。这个时候级页面就可以访问同源的子页面中 window.name 中的数据了,这种方式的好处是可以传输的数据量大。

(4)使用 postMessage 来解决的方法,这是一个 h5 中新增的一个 api。通过它我们可以实现多窗口间的信息传递,通过获取到指定窗口的引用,然后调用 postMessage 来发送信息,在窗口中我们通过对 message 信息的监听来接收信息,以此来实现不同源间的信息交换。

如果是像解决 ajax 无法提交跨域请求的问题,我们可以使用 jsonp、cors、websocket 协议、服务器代理来解决问题。

(5)使用 jsonp 来实现跨域请求,它的主要原理是通过动态构建 script  标签来实现跨域请求,因为浏览器对 script 标签的引入没有跨域的访问限制 。通过在请求的 url 后指定一个回调函数,然后服务器在返回数据的时候,构建一个 json 数据的包装,这个包装就是回调函数,然后返回给前端,前端接收到数据后,因为请求的是脚本文件,所以会直接执行,这样我们先前定义好的回调函数就可以被调用,从而实现了跨域请求的处理。这种方式只能用于 get 请求。

(6)使用 CORS 的方式,CORS 是一个 W3C 标准,全称是"跨域资源共享"。CORS 需要浏览器和服务器同时支持。目前,所有浏览器都支持该功能,因此我们只需要在服务器端配置就行。浏览器将 CORS 请求分成两类:简单请求和非简单请求。对于简单请求,浏览器直接发出 CORS 请求。具体来说,就是会在头信息之中,增加一个 Origin 字段。Origin 字段用来说明本次请求来自哪个源。服务器根据这个值,决定是否同意这次请求。对于如果 Origin 指定的源,不在许可范围内,服务器会返回一个正常的 HTTP 回应。浏览器发现,这个回应的头信息没有包含 Access-Control-Allow-Origin 字段,就知道出错了,从而抛出一个错误,ajax 不会收到响应信息。如果成功的话会包含一些以 Access-Control- 开头的字段。

非简单请求,浏览器会先发出一次预检请求,来判断该域名是否在服务器的白名单中,如果收到肯定回复后才会发起请求。

(7)使用 websocket 协议,这个协议没有同源限制。

(8)使用服务器来代理跨域的访问请求,就是有跨域的请求操作时发送请求给后端,让后端代为请求,然后最后将获取的结果发返回。

资料参考:

《前端常见跨域解决方案(全)》icon-default.png?t=N7T8https://segmentfault.com/a/1190000011145364 《浏览器同源政策及其规避方法》icon-default.png?t=N7T8http://www.ruanyifeng.com/blog/2016/04/same-origin-policy.html

《跨域,你需要知道的全在这里》icon-default.png?t=N7T8https://juejin.im/entry/59feae9df265da43094488f6 《为什么 form 表单提交没有跨域问题,但 ajax 提交有跨域问题?》icon-default.png?t=N7T8https://www.zhihu.com/question/31592553

三、ES6 模块与 CommonJS 模块、AMD、CMD 的差异。

CommonJS 模块输出的是一个值的拷贝,ES6 模块输出的是值的引用。CommonJS 模块输出的是值的拷贝,也就是说,一旦输出一个值,模块内部的变化就影响不到这个值。ES6 模块的运行机制与 CommonJS 不一样。JS 引擎对脚本静态分析的时候,遇到模块加载命令 import,就会生成一个只读引用。等到脚本真正执行时,再根据这个只读引用,到被加载的那个模块里面去取值。

CommonJS 模块是运行时加载,ES6 模块是编译时输出接口。CommonJS 模块就是对象,即在输入时是先加载整个模块,生成一个对象,然后再从这个对象上面读取方法,这种加载称为“运行时加载”。而 ES6 模块不是对象,它的对外接口只是一种静态定义,在代码静态解析阶段就会生成。

四、documen.write 和 innerHTML 的区别?

document.write 的内容会代替整个文档内容,会重写整个页面。

innerHTML 的内容只是替代指定元素的内容,只会重写页面中的部分内容。

资料参考:

《简述 document.write 和 innerHTML 的区别。》icon-default.png?t=N7T8https://www.nowcoder.com/questionTerminal/2c5d8105b2694d85b06eff85e871cf50

五、Unicode 和 UTF-8 之间的关系?

Unicode 是一种字符集合,现在可容纳 100 多万个字符。每个字符对应一个不同的 Unicode 编码,它只规定了符号的二进制代码,却没有规定这个二进制代码在计算机中如何编码传输。

UTF-8 是一种对 Unicode 的编码方式,它是一种变长的编码方式,可以用 1~4 个字节来表示一个字符。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://xiahunao.cn/news/3248251.html

如若内容造成侵权/违法违规/事实不符,请联系瞎胡闹网进行投诉反馈,一经查实,立即删除!

相关文章

PSINS工具箱函数介绍——r2d

介绍工具箱里面r2d这个小函数的作用。 程序源码 function deg r2d(rad) % Convert angle unit from radian to degree % % Prototype: deg r2d(rad) % Input: rad - angle in radian(s) % Output: deg - angle in degree(s) % % See also r2dm, r2dms, d2r, dm2r, dms2r% …

电阻有哪些参数呢

电阻是电路中最常见的元件之一,它在控制电流、分压和保护电路等方面发挥着重要作用。了解电阻的主要参数对于选择和使用电阻至关重要。本文将详细介绍电阻的主要参数,包括电阻值、功率额定值、温度系数、容差、噪声、频率特性、体积和封装等。 1. 电阻值…

C语言中常见库函数(2)——内存函数

文章目录 1. memcpy使用和模拟实现2. memmove使用和模拟实现3. memset函数的使用4. memcmp函数的使用 1. memcpy使用和模拟实现 void * memcpy ( void * destination, const void * source, size_t num );函数memcpy从source的位置开始向后复制num个字节的数据到destination指…

MQ - RabbitMQ - 消息的可靠性 --学习笔记

消息的可靠性 RabbitMQ 提供了一系列的特性和机制来确保消息的可靠性,即确保消息不丢失、按需到达目的地。要实现在 RabbitMQ 中消息的可靠性,可通过以下几个方面进行操作: 一、发送者的可靠性 1、生产者重试机制 什么是生产者重试机制&a…

【Java开发实训】day05——数组常见算法

目录 一、数组翻转 1.1示例代码 1.2适用场景 二、冒泡排序 2.1示例代码 2.2适用场景 三、二分查找 3.1示例代码 3.2适用场景 🌈嗨!我是Filotimo__🌈。很高兴与大家相识,希望我的博客能对你有所帮助。 💡本文由Filotimo…

node解析Excel中的考试题并实现在线做题功能

1、背景 最近公司安排业务技能考试,下发excel文件的题库,在excel里查看并不是很方便,就想着像学习驾考题目一样,一边看一边做,做完之后可以查看正确答案。 2、开始分析需求 题目格式如下图 需求比较简单,…

【ROS2】高级:解锁 Fast DDS 中间件的潜力 [社区贡献]

目标:本教程将展示如何在 ROS 2 中使用 Fast DDS 的扩展配置功能。 教程级别:高级 时间:20 分钟 目录 背景 先决条件在同一个节点中混合同步和异步发布 创建具有发布者的节点创建包含配置文件的 XML 文件执行发布者节点创建一个包含订阅者的节…

视频号直播回放视频下载教程

前言: 随着视频号的不断普及,现在用户在视频号中观看直播和回放的人数逐渐的增多,但是很多时候视频号中的直播和直播回放是无法直接下载的,今天我就教大家如何下载视频号中的直播回放 在这里下载回放需要软件 地瓜网络技术视频…

解锁Vue警报的迷雾:攻克“TypeError: Cannot read property ‘getAttribute’ of null”的奥秘

在Vue.js的广阔天地里,开发者们常常会遇到各式各样的挑战与“小惊喜”。[Vue warn]: Error in mounted hook: “TypeError: Cannot read property ‘getAttribute’ of null”这一错误,就像是一位不速之客,冷不防地在你的代码世界中留下一串令…

51单片机STC89C52RC——18.1 HC-SR04超声波测距

目的/效果 独立按键K1按下后开始测距,LCD显示距离(mm) 一,STC单片机模块 二,HC-SR04 超声波测距 2.1 HC-SR04 简介 HC-SR04超声波测距模块提供2cm~400cm的测距功能,精度达3mm。 2.2 时序 以上时序图表明…

【GPT-4多态大模型研究】

1.概述 GPT-4是OpenAI最新的系统,能够产生更安全和更有用的回应。它是一个大型的多模态模型(接受图像和文本输入,输出文本),在各种专业和学术的基准测试中展现了人类水平的表现。例如,它在模拟的律师资格考…

Android 12系统源码_存储(二)StorageManagerService服务

前言 在 Android 系统中,StorageManagerService是一个用于获取存储设备信息和管理存储设备的服务。它提供了一系列方法,可以获取当前挂载的存储设备信息,以及对存储设备进行挂载和卸载操作。 一、Storage存储模块介绍 1.1、StorageManager…

Android 10.0 Launcher3拖拽图标进入hotseat自适应布局功能实现一

1.前言 在10.0的系统rom定制化开发中,在对于launcher3的一些开发定制中,在对hotseat的一些开发中,需要实现动态hotseat居中 的功能,就是在拖拽图标进入和拖出hotseat,都可以保持hotseat居中的功能,接下来分…

阿里云短信PHP集成api类

无需安装sdk扩展包&#xff0c;直接引入类即可使用 V3版本请求体&签名机制:自研请求体和签名机制 - 阿里云SDK - 阿里云 模版内容&#xff1a; <?phpnamespace common\components;use common\constant\UserConst; use common\models\bee\SmsReferer; use common\mode…

C++从入门到起飞之——类的定义/实例化 全方位剖析!

个人主页&#xff1a;秋风起&#xff0c;再归来~ C从入门到起飞 个人格言&#xff1a;悟已往之不谏&#xff0c;知来者犹可追 克心守己&#xff0c;律己则安&#xff01; 目录 1.类的定义 1.1、类定义格式 1.2、访问限定符 1.3、类域 2.实例化 2.…

备忘录删除了怎么恢复 备忘录误删恢复办法

备忘录作为我们日常生活中的得力助手&#xff0c;帮助我们记录重要事项和灵感&#xff0c;然而&#xff0c;使用中偶尔会出现误删的情况。若不能及时找回误删的内容&#xff0c;可能会造成重要信息的丢失&#xff0c;给我们的工作和生活带来不必要的麻烦。 如果你也担心备忘录…

tinymce富文本支持word内容同时粘贴文字图片上传 vue2

效果图 先放文件 文件自取tinymce: tinymce富文本简单配置及word内容粘贴图片上传 封装tinymce 文件自取&#xff1a;tinymce: tinymce富文本简单配置及word内容粘贴图片上传 页面引用组件 <TinymceSimplify refTinymceSimplify v-model"knowledgeBlockItem.content…

还在羡慕别人的爆款视频是怎么做出来的?Transform Video给你答案,让你轻松制作出爆款的作品!

大家好&#xff01;我是闷声轻创&#xff01;最近我发现了一个牛批的AI视频编辑工具——Transform Video。这款软件将彻底改变你的视频创作体验&#xff0c;来看看都有什么功能吧 先了解一下Transform Video是什么&#xff1f; Transform Video是一个革命性的AI视频编辑平台&a…

vxe-grid 实现配置式form搜索条件 form搜索条件框可折叠 配置式table

文章目录 效果图代码 效果图 代码 <template><div class"app-container"><vxe-grid refxGrid v-bind"gridOptions" v-if"tableHeight" :height"tableHeight"><template #billDate"{ data }"><e…

Linux内核编程(八) 添加自定义目录驱动菜单 (Kconfig文件使用)

本文目录 一、Linux 内核驱动目录二、自定义驱动的Kconfig编写●示例&#xff1a;在 drivers 菜单添加一个自己驱动的子菜单。 三、自写驱动的Makefile编写四、总结 一个Linux内核源码&#xff0c;其中包含了很多驱动程序&#xff0c;对应不同的功能。我们在编译内核时。如果将…