众所周知，JavaScript 是单线程的，当发起一个请求时会通过回调函数来接收后续的事件响应，不会造成阻塞，继续接收下一次请求操作。 ?...当触发一个事件时，相应的这个事件会进入到一个 EventLoop 队列中 检查 EventLoop 中是否存在事件消息，如果消息存在则会触发相应的回调 处理完成回调中的操作，就会返回到步骤 2 进行下一次...当时在浏览器上预览时一些东西时，有时你可能会看到 “浏览器没有响应”，这是因为有太耗时的事件消息，因此，尽可能的保证你的事件消息不要太耗时。...对这个 Node.js Event Loop 的理解我们举一个邮局场景说明。 当我们想要发布或请求一些事情时，这个邮政领导可以要求邮递员发送邮件到相应的地址。...Node thread 会保持一个 EventLoop（事件循环）当任何任务完成时该节点都会触发相应的回调。
HTTP协议 HTTP就是“超文本传输协议”，简单来说，就是浏览器和服务器之间用来传输网页数据的规则。...想象一下，你打开一个网页，浏览器就会发送一个HTTP请求给服务器，服务器收到请求后，就会把网页的数据通过HTTP响应发回来。这个过程就像是你给朋友发了一封信，朋友收到后回复你一样。...HTTP请求和响应都有固定的格式，比如请求方法（GET、POST、PUT、DELETE等），这些方法就像是你给朋友信里的不同指令。...三、网络请求的优化技巧 网络请求的优化技巧能让你的应用更流畅，用户体验更好。这里介绍几个常用的技巧。 连接复用 连接复用就像是邮递员不用每次都重新找路，能大大提高请求的效率。...请求队列：管理请求队列，合理安排请求的优先级。 超时设置：设置合理的超时时间，避免请求卡住。 四、网络相关的面试题及详细解答 面试中，网络编程的问题五花八门，但万变不离其宗。
该请求 header 中会包含以下两个字段： · Access-Control-Request-Method：该字段的值对应当前请求类型，例如 GET、POST、PUT等等。浏览器会自动处理。...当我们发起跨域请求时，如果是非简单请求，浏览器会帮我们自动触发预检请求，也就是 OPTIONS 请求，用于确认目标资源是否支持跨域。如果是简单请求，则不会触发预检，直接发出正常请求。 2....规范规定了，当请求同时满足以下所有情况时，才会被浏览器认为是一个简单请求： · 请求方法必须是以下之一：GET、HEAD、POST，也就是说 PUT、PATCH 等方法必然会触发预检。...这个比较少见，应该是指 Fetch API 中的 Request 中的 Body，本人没有去验证。 当满足以上条件时，就不会触发预检了。...例如使用script标签加载跨域的 CDN 的资源就是很常见的普通 GET 请求，不会触发预检，有兴趣的同学可以打开 chrome 控制台，看一下 CDN 资源返回的 header。
Preflight 请求的存在是为了保障浏览器的安全性，确保跨域请求不会在没有服务器允许的情况下进行。...下面是一个例子：Preflight 请求的触发条件不是所有的跨域请求都会触发 Preflight 请求，浏览器会根据请求的类型和头部信息来决定是否需要预检。...Preflight 请求通常在以下几种情况下触发：当请求方法不是 GET、POST 或 HEAD，例如 PUT、DELETE。...常见的使用场景包括：RESTful API 请求：当前端应用需要与其他域名下的 REST API 进行交互时，尤其是对资源进行 PUT 或 DELETE 操作时，往往会触发 Preflight 请求。...：避免不必要的自定义头部字段，或者尽量使用简单的 GET、POST 请求，能够有效减少 Preflight 请求的触发。
页面声明周期的变化，会触发document上的readystatechange事件，用户可以通过document.readyState拿到当前的状态。...load事件在页面所有资源被加载完毕后触发，通常我们不会用到这个事件，因为我们不需要等那么久。...beforeunload在用户即将离开页面时触发，它返回一个字符串，浏览器会向用户展示并询问这个字符串以确定是否离开。...() 会阻塞 // Step2: 打开请求 xhr.open( "GET", "http://localhost:5050/search/song?...但是浏览器兼容不是太好，但几年后，估计就只剩它了！
但有可能会触发更新，比如你昨天访问的该网站，今天人家发布新内容了，service worker 就有可能触发更新。...sw.js 的文件内容如果发生了变化，install 事件会重新触发。...，然后触发 install 事件，接着是 activate 事件；当再次刷新时，会触发 fetch 事件（可能会触发多次），但 install 和 activate 事件不会再触发，因为第一次访问时已经下载...但 activate 事件并不会触发，此时打开控制台的 Application 面板，会发现 Service Worker 的状态发生了些变化： ?...cache addAll 方法的参数是存放 url 数组，它会对这些 url 发起 get 请求，把请求到的数据存入 cache 中。
浏览器将 # 后面的部分视作虚拟片段。早期的前端路由实现是基于 location.hash来实现的。他有如下特性：URL 中hash值的改变不会被触发页面的重载。...页面发送请求时， hash 部分不会被发送。hash 值的改变，会记录在浏览器的历史记录，可使用浏览器的“后退”，“前进”触发页面跳转。可以利用 hashchange 事件来监听 hash 的变化。...因为浏览器会向服务器 “http://127.0.0.1:5500/about” 这个地址发送 GET 请求， 希望请求到一个单独的 index.html 文件， 而实际上这个文件我们服务器上是不存在的...总结基于Hash优势：浏览器不会将 URL.path 中 # hash 后面的部分视作一个分页，因此默认的就不会触发页面的重载。在前端定义带有 hash 的链接总是安全的，因为它不会触发页面的重载。...通常为了让服务器区分这些 “路由形式的URL”, 所以通常需要用一些前缀以区分和普通 请求的区别，如 /api/*通过这种方式实现时，定义路由的时候需要特别注意， 因为不当的链接跳转可能会导致全页面重载
如果浏览器发送凭据，但响应不包含有效的 Access-Control-Allow-Credentials 头，则浏览器不会向应用公开响应，而且跨源请求会失败。 允许跨源凭据会带来安全风险。...即“发送非简单跨域请求前的预检请求”，若该请求未正常返回，浏览器会阻止后续的请求发送。...如下图，是一个预检请求的 headers 信息： 2、什么情况下会触发预检请求 预检请求（Options）属于实际请求（Get、Post 等）之外的操作，仅在部分情况下触发。...想达到不触发 Options 方法的目的，需同时满足下面三个条件： 请求方法为 GET、POST 或 HEAD。...如果预检请求被拒绝，应用将返回 200 OK 响应，但不会设置 CORS 头，浏览器后续也就不会尝试跨源请求。
Cross-Origin Resource Sharing (CORS) 是W3C草案拟定的浏览器与服务端如何进行跨域请求的方式，其原理是用自定义HTTP头来让浏览器和SERVER决定request、response...使用一个GET或POST发送一个未自定义头的请求时，会额外添加一个叫做Origin的头，其包含了请求页面的协议、域名和端口，后台可以根据这些信息很轻松的判断出是否要给出正确的response，就像下面这样...，浏览器则会拒绝这个请求，匹配上了就会成功，但不管是否成功，这个请求都不会带有任何cookie信息。...之前提到的所有浏览器都支持这种简单的请求方式。...Firefox 3.5+, Safari 4+和 Chrome使用XMLHttpRequest对象来实现，这跟普通的请求是一样的，但当浏览器发现请求的是跨域的资源时，CORS模式会自动被触发，而不需要额外的代码来处理
代码监控依托于js代码并部署到需监控的页面，手动计算时间差或者使用浏览器的的API进行数据统计。...影响代码监控数据的因素有以下几种： 浏览器渲染机制； 浏览器对API的实现程度，比如performance API； 工具监控不用将统计代码部署到页面中，一般依托于虚拟机。...如果该属性可用，但没有使用HTTPS，则返回0； requestStart代表浏览器发起请求的时间节点，请求的方式可以是请求服务器、缓存、本地资源等； responseStart和responseEnd...：代表DOMContentLoaded事件触发的时间节点： 页面文档完全加载并解析完毕之后,会触发DOMContentLoaded事件，HTML文档不会等待样式文件,图片文件,子框架页面的加载(load...具体到上文提到的两种js异常，try...catch无法捕获语法错误，当遇到语法错误时，浏览器仍然会抛出错误Uncaught SyntaxError，但是不会被捕获，不会走进catch的代码块内。
()方法并不会真正发送请求，而只是启动一个请求以备发送 xhr.send("请求主体发送的数据"); 说明： （1）如果不需要通过请求主体发送数据（比如get请求），则必须传入null，因为这个参数对有些浏览器来说是必需的...并非所有浏览器都完整地实现了XMLHttpRequest 2级规范，但所有浏览器都实现了它规定的部分内容。 1....2. progress事件 其处理程序会接收一个event对象，其target属性指向XHR对象实例，但包含着三个额外的属性 lengthComputable：是一个表示进度信息是否可用的布尔值 position...这也是广告跟踪浏览量的主要方式。 图像Ping是与服务器进行简单、单向的跨域通信的一种方式。浏览器得不到任何具体的数据。但通过监听load和error事件，可以知道响应是什么时间接收到的。...缺点：制定协议的时间比制定JavaScript API的时间还要长。
Page Visibility API 只在网页对用户不可见时触发，至于网页会不会被系统丢弃掉，它就无能为力了。...这个阶段会导致网页卸载，任何新任务都不会在这个阶段启动，并且如果运行时间太长，正在进行的任务可能会被终止。...不过，也有可能，处于可见状态的页面长时间没有操作，也会进入 Frozen 阶段。 这个阶段的特征是，网页不会再被分配 CPU 计算资源。...定时器、回调函数、网络请求、DOM 操作都不会执行，不过正在运行的任务会执行完。浏览器可能会允许 Frozen 阶段的页面，周期性复苏一小段时间，短暂变回 Hidden 状态，允许一小部分任务执行。...并且只能复用已经打开的网络连接，不能发起新的网络请求。 注意，从 Frozen 阶段进入 Discarded 阶段，不会触发任何事件，无法指定回调函数，只能在进入 Frozen 阶段时指定回调函数。
关闭浏览器触发监听器，向后端发送请求 1、需求前提 项目使用Vue + SpringBoot搭建的前后端分离项目，后端存储用户登录信息和Token。...现在的需求是，多端只可以有一个用户登录，当一个用户关闭浏览器或者关闭标签页时，向后端发送请求删除该用户的登录信息，以此来解决用户及时下线的目的。...点击取消按钮时不会触发第二个监听器，点击离开按钮时，则会触发下面的监听器。 重点2： // 关闭浏览器标签触发 logout() { fetch('/login/loginOut?.../json'}, keepalive: true }); }, } 问题：刷新和关闭浏览器标签时都会触发，暂时无法限制刷新页面不触发该事件，有想法的小伙伴请留言呢。...4、最后 到这里前端基本就写完了，只要关闭浏览器或者关闭标签页，则会触发这个监听器并发送请求到后端，只要后端收到了这个请求，则证明fetch请求是没有问题。
浏览器需要在硬盘上保存各种数据，如 Cookie。HTML5 定义了“web数据库”，这个是一个完整但轻便的浏览器内数据库。...，并将元素呈现出来 # 浏览器如何解析 CSS 选择器 浏览器会“从右往左”解析 CSS 选择器。...表现为某些元素的外观改变 只改变元素的外观，肯定不会引起网页重新生成布局，但当浏览器完成重排后，将会重新绘制受到此次重排影响的部分。...，会交由 GPU 合成，比 CPU 处理要快 当需要 repaint 时，只需要 repaint 本身，不会影响到其他的层 对于 transform 和 opacity 效果，不会触发 layout 和...优点： 实现简单 兼容性好 缺点： 只支持 GET 请求（因为标签只能 get） 有安全性问题，容易遭受 XSS 攻击 需要服务端配合 jsonp 进行一定程度的改造 jsonp 的实现
hash满足以下几个特性，才使得其可以实现前端路由： url中hash值的变化并不会重新加载页面，因为hash是用来指导浏览器行为的，对服务端是无用的，所以不会包括在http请求中。...浏览器不会在调用pushState()方法后加载该地址，但之后，可能会试图加载，例如用户重启浏览器。...这两个API的相同之处是都会操作浏览器的历史记录，而不会引起页面的刷新。不同之处在于，pushState会增加一条新的历史记录，而replaceState则会替换当前的历史记录。...前端路由的核心是：改变视图的同时不会向后端发出请求。 为了达到这一目的，浏览器提供了 hash 和 history 两种模式。 1....只是当它们执行修改时，虽然改变了当前的 URL ，但浏览器不会立即向后端发送请求。
由于公司最近有个需求是想让我们的get请求的参数都直接显示在浏览器url上，这样我们就可以直接通过复制url来显示对应的界面数据了。...背景介绍 由于我们常用的http请求一般是基于XHR对象的实现或者fetch实现，这种请求操作并不会触发浏览器url的变化，这样虽然也能正常请求数据并渲染到页面，但是如果用户在当前页面操作了某个get请求并得到了某条数据...，想通过链接将当前看到的界面分享给其他人时，那么此时浏览器url并不会变化，通过链接只能访问到初始化的数据界面，此时并不能达到理想的效果。...如下图所示： （单纯使用ajax或者fetch实现get请求时） 当我们在该页面将列表切换到第二页时，浏览器url并没有变化，所以将链接复制给其他人打开并不会将列表结果切换到第二页，而是重新初始化。...新URL必须与当前URL同源，否则 pushState() 会抛出一个异常。
Hash 模式的好处是它不会触发页面的刷新，所有的路由都在客户端进行处理，并且兼容性较好，可以在不同的浏览器和服务器配置中使用。...浏览器会自动触发 hashchange 事件，Vue 路由监听到事件后，根据新的哈希值找到对应的路由配置，并根据配置信息动态加载对应的组件，更新页面内容，完成路由导航的过程。...Hash 模式的好处不会触发页面的刷新所有的路由都在客户端进行处理并且兼容性较好可以在不同的浏览器和服务器配置中使用缺点但同时，URL 中的 # 符号可能对SEO不太友好，并且在 URL 中出现了冗余信息...Vue 路由还会监听 popstate 事件，当用户点击浏览器的前进或后退按钮时，会触发该事件，Vue 路由会根据新的路径找到对应的路由配置，并动态地加载所需的组件并更新页面内容，完成路由导航的过程。...缺点但需要注意的是，在使用 History 模式时，服务器需要正确配置以处理前端路由请求，并且要注意兼容性，因为一些旧版本的浏览器可能不支持 History API。
JSONP虽然可以解决跨域问题，但只能是get请求，并且没有有效的错误捕获机制 为了解决这个问题，XMLHttpRequest Level2 提出了CORS 模型，即 跨域资源共享， 它不是一个新的API...因此，浏览器提供了一个新的 Ajax 接口，即 Fetch API ，Fetch API 是基于Promise 思想设计的，更符合关注点分离原则。...HTML 解析过程 浏览器加载 html 文件以后，渲染引擎会从上往下，一步步来解析HTML标签 过程如下： 请求服务器返回HTML文件 用户输入网址，浏览器向服务器发出请求，服务器返回html...在接下来600秒内，如果有请求这个资源，浏览器不会发出 HTTP请求，而是直接使用本地缓存的文件。...强制刷新页面(Ctrl+F5) 浏览器会直接忽略本地的缓存(有缓存也会认为本地没有缓存)，在请求中加上字段：Cache-Control:no-cache (或 Pragma:no-cache)，发包向服务重新拉取文件
react-router4 react-router概览 1、react的一个插件库 2、专门用于实现一个SPA应用 3、基于react的项目都会用到该库 SPA 1、点击页面中的链接不会刷新页面，本身也不会向服务器发送请求...(即：页面地址的跳转都是在浏览器端实现的，不会去重新请求服务端获取 html，html 只是在应用初始化的时候加载一次。)...：node服务器端路由，value是function，用于处理客户端提交的请求并返回一个响应数据 前台路由：浏览器端路由，value是component，当请求的是路由path时，浏览器端没有发送http...请求，但界面会发生局部更新 后台路由 注册路由：router.get(path,function(req,res){}) 当node接收到一个请求时，依据请求路径找到匹配的路由，调用路由中的函数来处理请求...Store : 核心，管理对象 内部维护： state、 reducer 核心方法： getState()获取状态；dispatch(action)分发事件，会触发Reducers调用；subscribe
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
云直播
