如何检测您的浏览器是否支持HTML5视频，看下面代码： function checkVideo() { if(!!
在看来《使用 AbortController 终止 fetch 请求》，觉得写的非常详细，于是提炼下笔记：AbortController背景介绍在现在的浏览器中，有两种主要的方法发送请求：XMLHttpRequest...XMLHttpRequest 这个接口在浏览器中存在很长一段时间了，fetch 则是 ES2015 引入的特性。XMLHttpRequest 可以在请求中途终止（abortable）。...abortedFlags：map类型，用于存储每个实例的是否已经启动了abort监听事件，默认为false（createAbortSignal创建实例的时候设置），调用abortSignal函数的时候会设置为...答：signals和abortedFlags准确的说是WeakMap类型，而WeakMap跟Map会有所区别，WeakMap的键只能是对象的引用，当垃圾回收机制执行时，会检测WeakMap的键是否被引用...AbortSignal是如何具备监听事件能力的？
XMLHttpRequest 浏览器使用XMLHttpRequest对象于服务器通信，它可以使用JSON，XML，HTML和text等格式发送和接收数据。...低版本 IE 浏览器没有XMLHttpRequest对象，但是它可以使用ActiveXObject对象代替。...// async 表示这次是否异步请求，默认是 trueXHR.send()// send 方法接受一个可选参数 请求主体。...lengthComputable 布尔值 表示进度信息是否可用 position 已经接收到的字节数 totalSize 根据Content-Length预期的字节数 跨域 同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互...它可以在用户的浏览器和服务器之间打开双工、双向通讯会话。 WebSocket 构造函数，接受两个参数，url 和 protocols（可选）。
浏览器支持性检测 浏览器检测是否支持audio元素或者video元素最简单的方式是用脚本动态创建它，然后检测特定函数是否存在。· varhasVideo = !!...spellcheck 可对带有文本内容的输入控件和textarea空间控制spellcheck属性。设置完后，会询问浏览器是否应该给出拼写检查结果反馈。spellcheck属性需要赋值。...· Draggable Div 拖放事件 拖动过程会触发很多事件，主要有下面这些：· dragstart：网页元素开始拖动时触发。...;}); dataTransfer对象 拖动过程中，回调函数接受的事件参数，有一个dataTransfer属性，指向一个对象，包含与拖动相关的各种信息。...;}); dataTransfer对象的属性有：· dropEffect：拖放的操作类型，决定了浏览器如何显示鼠标形状，可能的值为copy、move、link和none。
主要是先定义好一个拖拽区域，从该拖拽区域的事件回调内得到文件的相关信息，前提是需要取消一些事件的默认行为，因为浏览器本身会自动打开或下载文件。 DEMO ?...说明 定义一个允许拖放文件的区域div.drop-box 取消drop 事件的默认行为e.preventDefault();，不然浏览器会直接打开文件 为拖拽区域绑定事件,鼠标在拖拽区域上 dragover...(); }); //设置拖拽事件 function openDropEvent() { box.addEventListener("dragover",function...检测是否是拖拽文件到页面的操作 if (!...说明 页面内增加一个可编辑的编辑区域div.editor-box,开启contenteditable 为div.editor-box绑定paste事件 处理paste 事件，从event.clipboardData
hasOwnProperty 7、JS 如何解析 JSON 格式，低版本浏览器并防止 JSON 劫持？...; 监听：window.addEventListener("message", function(event){}, false); 15、如何判断当前脚本运行在浏览器还是 node 环境中？...Android的最小点击区域尺寸是 48x48dp； 19、我们给一个 DOM 同时绑定两个点击事件，一个用捕获，一个用冒泡，这个过程会执行几次事件，先执行冒泡还是捕获？...先从外到内进行捕获事件，再从内到外进行冒泡事件； 事件捕获：当你使用事件捕获时，父级元素先触发，子级元素后触发； 事件冒泡：当你使用事件冒泡时，子级元素先触发，父级元素后触发； 20、哪些操作会造成内存泄漏...26、XMLHttpRequest Level 2 IE 时代的 XMLHttpRequest 1.0 存在的问题：1、只支持文本数据的传输，不支持二进制数据；2、无法独立跨域；3、传送数据时没有进度信息
，会开启询问窗口，需要用户确定后才允许网站访问该数据。...，它的属性包含当前浏览器的信息。...比如，最常用的navigator.userAgent，返回浏览器的版本号，操作系统等细节。 这个属性常用于检测移动设备操作系统，IOS或者Android。...：拖拽元素在目标元素上移动的时候触发的事件（作用在目标元素上） ondrop 事件：被拖拽的元素在目标元素上同时鼠标放开触发的事件（作用在目标元素上） ondragend 事件：当拖拽完成后触发的事件（...跨域通信postMessage window.postMessage()可以实现跨域通信，当调用此方法时，会向目标窗口发送一个MessageEvent消息，目标窗口通过监听事件接受消息。
“事件冒泡”：事件开始由最具体的元素接受，然后逐级向上传播 “事件捕捉”：事件由最不具体的节点先接收，然后逐级向下，一直到最具体的 “DOM事件流”：三个阶段：事件捕捉，目标阶段，事件冒泡 7.什么是Ajax...表示一个空指针对象，所以用typeof检测会返回”object”。 10.看下列代码,输出什么？解释原因。...种主要的数据类型（包括Number、String、Object、Array、Boolean）进行值复制 考察点1：对于基本数据类型和引用数据类型在内存中存放的是值还是指针这一区别是否清楚 考察点2：是否知道如何判断一个变量是什么类型的...或document.all来进行检测浏览器，应该使用能力检测； 由于attachEvent在IE中有this指向问题，所以调用它时需要处理一下 改进如下： function addEvent(elem...达到无刷新的效果。 XMLHttpRequest这个对象的属性有： onreadystatechang 每次状态改变所触发事件的事件处理程序。
Hash 的优势是兼容性更好，但问题在于 URL 中一直存在「 # 」并不美观。我们主要通过监听 URL 中的 hashchange 来捕获具体的 hash 值进行检测。...window.addEventListener('hashchange', function() { // 上报【进入页面】事件 }, true) 需要注意的是，在新版 vue-router 中如果浏览器支持...PopState 是浏览器返回事件的回调，但是更新路由的 pushState、replaceState 并没有回调事件，因此，还需要分别在 history.pushState() 和 history.replaceState...因为我们要经常在线上的版本做静态资源 CDN 化，会导致常访问的页面跟脚本文件来自不同的域名。这时如果没有进行额外的配置，浏览器出于安全方面的设计就容易出现 "Script error."。...window.navigator.sendBeacon('上报事件的api', '数据参数') 2. img.src 当浏览器不支持 navigator.sendBeacon 时，我们可以采用模拟图片加载的方式发送日志上报事件
listener ：实现了 EventListener 接口或者是 JavaScript 中的函数。 useCapture ：是否使用捕捉，一般用 false 。...useCapture 是否使用捕捉，看了后面的事件流一节后就明白了，一般用 false 事件触发时，会将一个 Event 对象传递给事件处理程序，比如： document.getElementById...("testText").addEventListener("keydown", function (event) { alert(event.keyCode); }, false); 适应的浏览器版本不同...下面实例讲解如下： attachEvent方法，为某一事件附加其它的处理事件。...= “undefined” 程序代码可以判断使用者的浏览器是否支持AddEventListener这个事件模型, 如果不支持就使用attachEvent.
——XMLHttpRequest 对，就是这个你很熟悉的家伙。如果你开发的产品支持的浏览器是现代浏览器，那么恭喜你，文件上传就是这么easy！...特别强调强调现代浏览器是因为我们接下来讨论的XMLHttpRequest指的是XMLHttpRequest Level 2。 那什么是Level 1？为什么不行？...传输数据时, 没有进度信息提示, 只能提示是否完成. 受浏览器 同源策略 限制, 只能请求同域资源. 没有超时机制, 不方便掌控ajax请求节奏....好吧，让我们来看看IE10以下的浏览器如何实现无刷新上传。 借用iframe 之前说了要实现文件上传使用FileUpload对象（）即可。这在低版本的IE里也是适用的。...把form的target指定到一个看不见的iframe，那么返回的数据就会被这个iframe接受，于是乎就只有这个iframe会刷新。而它又是看不见的，用户自然就感知不到了。 window.
e.target：触发事件的元素 e.currentTarget：绑定事件的元素 3. 如何获取到一个实例对象的原型对象？...这里主要场景是 iframe 跨域的情况，不同域名的 iframe 是限制互相访问的。 XMLHttpRequest 同源策略：禁止使用 XHR 对象向不同源的服务器地址发起 HTTP 请求。...使用原生js给一个按钮绑定两个onclick事件 //事件监听 绑定多个事件 var btn = document.getElementById("btn"); btn.addEventListener...说说你对 new.target 的理解 new.target属性允许你检测函数或构造方法是否是通过new运算符被调用的。...我们可以使用它来检测，一个函数是否是作为构造函数通过new被调用的。
过多的长任务会造成页面丢帧、卡顿；过大的内存可能会造成低端机器的卡死、崩溃 4、统计资源缓存率，来判断项目的缓存策略是否合理，提升缓存率可以减少服务器压力，也可以提升页面的打开速度 设计思路 一个完整的前端监控平台包括三个部分...，如时间戳 Who，影响了多少用户，包括报错事件数、IP Where，出现的页面是哪些，包括页面、对应的设备信息 Why，错误的原因是为什么，包括错误堆栈、⾏列、SourceMap、异常录屏 How，如何定位还原问题...responseStart, // 浏览器从服务器接收到第一个字节时的时间戳。 responseEnd, // 浏览器从服务器接受到最后一个字节时的时间戳。...，比如它们的 url 是什么、加载了多久、是否来自缓存等，最终生成 资源加载瀑布图[7] waterfall .png 瀑布图展现了浏览器为渲染网页而加载的所有的资源，包括加载的顺序和每个资源的加载时间...从基础的理论知识到实现一个可用的监控平台，收获还是挺多的 有兴趣的小伙伴可以结合git仓库的源码玩一玩，再结合本文一起阅读，帮助加深理解 后续 下一篇会继续讨论前端监控，讲解具体如何实现：定位源码、播放录屏等功能
(需要注意的是，bfcache 的行为可能因不同浏览器而异，而且它通常受到浏览器性能和内存管理策略的影响有些浏览器可能会更主动地检查和更新 bfcache 中的页面内容，而其他浏览器可能会更谨慎，仅在需要时才更新...) 具体流程如下： 随之而来的疑问： 1、我在离开页面时，页面 Javascript 任务没有完成，会如何处理？...load 事件，对任务都是会先挂起，等页面从缓存中恢复继续执行 浏览器 版本 是否缓存 DOM 是否缓存文件 是否缓存 js 任务状态 是否执行 load 事件 Chrome 115.0.5790.170...bfcache 1.WebSocket或WebRTC 连接的页面 2.IndexDB链接的页面 3.页面有正在进行的fetch或XMLHttpRequest的事件 如果你的页面正在使用这些 API 中的其中一个...bfcache 中，因为这可能会破坏任何试图访问它的页面，尽可能使用rel="noopener"` 去打开 4、命中 bfcache 的同时如何更新数据 监听 pageshow/pagehide 事件
为此，浏览器提供了一个 pageshow 事件，可以把需要再次执行的代码放在里面。...用户滚动页面的那一刻，会触发 scroll 事件，在回调函数中用第一点得到的数据算出页面访问深度和停留时长。 当用户滚动页面到某一点时，停下继续观看页面。...只有在做出浏览器动作时，才会触发该事件，如用户点击浏览器的回退按钮（或者在Javascript代码中调用history.back()或者history.forward()方法）。...这就解决了提交分析数据时的所有的问题：数据可靠，传输异步并且不会影响下一页面的加载。 在不支持 sendBeacon 的浏览器下我们可以使用 XMLHttpRequest 来进行上报。...为此，我做了个实验，在 beforeunload 用 XMLHttpRequest 传送了 30kb 的数据（一般的待上报数据很少会有这么大），换了不同的浏览器，都可以成功发出去。
如何减少重绘回流？ 避免逐项更改样式。一次性更改style属性，或者直接定义class属性 避免直接插入DOM。...页面声明周期的变化，会触发document上的readystatechange事件，用户可以通过document.readyState拿到当前的状态。...load事件在页面所有资源被加载完毕后触发，通常我们不会用到这个事件，因为我们不需要等那么久。...beforeunload在用户即将离开页面时触发，它返回一个字符串，浏览器会向用户展示并询问这个字符串以确定是否离开。...AJAX XMLHttpRequest 题目：不借助任何库实现XMLHttpRequest let xhr = new XMLHttpRequest(); // readyState 为 4 和
安全的类型检测 JavaScript内置的类型检测机制并非完全可靠。...属性用于识别链接目标和iframe的，上述覆盖可能会导致严重的问题。...假如，某个onclick事件处理程序使用setInterval()设置了一该处理是否个200ms间隔的重复定时器。...Yielding Processes 运行在浏览器中的JavaScript都被分配了一个确定数量的资源，当页面中存在一个耗时较大的脚本时，会导致浏览器卡死。...节流处理 在浏览器中，处理DOM交互需要更多的内存和CUP时间。连续尝试进行过多的DOM相关操作可能会导致浏览器挂起，甚至崩溃。
在 Web 应用中，JavaScript 通过 XMLHttpRequest (XHR)来执行异步请求，这是一种有效改进页面通信的技术，当我们谈及Ajax技术的时候，通常意思就是基于 XMLHttpRequest...而且，基于事件的模型与现在 JavaScript 流行的 Promise 以及基于生成器的异步编程模型相背驰。...如果你现在就想使用它，还可以用 Fetch Polyfil，用于支持那些还未支持 Fetch 的浏览器。...firstName=Nikhil&favColor=blue&password=easytoguess” }).then(function(res) { if (res.ok) { //res.ok用于检测请求是否成功...当使用 respondWith() 方法并提供了一个自定义的response来接受request时: var myBody = new Blob(); addEventListener(‘fetch’
; xhr.send(null); open方法接受三个参数：要发送的请求类型(常用的有get和post)，请求的url和表示是否异步的布尔值。...已调用send()，为未收到响应 3：接受。已接受到部分数据 4：完成。已接受全部数据 readyState的值每次变化都会触发一次readystatechange事件。...可像下面这样检测这两种状态码： var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function (){ if(xhr.readyState...，主要是破坏了浏览器的前进和后退功能。...在浏览器日趋强大的的今天，兼容性问题其实不是特别大了。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM
