前端面试题(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,一经查实,立即删除!

相关文章

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

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

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…

20240718 每日AI必读资讯

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

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

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

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

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

微软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…

[HDCTF2019]MFC

[HDCTF2019]MFC-CSDN博客 不会写 完全画瓢 我还以为win32什么系统逆向 原来是小瘪三! VM保护 下载xspy(看雪上有) 打开32位的 再打开 这个窗口 把这个放大镜托到这个大窗口(里面有个小窗口,不要托错了) 下面这个 onmeg 就她不正常,是什么0464 #include <stdio.h&g…

mac环境下安装python3的图文教程

Python 是一种功能多样且强大的编程语言&#xff0c;在各个领域得到广泛应用。许多 Mac 用户都在其设备上安装和运行 Python&#xff0c;以运行特定的应用程序或创建、运行自己的 Python 脚本。 文章源自设计学徒自学网-http://www.sx1c.com/49441.html 虽然某些版本的 macOS…

git镜像链接

镜像链接https://registry.npmmirror.com/binary.html?pathgit-for-windows/ CNPM Binaries Mirror 1.git init 2.克隆 IDEA集成git git分支

RDD算子---->coalesce和repartition的区别

1.coalesce() 作用&#xff1a;缩减分区数&#xff0c;用于大数据集过滤后&#xff0c;提高小数据集的执行效率。 需求&#xff1a;创建一个4个分区的RDD&#xff0c;对其缩减分区 #1.创建一个RDD rdd1 sc.parallelize(range(1,11),4) #2.对RDD重新分区 rdd2 rdd1.coalesc…

【CICID】GitHub-Actions-SpringBoot项目部署

[TOC] 【CICID】GitHub-Actions-SpringBoot项目部署 0 流程图 1 创建SprinBoot项目 ​ IDEA创建本地项目&#xff0c;然后推送到 Github 1.1 项目结构 1.2 Dockerfile文件 根据自身项目&#xff0c;修改 CMD ["java","-jar","/app/target/Spri…

国产精品ORM框架-SqlSugar详解 SqlSugar初识 附案例源码 云草桑 专题一

国产精品ORM框架-SqlSugar详解 1、SqlSugar初识 2、开始实操 3、增删改操作 4、进阶功能 5、集成整合 6、脚手架应用 sqlsugar 官网-CSDN博客 国产精品ORM框架-SqlSugar详解 SqlSugar初识 专题二-CSDN博客 1、SqlSugar初识 1.1 基本概念和历史 SqlSugar 是一款 老牌 …

vim网络和安全的操作及shell的使用

目录 vim模式 一般模式下的基本操作&#xff1a; 一般模式切换到编辑模式&#xff1a; 一般模式切换到命令模式&#xff1a; Vim多窗口使用技巧 横向切割打开&#xff1a; 纵向切割打开&#xff1a; 关闭多窗口&#xff1a; 窗口的切换&#xff1a; 网络&#xff1a;…

《大数据基础》相关知识点及考点,例题

1.6大数据计算模式 1、MapReduce可以并行执行大规模数据处理任务&#xff0c;用于大规模数据集&#xff08;大于1TB&#xff09;的并行运算。MapReduce 极大地方便了分布式编程工作&#xff0c;它将复杂的、运行于大规模集群上的并行计算过程高度地抽象为两个函数一一Map和Redu…

[MySQL][复核查询][多表查询][自连接][自查询]详细讲解

目录 1.铺垫&基本查询回顾1.多表查询1.何为笛卡尔积&#xff1f;2.示例 2.自连接1.何为自连接&#xff1f;2.示例 3.子查询1.何为子查询&#xff1f;2.单行子查询3.多行子查询4.多列子查询5.在from子句中使用子查询6.合并查询 1.铺垫&基本查询回顾 前面讲解的MYSQL表的…

获取欧洲时报中国板块前新闻数据-scrapy

这里写目录标题 1.创建项目文件二.爬虫文件编写三.管道存储四.settings文件 1.创建项目文件 创建scrapy项目的命令&#xff1a;scrapy startproject <项目名字> 示例&#xff1a; scrapy startproject myspiderscrapy genspider <爬虫名字> <允许爬取的域名>…

修改了mybatis的xml中的sql不重启服务器如何动态加载更新

目录 一、背景 二、注意 三、代码 四、使用示例 五、其他参考博客 一、背景 开发一个报表功能&#xff0c;好几百行sql&#xff0c;每次修改完想自测下都要重启服务器&#xff0c;启动一次服务器就要3分钟&#xff0c;重启10次就要半小时&#xff0c;耗不起时间呀。于是在…

windows docker nvidia wsl2

下载驱动(GeForce Experience里的也可以)https://www.nvidia.cn/Download/index.aspx 安装wsl2https://blog.csdn.net/qq_39942341/article/details/121512900?ops_request_misc%257B%2522request%255Fid%2522%253A%2522172122816816800227436617%2522%252C%2522scm%2522%253A…