前端面试题(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://www.mzph.cn/bicheng/47546.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

AWS Redshift 类型升级后物化视图丢失?

问题描述 及 错误信息: 我们将AWS Redshift集群从dc2升级到了ra3类型,而后居然发现所有的物化视图都消失了??? 这是道德的沦丧还是人性的扭曲? 当然都不是,下面来看我们应该怎样排查吧~~ 分析过程 及 解决方案:…

SSCOM串口调试工具安装和使用方法--V5.13.1版本

安装 链接:下载 解压后直接双击打开使用 使用 1、选择端口 2、点击【打开串口】 3、输入内容点击发送 4、上方就会展示发送或接收数据

Vue进阶之Vue无代码可视化项目(六)

Vue无代码可视化项目 渲染引擎(渲染器)初版TextBlock.vueChartBlock.vueImageBlock.vueLayoutView.vue渲染器BlockRenderer.vueLayoutView.vue进一步typestypes/block.tsmock/blocks.tsstores/editor.tsblocks/BlockRenderer.vueviews/LayoutView.vueblocks/internal/Fallbac…

Ubuntu 20 安装 uwsgi 失败解决办法

环境:Ubuntu 20.04 LTS Python 版本:python3.8.10 虚拟环境路径:/home/venv 激活虚拟环境后,安装 uswgi pip install uwsgi报错如下: ERROR: Command errored out with exit status 1:command: /home/venv/bin/pytho…

如何建设和维护数据仓库:深入指南

欢迎来到我的博客,很高兴能够在这里和您见面!欢迎订阅相关专栏: V: LAF20151116 进行更多交流学习 ⭐️ 全网最全IT互联网公司面试宝典:收集整理全网各大IT互联网公司技术、项目、HR面试真题. ⭐️ AIGC时代的创新与未来&#xff…

js数组与字符串方法

拼接方法 字符串拼接用 就行了,如 str1 str2。数组则用 join() 方法把元素连起来,比如 arr.join(‘,’)。数组不能直接用 拼接,但两个数组相加会被转成字符串再拼接,这不是数组的拼接,而是字符串拼接行为。 let s…

Chapter12 屏幕后处理效果——Shader入门精要学习笔记

Chapter12 屏幕后处理效果 一、屏幕后处理概述以及基本脚本系统1.OnRenderImage 函数 —— 获取屏幕图像2.Graphics.Blit 函数 —— 使用特定的Shader处理3.在Unity中实现屏幕后处理的基本流程4.屏幕后处理基类 二、调整亮度、饱和度和对比度1.BrightnessSaturationAndContrast…

GESP CCF C++ 三级认证真题 2024年6月

第 1 题 小杨父母带他到某培训机构给他报名参加CCF组织的GESP认证考试的第1级,那他可以选择的认证语言有()种。 A. 1 B. 2 C. 3 D. 4 第 2 题 下面流程图在yr输入2024时,可以判定yr代表闰年,并输出 2月是29天 &#x…

深度学习,人工智能

人工智能,代跑通,预测模型,模型优化,增加模块,文章复现,python代做,预测,微调,融合,深度学习,机器学习程序代写,环境调试,…

20240718 每日AI必读资讯

大模型集体失智!9.11和9.9哪个大,几乎全翻车了 - AI处理常识性问题能力受限,9.11>9.8数学难题暴露了AI短板。 - 训练数据偏差、浮点精度问题和上下文理解不足是AI在数值比较任务上可能遇到的困难。 - 改进AI需优化训练数据、Pr…

Tailwind CSS指南

使用和配置 Tailwind CSS 的完整指南 Tailwind CSS 是一个功能类优先的 CSS 框架,允许你快速构建现代的网站。它提供了一组预定义的实用工具类,可以直接在 HTML 中使用,以实现各种样式效果。本文将详细讲解如何使用和配置 Tailwind CSS&…

spark的相关知识点

2024.6.19 1.scala:语言 2.spark:框架(jar包) 3.spark streaming:kafka 4.spark mlib:机器学习 算法 5.解释 Class:类Case Class:样例类Object:对象User:类Ne…

阿里云国际站:海外视频安全的DRM加密

随着科技的进步,视频以直播或录播的形式陆续开展海外市场,从而也衍生出内容安全的问题,阿里云在这方面提供了完善的内容安全保护机制,适用于不同的场景,如在视频安全提供DRM加密。 由图可以了解到阿里云保护直播安全的…

Electron 应用关闭突出程序坞

在Electron应用中,处理窗口关闭并使其最小化到Mac系统的程序坞(Dock)而不是完全退出应用,通常涉及到监听窗口的关闭事件(close事件)并在适当时机阻止其默认行为。以下是一些步骤和关键点,帮助实现这一功能: 1. 监听窗口关闭事件 在Electron的主进程(main process)中…

请求通过Spring Cloud Gateway 503

最近想处理一个通用的网关服务。 但是我在处理好所有配置的时候发现,网络请求过网关的时候,一直503,我所有的配置都没问题。 环境: JDK: 17 Spring Cloud: 2023.0.2 在 Spring Cloud Gateway 的早期版本中&#xff…

如何应用CDP做好客户标签管理?

​标签是对客户的特征标识,是经过人为再加工后的结果,相对于传统意义的标签,CDP客户数据平台更侧重于客户动态的行为,标签的加工随着用户行为的变化实时更新,帮助客户捕捉用户每个阶段的动态特征与需求。 如何应用CDP做…

【ROS】的软件包应用商店使用-以小乌龟为例

文章目录 环境效果图介绍安装使用总结 环境 在Ubuntu20.04系统下运行 效果图 介绍 ros应用商店,里面有大量ros可使用的软件。 下面以ros经典的控制小乌龟为例。 安装 安装控制器 sudo apt install ros-noetic-rqt-robot-steering安装小乌龟 sudo apt insta…

Spring中事务是如何实现的?

在Spring中,事务管理是通过AOP(面向切面编程)和代理模式实现的。Spring提供了声明式事务管理,允许开发者通过简单的配置来管理事务,而不需要手动编写事务管理的代码。 概述: 1.Spring事务底层是基于数据库事…

微软GraphRAG +本地模型+Gradio 简单测试笔记

安装 pip install graphragmkdir -p ./ragtest/input#将文档拷贝至 ./ragtest/input/ 下python -m graphrag.index --init --root ./ragtest修改settings.yaml encoding_model: cl100k_base skip_workflows: [] llm:api_key: ${GRAPHRAG_API_KEY}type: openai_chat # or azu…

uniapp踩坑之项目:uni-table垂直居中和水平居中

uni-table 中的水平居中uni-td align"center"&#xff0c;css里的属性vertical-align: middle //html 水平居中<uni-table ref"table" :loading"loading" border stripe emptyText"暂无更多数据"><uni-tr><uni-th :wid…