JavaScript问题
前端js常见问题
IamSmaLLR.
这个作者很懒,什么都没留下…
展开
-
跨域的7种方式
JSONP(json with padding)是一种借助script元素实现跨域的技术,它不会使用XHR对象。script 元素有以下两个特点1.它的src属性能够访问任何URL资源,不会受同源策略的限制。2.如果访问的资源包含js代码,那么在下载完成后会自动执行。JSONP就是基于这两点,再与服务器配合来实现跨域请求的1.定义一个回调函数2.用DOM方法动态创建一个script元素。3.指定要请求的URL,并且将回调函数的名称作为一个参数传递过去。4.将script元素插入到当前文档中,原创 2021-01-10 14:39:32 · 4479 阅读 · 0 评论 -
异步请求竞态问题(input搜索框实时搜索)
如何解决异步请求的竞态问题1.简单的解决方式,通过给请求编号,然后计数,最后的计数位是否与请求编号相同,否则return结果(比较是否是最后一个请求).但是这样简单的方法在实际使用中并不方便,你总是需要想办法返回一个计数,然后做比较判断,每个请求还都要重写一遍。2.结合了 Promise 和 XHR.abort()XMLHttpRequest 提供的 abort 方法 可以用来将 XMLHttpRequest 的 readyState 置为 0。这样就可以视为请求被 “终止” 了 。只是前端视角转载 2021-02-28 16:35:10 · 617 阅读 · 0 评论 -
js定义一个常量属性
1.Object.freeze()(递归)// constantize实现递归freezevar constantize = (obj) => { Object.freeze(obj); Object.keys(obj).forEach( key => { if ( typeof obj[key] === 'object' ) { constantize( obj[key] ); } });}var Obj = { name原创 2021-03-04 14:03:11 · 502 阅读 · 1 评论 -
怎样创建一个没有任何属性和方法的空对象
使用: Object.create(null)生成的空对象在原型对象上也没有任何属性和方法.var obj = Object.create(null);obj; // {}obj.toString(); // Error;obj.valueOf(); // Error;原创 2021-02-23 20:15:34 · 535 阅读 · 0 评论 -
前端渲染插入10W条数据
// 插入十万条数据const total = 100000 // 一次插入 20 条,如果觉得性能不好就减少const once = 20 // 渲染数据总共需要几次const loopCount = total / oncelet countOfRender = 0let ul = document.querySelector("ul");function add() { // 优化性能,插入不会造成回流 const fragment = document.原创 2021-02-21 18:50:54 · 548 阅读 · 0 评论 -
将HTML字符转化为DOM结点
使用HTML字符串动态创建Node1使用innerHTML我们使用document.createElement方法创建新的元素,然后利用innerHTML将字符串注入进去,最后返回firstChild,得到动态创建的Node,添加到文档底部。 function createNode(txt) { const template = `<div class='child'>${txt}</div>`; let tempN原创 2021-02-21 18:37:42 · 598 阅读 · 0 评论 -
HTML5 Web Workers
Web worker 是运行在后台的JavaScript,不会影响页面的性能。什么是Web Worker?当在 HTML 页面中执行脚本时,页面的状态是不可响应的,直到脚本已完成。web worker 是运行在后台的 JavaScript,独立于其他脚本,不会影响页面的性能。您可以继续做任何愿意做的事情:点击、选取内容等等,而此时 web worker 在后台运行。创建Web Worker在外部创建一个js文件,举例设定一个计数脚本,取名为‘worker.js’var i=0;functio原创 2021-02-17 01:16:32 · 155 阅读 · 0 评论 -
异步加载JS文件的方法
#1.script标签的defer/async属性<script src="script.js"></script>没有 defer 或 async,浏览器会立即加载并执行指定的脚本,“立即”指的是在渲染该 script 标签之下的文档元素之前,也就是说不等待后续载入的文档元素,读到就加载并执行。<script async src="script.js"></script>有 async,加载和渲染后续文档元素的过程将和 script.js 的加载原创 2021-01-13 15:13:57 · 610 阅读 · 0 评论 -
Vuex/Cookie和web存储之间的异同
Vuex和web存储的区别1.Vuex存储在内存,localstorage以文件的方式存储在本地,永久保存,sessionstorage在浏览器会话期间临时保存。web存储只能存储字符串类型,对于复杂的对象可以使用JSON对象的stringify和parse处理。2.应用场景:Vuex用于组件之间的传值,web存储主要用于不同页面之间的传值。3.永久性:当刷新页面(F5刷新,清除内存)时vuex存储的值会丢失,sessionstorage页面关闭后消失,localstorage不会自动消失。Cook原创 2021-01-12 22:42:15 · 706 阅读 · 0 评论 -
js如何判断空对象
一、将对象转为字符串比较这是最容易想到的方法,主要使用JSON.stringify()这个方法对对象进行强转:var a={};var b=new Object();console.log(JSON.stringify(a)=="{}") //trueconsole.log(JSON.stringify(b)=="{}") //true二、for…in循环使用for in循环可以遍历所有属性以次判断对象是否为空对象:var a={};function isEmptyObject(ob原创 2021-01-12 22:23:50 · 929 阅读 · 0 评论 -
引用类型运算符
let a = {n : 1}; let b = a; a.x = a = {n: 2}; console.log(a.x) //undefined console.log(b.x) //{n:2}https://blog.csdn.net/Web_J/article/details/107471318let a={m:10,n:30}let b=a;let c=b;b.m=20;let d={...b}//相当于Object.assign 第一层对...原创 2021-01-12 12:38:32 · 269 阅读 · 0 评论 -
Promise
https://www.jianshu.com/p/dc61ea153874promise出现的目的一为处理JavaScript里的异步,再就是避免回调地狱,解决异步深层嵌套的问题。 Promise是什么Promise 是异步编程的一种解决方案,其实是一个构造函数,自己身上有all、reject、resolve这几个方法,原型上有then、catch等方法。 Promise 三种状态pendin...原创 2020-09-23 06:24:56 · 67 阅读 · 0 评论 -
前端路由和后端路由的区别
1.后端路由概念:根据不同的用户的不同URL请求,发送到服务器以后返回不同的内容。本质:是URL请求地址与服务器资源之间的对应关系。优点:分担了前端的压力,html和数据的拼接都是由服务器完成。缺点:后端渲染(存在性能问题)当项目十分庞大时,加剧了服务器端的压力,同时在浏览器端不能输入制定的url路径进行指定模块的访问。另外一个就是如果当前网速过慢,那将会延迟页面的加载,再有如果网页有很多表单提...原创 2020-08-03 18:18:32 · 1410 阅读 · 0 评论 -
JS中关于clientWidth offsetWidth scrollWidth 等的含义
网页可见区域宽: document.body.clientWidth;网页可见区域高: document.body.clientHeight;网页可见区域宽: document.body.offsetWidth (包括边线的宽);网页可见区域高: document.body.offsetHeight (包括边线的宽);网页正文全文宽: document.body.scrollWidth;网...原创 2020-10-22 17:12:28 · 129 阅读 · 0 评论 -
input输入框disabled和readonly区别
disabled和readonly这两个属性有一些共同之处,比如都设为true,则form属性将不能被编辑,往往在写js代码的时候容易混合使用这两个属性,其实他们之间是有一定区别的: 如果一个输入项的disabled设为true,则该表单输入项不能获取焦点,用户的所有操作(鼠标点击和键盘输入等)对该输入项都无效,最重要的一点是当提交表单时,这个表单输入项将不会被提交。而readonly只是针对文...原创 2020-10-18 14:37:39 · 345 阅读 · 1 评论 -
webkit渲染引擎工作流程
原创 2020-09-16 19:08:57 · 131 阅读 · 0 评论 -
this指向问题,执行上下文,js内存空间
this是JavaScript中的关键字,指的是当前的上下文对象,简单的说就是方法/属性的所有者一、方法调用模式 当函数被保存为一个对象的属性时,它就可称为这个对象的方法。当一个方法被调用时,this被绑定到这个对象上。如果调用表达式包含一个提取属性的动作(. 或 []),那么它被称为方法调用。例如: var name = "window";var obj = { name: ...原创 2020-09-24 07:35:09 · 112 阅读 · 0 评论 -
说说前端中的事件流
参考回答:HTML中与javascript交互是通过事件驱动来实现的,例如鼠标点击事件onclick、页面的滚动事件onscroll等等,可以向文档或者文档中的元素添加事件侦听器来预订事件。想要知道这些事件是在什么时候进行调用的,就需要了解一下“事件流”的概念。什么是事件流:事件流描述的是从页面中接收事件的顺序,DOM2级事件流包括下面几个阶段。 事件捕获阶段 处于目标阶段 事件冒泡阶段 add...原创 2020-09-23 04:42:52 · 530 阅读 · 0 评论 -
es6数组方法
https://www.jianshu.com/p/941ee41a264a零、数组类型判断Array.isArray()将数组作为参数传入,返回值为布尔值 let arr = [1,2,3]let res = Array.isArray(arr) // true一、数组创建Array构造函数的特性如果使用Array构造函数传入一个数值型的值,那么数组的长度length属性会被设置为该值; l...原创 2020-09-16 19:25:57 · 251 阅读 · 0 评论 -
js判断类型
1.typeof xxx注意:*typeof xxx为数组,null(空)和对象时返回的都是object,所以不能用来判断是否是数组!*判断是否是数组的三种方法,1.instanceof 2.Object.prototype.toString.call()3.Array.isArray()2.xxx instanceof 基本数据类型 返回布尔值instanceof 运算符用于检测构造函数的 ...原创 2020-09-23 16:48:51 · 139 阅读 · 0 评论 -
JS中的内存泄漏和垃圾回收机制(标记清除,引用计数)
什么是内存泄漏?程序的运行需要内存,只要程序提出要求,操作系统运行时就必须供给内存。对于持续运行的服务进程,必须及时释放内存,否则,内存占用越来越高,轻则影响系统性能,重则导致进程崩溃。不再用到的内存,没有及时释放,就叫做内存泄漏。有些语言(比如c语言)必须手动释放内存,程序员负责内存管理。这很麻烦,所以大多数语言提供自动内存管理,减轻程序员的负担,这被称为"垃圾回收机制"。 代码回收规则如下:...原创 2020-09-23 05:49:32 · 1458 阅读 · 0 评论 -
简单介绍一下symbol
参考回答:ES6 引入了一种新的原始数据类型 Symbol ,表示独一无二的值,最大的用法是用来定义对象的唯一属性名。ES5的对象中的属性名是字符串,容易造成属性名的冲突,如果有一种机制,保证每个属性的名字都是独一无二的,就可以从根本上防止属性名的冲突。Symbol是ES6 的新增属性,代表用给定名称作为唯一标识,这种类型的值可以这样创建,let id=Symbol(“id”)console.l...原创 2020-09-24 05:28:48 · 327 阅读 · 0 评论 -
箭头函数和普通函数的区别
https://zhuanlan.zhihu.com/p/75337266箭头函数和普通函数的区别:1、语法更加简洁、清晰2、箭头函数不会创建自己的this,它只会从自己的作用域链的上一层继承this。3、箭头函数继承而来的this指向永远不变4、.call()/.apply()/.bind()无法改变箭头函数中this的指向5、箭头函数不能作为构造函数使用6、箭头函数没有自己的argument...原创 2020-09-04 00:10:10 · 905 阅读 · 0 评论 -
for in,for of, forEach(array,set,map)的区别
for..in可以将JavaScript中的对象的属性依次循环出来,当for..in作用于数组时得到的是该元素的下标,且该下标是一个String对象而不是一个Number对象。(注意:for..in实际上是历史遗留问题,其遍历的实际上是对象的属性,之所以能够遍历数组,是因为数组实际上是一个对象,而其属性就是下标,所以使用for..in遍历数组得到的下标是String类型)2、for..offor...原创 2020-09-14 00:55:10 · 260 阅读 · 1 评论 -
懒加载和预加载
图像预加载是指提前加载图像,并将其缓存,当要访问时就能直接读取缓存中的图像。预加载不但能更流畅地展示网页,减少等待时间,还能防止页面因图像太多而打开缓慢甚至无法打开的情况发送。图像懒加载也叫延迟加载,通常的做法是当滚动条到达某个位置时,再请求图像。这种方式大大节约用户的流量,并能减轻服务器地压力,提升用户体验。 ...原创 2020-09-02 05:40:06 · 76 阅读 · 0 评论 -
前端性能优化方法
5个方法用来优化页面的性能1.网站中的图像放置在专门的图像服务器中,开辟多个不用传Cookie的子域名,这些子域名都能访问该服务器中的图像。2.优化请求,包括合并文件、缓存资源、使用CDN、减小Cookie、启用GZip压缩和长连接等。3.优化CSS,包括将CSS文件至于HTML文档的顶部、使用外部样式、压缩CSS文件等。4.优化JS,包括减少重绘和重排、避免内联脚本阻塞并行下载、批量执行DOM...原创 2020-09-02 12:41:17 · 133 阅读 · 0 评论 -
es6解构赋值
解构赋值(★★★) ES6中允许从数组中提取值,按照对应位置,对变量赋值,对象也可以实现解构 数组解构 let [a, b, c] = [1, 2, 3]; console.log(a)//1 console.log(b)//2 console.log(c)//3//如果解构不成功,变量的值为undefined 对象解构 let person = { name: 'zhangsan'...原创 2020-09-04 11:18:21 · 69 阅读 · 0 评论 -
js 防抖和节流
很多网站都会提供一个按钮:用于返回顶部。这个按钮只会在滚动到距离顶部一定位置的时候才出现-(监听滚动事件,返回当前到顶部的距离) function showTop() { var scrollTop = document.body.scrollTop || document.documentElement.scrollTop console.log(scrollTop)}wi...原创 2020-09-14 13:05:52 · 95 阅读 · 0 评论 -
立即执行函数IIFE
(function{})() 刚刚定义好就可以马上自动执行的函数,即时函数用途非常广泛,常用于创建块级作用域,解决循环中的异步回调问题和类库封装。原创 2020-09-01 17:26:08 · 207 阅读 · 0 评论 -
简述XMLHttpRequest、JSONP的适用场景,并针对两种请求形式简述如何检测请求错误...
XMLHttpRequest用于浏览器端与服务器端异步请求数据从面实现对页面的无刷新修改,支持GET/POST请求,一般用于非跨域的场景。如果需要使用XMLHttpRequest跨域请求数据,需要通过CORS头支持。 JSONP用于跨域请求数据的场景,只支持GET请求。 XMLHttpRequest异常判断一般通过该对象的readystate和http状态码status来判断,JSONP的异常...原创 2020-09-14 08:18:41 · 323 阅读 · 0 评论 -
DocumentFragment类型的节点
DocumentFragment(文档片段)是一种独立地节点,默认不属于任何文档,因此它没有父节点,但它可以包含多种类型地子节点,例如Element、Text或Comment等。在文档中直接操作节点有时候会引起DOM树的重绘和重排,如果一下子插入大量的节点,势必会降低脚本的性能,而如果将要插入的节点先保存在文档片段中,把文档片段作为一个临时的节点仓库,然后在文档片段中对节点进行排版、加样式、改内...原创 2020-09-02 06:42:48 · 264 阅读 · 0 评论 -
深浅拷贝以及深浅拷贝的方法
先考虑一种情况,对一个已知对象进行拷贝,编译系统会自动调用一种构造函数——拷贝构造函数,如果用户未定义拷贝构造函数,则会调用默认拷贝构造函数。 执行结果:调用一次构造函数,调用两次析构函数,两个对象的指针成员所指内存相同,name指针被分配一次内存,但是程序结束时该内存却被释放了两次,会造成内存泄漏问题! 这是由于编译系统在我们没有自己定义拷贝构造函数时,会在...原创 2020-08-24 05:04:22 · 264 阅读 · 0 评论 -
ES6-Generator函数(解决异步问题)
Generator函数:一种返回迭代器的函数http://www.ruanyifeng.com/blog/2015/04/generator.html generator函数使用:1、分段执行,执行完一段yield语句自动暂停。2、可以控制阶段和每个阶段的返回值3、可以知道是否执行到结尾4、yield关键字只能在生成器内部使用,生成器内部的函数都不可以。 注意:不能使用箭头函数来创建生成器通过生...原创 2020-09-28 07:14:42 · 186 阅读 · 0 评论 -
Promise.all/race
function f1(){ return new Promise((res,rej)=>{ setTimeout(() => { res(2) }, 2000); }) } funct...原创 2020-09-27 04:41:18 · 60 阅读 · 0 评论 -
异步操作回调地狱,promise解决,async/await简化操作。
js中异步编程的四种方法http://www.ruanyifeng.com/blog/2012/12/asynchronous_javascript.html 对于异步操作,如果想让它控制台输出顺序为2、1、3,写成这样无论顺序是怎么样的,结果都是1、2、3 setTimeout(() => { console.log(2) }, 2...原创 2020-09-25 20:12:45 · 484 阅读 · 1 评论 -
js中的各种运算符(进制转换问题)
1.n进制(2-16)转十进制var a = '0xa' 里面填n进制数字例如0xaparseInt(a,16) // 10 第一个填要转的数,第二个填进制2.十进制转n进制var a = '' 里面填一个十进制数a.toString(n) 2-16进制 转哪个填那个 算术运算符中按位左移(<<) ..<<.. 将第一个操作数的所有二进制位向左移动指定位数例:10<...原创 2020-09-28 03:41:05 · 728 阅读 · 0 评论 -
__proto__和prototype原型链
https://www.cnblogs.com/cloud-/p/9152761.html什么是原型链JavaScript是面向对象的,每个实例对象都有一个proto属性,该属性指向它的原型对象,这个实例对象的构造函数有一个原型属性prototype,与实例的proto属性指向同一个对象。当一个对象在查找一个属性的时候,自身没有就会根据proto向它的原型进行查找,如果都没有,则向它的原型的原型...原创 2020-09-25 00:30:38 · 142 阅读 · 0 评论 -
ES6新特性
ES6在变量的声明和定义方面增加了let、const声明变量,有局部变量的概念,赋值中有比较吸引人的解构赋值,同时ES6对字符串、 数组、正则、对象、函数等拓展了一些方法,如字符串方面的模板字符串、函数方面的默认参数、对象方面属性的简洁表达方式,箭头函数,ES6也 引入了新的数据类型symbol,新的数据结构set和map和弱类型的WeakMap和WeakSet,symbol可以通过typeof...原创 2020-09-27 21:29:08 · 49 阅读 · 0 评论 -
函数提升和变量提升
一、变量提升在ES6之前,JavaScript没有块级作用域(一对花括号{}即为一个块级作用域),只有全局作用域和函数作用域。变量提升即将变量声明提升到它所在作用域的最开始的部分。(1) 创建函数有两种形式,一种是函数声明,另外一种是函数字面量,只有函数声明才有变量提升 console.log(a) // f a() { console.log(a) }console.log(b) //un...原创 2020-09-28 04:07:16 · 647 阅读 · 0 评论 -
Object.defineProperty()/获得对象上的属性
Object.defineProperty(对象,修改或新增的属性名,{ value:修改或新增的属性的值, writable:true/false,//如果值为false 不允许修改这个属性值 enumerable: false,//enumerable 如果值为false 则不允许遍历 configurable: false //co...原创 2020-09-27 21:10:53 · 371 阅读 · 0 评论