- 博客(29)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 浏览器HTTP缓存策略
使用缓存是前端性能优化的重要方式，既可以提高响应的速度又可以减少不必要的重复请求，从而提高服务器的吞吐量。但是有时候缓存并不适用于所有情况，有时候反而会使用户体验变差，因此需要根据不同的请求制定不同的缓存策略。
2022-04-26 15:48:47
2946
原创 前端如何进行跨域
什么是跨域跨域是指一个域下的文档或脚本试图去请求另一个域下的资源，使用XMLHttpRequest进行跨域请求会被浏览器拦截。由于浏览器同源策略，凡是发送请求url的协议、域名、端口三者之间任意一与当前页面地址不同即为跨域。跨域解决方案跨域资源共享（CORS）CORS是主流的跨域解决方案，所有浏览器都支持该功能(IE8+：IE8/9需要使用XDomainRequest对象来支持CORS)。跨域请求默认不携带cookie，这时只需要服务端设置Access-Control-Allow-Origin，
2022-02-18 17:04:41
1409
原创 常用web存储方式对比
常用web存储方式主要有cookie、Web Storage（localStorage/sessionStorage）、IndexedDB。cookieWeb StorageIndexedDB存储大小不超过4kb2.5MB到10MB一般不小于250MB数据类型仅限于字符串仅限于字符串不仅可以储存字符串，还可以储存二进制数据（ArrayBuffer 对象和 Blob 对象）数量限制存在浏览器差异，尽量每个域名cookie不超过20个无限制无限制过期
2022-02-17 11:24:08
2904
原创 Web Storage（localStorage/sessionStorage）
概述Web Storage（localStorage/sessionStorage）是同步的，会阻塞主线程，只能包含字符串，在浏览器的隐私模式下不可读取，并且无法从web worker或service worker访问Web Storage。Web Storage本质上是对字符串的读取，如果存储内容多的话会消耗内存空间，会导致页面变卡。不会由浏览器自动发给服务器，需要手动取出来放到请求里面才会发给服务器，因此可以避免CSRF攻击。sessionStorage与localStorage的唯一区别就是l
2022-02-17 10:45:03
683
原创 Cookie简介
什么是CookieCookie是由浏览器保存在本地记录用户信息的一个文件，前端可以设置，也可以通过response响应头的set-cookie字段进行设置，且Cookie的内容自动在请求的时候被传递给服务器，因此只能存储少量数据，数据一多就会显著增加每个Web 请求的大小。Cookie可以被服务器设置和浏览器每次请求会自动带上Cookie的特点导致Cookie 的安全性相对不高，但是可以被用于进行跨站用户追踪。Cookie是同步的，不能从Web worker进行访问。与LocalStorage和 Se
2022-02-17 09:37:40
731
原创 初识IndexedDB本地存储
IndexedDB是浏览器提供的本地数据库，它可以被网页脚本创建和操作。IndexedDB 允许储存大量数据，提供查找接口，还能建立索引。就数据库类型而言，IndexedDB是非关系型数据库（不支持 SQL 查询语句），更接近NoSQL数据库，并且Web Worker中可用。IndexedDB的特点键值对储存：IndexedDB内部采用对象仓库（object store）存放数据。所有类型的数据都可以直接存入，包括 JavaScript 对象。对象仓库中，数据以"键值对"的形式保存，每一个数据记录都有
2022-02-16 10:35:18
4963
1
原创 js如何识别移动端
方法一export const isMobile = (/(iPhone|iPad|iPod|iOS|Android|SymbianOS|Windows Phone|webOS|BlackBerry)/i).test(navigator.userAgent);方法二// 平台、设备和操作系统 const isMobile = !(/(Win|Mac|X11|Linux)/i).test(navigator.platform);方法三export const isMobile = (/(no
2021-11-19 16:21:02
395
原创 createObjectURL()和readAsDataURL()的区别
FileReader.readAsDataURL(file)URL.createObjectURL(file)返回值得到一段base64的字符串得到当前文件的一个内存URL内存使用返回值是转化后的超长base64字符串(长度与要解析的文件大小正相关)返回值虽然是字符串，但是是一个url地址内存清理依照JS垃圾回收机制自动从内存中清理存在于当前doucment内，清除方式只有unload()事件或revokeObjectURL()手动清除执行机制通过回调的...
2021-11-18 17:13:32
751
原创 base64、File、Blob、ArrayBuffer互转
file对象转base64export const FileToBase64 = (file) => { return new Promise((resolve, reject) => { const reader = new FileReader(); reader.onload = (e) => { resolve(e.target.result); }; reader.onerror
2021-11-09 17:47:35
492
原创 比较运算符 == 的类型转换规则
基本类型之间比较基本类型（Number, String, Boolean, Undefined）将转为数字再进行比较。undefined转换成数字是NaN，因此undefined与除null之外的其它类型值进行比较时始终返回false 。console.log(1 == "1"); // trueconsole.log(1 == true); // trueconsole.log("1" == true); // trueconsole.log(1 == undefined); // false
2021-05-19 10:49:54
559
原创 ES11（ES2020）新增语法
目录Promise.allSettled可选链空值合并运算符for in标准化export * as ns from “mod”import.meta基本数据类型BigIntglobalThisimport()私有的实例方法和访问器Promise.allSettledPromise.all有并发执行异步任务的能力，但是如果其中某个任务出现异常(reject)，所有任务都会挂掉，Promise 直接进入 reject 状态。Promise.allSettled并发任务中，无论一个任务正常或者异常，都会返
2020-08-31 16:40:28
1687
1
原创 ES10（2019）新特性
目录Array新增flat()和flatMap()方法Array.prototype.flat(depth)Array.prototype.flatMap()String新增trimStart()和trimEnd()方法Object.fromEntries()Symbol.prototype.descriptionString.prototype.matchAllFunction.prototype.toString()现在返回精确字符，包括空格和注释简化try {} catch {},修改 catch 绑
2020-08-31 15:02:32
379
原创 ES9新特性（2018）
目录Promise.finally()正则表达式命名捕获组Promise.finally()方法返回一个Promise。在promise结束时，无论结果是fulfilled或者是rejected，都会执行finally()，避免了同样的语句需要在then()和catch()中各写一次的情况。new Promise((resolve, reject) => { setTimeout(function () { reject("400"); }, 1000);}).
2020-08-27 15:53:37
212
原创 ES8新特性（2017）
异步函数（async await）async用于定义一个异步函数，该函数返回一个Promise。如果async函数返回的是一个同步的值，这个值将被包装成一个理解resolve的Promise，等同于return Promise.resolve(value)。异步函数存在以下四种使用形式：函数声明： async function foo() {}函数表达式： const foo = async function() {}对象的方式： let obj = { async foo() {} }箭头函数
2020-07-21 17:13:32
187
原创 ES7/ES2016新特性
includes()includes和indexOf类似，都可以用来判断一个数组是否包含一个指定的值。不同的是：indexOf会返回一个元素在数组中的位置，如果没有找到该元素则返回-1；includes则返回true或false。let arr = ["react", "angular", "vue"];console.log(arr.indexOf("react"));console.log(arr.includes("react"));includes() 方法也可以用于判断字符串是否包
2020-07-21 14:04:52
157
原创 ES6/ES2015常用特性汇总
目录let/constlet/const与var的区别：解构数组解构对象解构箭头函数模板字符串默认参数和rest参数（不具名参数）延展操作符/扩展运算符Promise对象Class（类）ECMAScript 6（以下简称ES6）是JavaScript语言的下一代标准。因为当前版本的ES6是在2015年发布的，所以又称ECMAScript 2015。let/constlet类似于var，区别在于let所声明的变量只在let命令所在的代码块内有效。const声明的是常量。一旦声明，常量的值就不能改变。{
2020-07-20 17:06:35
252
原创 js如何实现继承
对象冒充对象冒充是通过利用构造函数使用this关键字给所有属性和方法赋值来实现继承，临时属性、call()、apply()、bind()都可以实现对象冒充。对象冒充可以支持多重继承，也就是说一个类可以继承多个类。function Person(name) { this.name = name; this.say = function() { console.log(this.name); }}function F2E(name, id) { // 临
2020-05-17 22:13:59
143
原创 js匿名函数如何自执行
匿名函数就是没有名字的函数，匿名函数的作用是避免全局变量的污染以及函数名的冲突。匿名函数通常与自执行函数结合使用，因为匿名函数没有函数名，所以无法通过函数名调用，需要通过自执行调用。在了解匿名函数自执行之前，需要先简单了解一下函数声明和函数表达式的概念。函数声明函数声明最重要的一个特征就是函数声明提升，意思是执行代码之前先读取函数声明，并使其在执行任何代码前可用。这意味着可以把函数声明放在调用它的语句之后，同时函数声明必须要有标识符做为函数名称。fn(1); function fn(x) {
2020-05-11 15:29:43
3094
原创 Promise的用法总结
概念Promise是一个对象，它代表了一个异步操作的最终完成或者失败。Promise 对象有三种状态：Pending（初始状态，既不是成功，也不是失败状态）、Resolved（已完成，又称 Fulfilled）和 Rejected（已失败）。只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态，并且一旦状态改变，就不会再变，会一直保持这个结果。即使对已经发生变化的 Promise 对象添加回调函数，也会立即得到这个结果。创建Promise创建Promise实例时会传入两个方法
2020-05-08 17:51:08
215
原创 call、apply和bind的用法与区别
call()、apply()、bind() 都可以用来改变this的指向。它们的第一个参数都是this对象的指向。在函数调用时传递参数，call，bind方法需要直接传入，而apply方法需要以数组的形式传入。同时call()，apply()是在调用之后立即执行函数，而bind()返回的是原函数，没有立即执行，需要将函数再执行一遍。call()语法：function.call(thisAr...
2020-04-26 11:10:59
163
原创 简单了解arguments对象
argumentsarguments对象是所有（非箭头）函数中都可用的局部变量，此对象包含传递给函数的每个参数。arguments类似Array，但不是一个Array实例，除了length属性和索引元素之外没有任何Array属性。arguments对象的长度由实参（实际调用的参数）而不是形参（正式声明接受的参数）决定。形参是函数内部重新开辟内存空间存储的变量，其与arguments对象内存空间...
2020-04-17 17:31:21
203
原创 requirejs的简单使用
AMD是比较著名的前端模块化规范之一，全称是Asynchronous Module Definition，即异步模块加载机制，完整描述了模块的定义，依赖关系，引用关系以及加载机制。异步强调的是，在加载模块以及模块所依赖的其它模块时，都采用异步加载的方式，避免模块加载阻塞了网页的渲染进度。RequireJS是一个非常小巧的JavaScript模块载入框架，是AMD规范最好的实现者之一。1、引入re...
2020-04-14 15:30:21
450
原创 Seajs的简单使用
Seajs的规范称之为CMD规范（延迟执行），它既遵循AMD规范（提前执行），又遵循commonJs规范（同步加载）。CMD 推崇依赖就近，这套框架在使用的时候，建议我们使用commonjs规范。一、引入seajs 引入之后会向全局添加两个变量， 第一个是seajs，第二个是define。seajs引入文件时是以seajs所在目录为根目录的，seajs对js敏感，可以省略.js后缀。加载 s...
2020-04-13 19:17:02
509
1
原创 BroadCast Channel
BroadCast Channel 可以帮我们创建一个用于广播的通信频道。当监听同一频道的某个页面通过它发送消息时就会被其他所有页面收到。// 使用构造函数创建一个实例，可以接受一个DOMString作为频道的name标识。在其他页面，可以通过传入相同的name来使用同一个广播频道。const bc = new BroadcastChannel("broadcast");// 监听消息/...
2020-04-11 17:08:56
1013
原创 使用LocalStorage跨页面通信
LocalStorage是常用的前端本地存储方式，它有一个相关的事件StorageEvent。当LocalStorage变化时，会触发storage事件。利用这个特性，可以通过把消息写入LocalStorage，然后通过在各个页面内监听storage事件的方式来实现跨页面通信。window.addEventListener("storage", (e) => { if (e.ke...
2020-04-11 16:40:45
2839
原创 使用HTML5中window.postMessage进行页面间通信
window.postMessage虽然是html5的功能，但是支持IE8+，假如你的网站不需要支持IE6和IE7，那么可以使用window.postMessage。window.postMessage是客户端和客户端直接的数据传递，既可以跨域传递，也可以同域传递。发送数据：targetWindow.postMessage(message, targetOrigin, [transfer]);...
2020-04-11 16:20:02
308
原创 for in语句获取对象属性的顺序与定义的不一致的问题
在使用for in语句获取对象属性时，我们会发现在部分浏览器中实际的输出顺序与定义的不一致。这是因为浏览器的JavaScript 解析引擎遵循的规范不一致的原因。根据 ECMA-262（ECMAScript）第三版中描述，for-in 语句的属性遍历的顺序是由对象定义时属性的书写顺序决定的。而在现有最新的 ECMA-262（ECMAScript）第五版规范中，对 for-in 语句的遍历机制又做...
2020-04-11 11:01:56
1085
原创 window.requestAnimationFrame
requestAnimationFrame类似setTimeout，不同的是requestAnimationFrame会在浏览器下次重绘之前调用指定的回调函数，具体刷新间隔取决于浏览器的刷新频率。该方法使用一个回调函数作为参数，这个回调函数只有一个传参，DOMHighResTimeStamp，指示requestAnimationFrame() 开始触发回调函数的当前时间（performance.n...
2020-04-03 16:50:05
220
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人