古兰精

2021年10月9日

浅析hash特点、hashchange事件介绍及其常见应用场景（不同hash对应不同事件处理、移动端大图展示状态后退页面问题、原生轻应用头部后退问题、移动端自带返回按钮二次确认问题）

摘要：一、hash、hashchange 事件介绍 1、hash 是什么？ hash 属性是一个可读可写的字符串，该字符串是 URL 的锚部分，一般有当前页面中 href 中 # 地址触发。hash 即 URL 中 # 字符后面的部分，具有如下特点：使用浏览器访问网页时，如果网页URL中带有hash，页阅读全文

posted @ 2021-10-09 22:43 古兰精阅读(1567) 评论(0) 推荐(0)

浅析window.name属性介绍、利用window.name+隐藏iframe获取跨域数据的实现原理、应用场景（数据传递、判断是否第一次进入窗口）

摘要：一、window下自带的 name 属性不知道大家有没有发现这样一种情况：在控制台里直接输出未声明变量，正常情况应该是会报错的，而且声明未赋值的变量输出应该是undefined；但是偏偏就个别特例，就是name属性。其实 window 自身就带有 name 这个属性，在控制台输入window可以阅读全文

posted @ 2021-10-09 21:49 古兰精阅读(1452) 评论(0) 推荐(0)

浅析浏览器跨页面通信的方式：localStorage+StorageEvent事件、BroadCast Channel广播通信、Service Worker消息中转、postMessage、直接引用-window.open + window.opener、WebSocket服务端推送、利用iframe桥实现非同源页面通信

摘要：在浏览器中，我们可以同时打开多个Tab页，每个Tab页可以粗略理解为一个“独立”的运行环境，即使是全局对象也不会在多个Tab间共享。然而有些时候，我们希望能在这些“独立”的Tab页面之间同步页面的数据、信息或状态。正如下面这个例子：我在列表页点击“收藏”后，对应的详情页按钮会自动更新为“已收藏”状阅读全文

posted @ 2021-10-09 18:28 古兰精阅读(2552) 评论(0) 推荐(0)

2021年10月8日

浅析 postMessage 方法介绍、如何接收数据（监听message事件及其属性介绍）、使用postMessage的安全注意事项、具体使用方式（父子页面如何互发消息、接收消息）

摘要： postMessage 是 html5 引入的API，postMessage()方法允许来自不同源的脚本采用异步方式进行有效的通信，可以实现跨文本文档、多窗口、跨域消息传递，多用于窗口间数据通信，这也使它成为跨域通信的一种有效的解决方案。一、Window postMessage() 方法介绍 po 阅读全文

posted @ 2021-10-08 18:46 古兰精阅读(19417) 评论(0) 推荐(0)

2021年9月30日

浅析跨域请求深入理解：跨域请求是否会在服务端被执行

摘要：一、问题如果一个请求跨域了，这个请求会不会在服务端被执行？这个问题看似简单，但是其实这一个问题就足以看出大家对跨域的理解，如果平时只是了解了个概念，那这个问题大概率不会答的那么好。二、解决思路 1、其实这个问题主要要从以下几个方面去考虑：（1）跨域究竟是谁的策略？（2）在什么时机会拦截请阅读全文

posted @ 2021-09-30 21:57 古兰精阅读(471) 评论(0) 推荐(0)

浅析Web前端水印方案：前端加水印和服务端加水印的适用场景、不同的实现方案、使用 MutationObserver 监听dom元素变化、MutationObserver API 介绍

摘要：一、问题背景为了防止信息泄露或知识产权被侵犯，在web的世界里，对于页面和图片等增加水印处理是十分有必要的，水印的添加根据环境可以分为两大类，前端浏览器环境添加和后端服务环境添加，根据实现方式又可以分为两大类，显性水印和数字水印。简单对比一下这两种方式的特点： 1、前端浏览器加水印：（1）减轻服阅读全文

posted @ 2021-09-30 21:19 古兰精阅读(2454) 评论(0) 推荐(0)

2021年9月29日

浅析从基础层和应用层设计前端架构如何做

摘要：本篇文章不会更多侧重于具体技术实现，而是尝试从更高角度出发，分析为什么要这么做，这些设计能解决什么问题，成本和收益如何。一、综合考量 1、核心思想解决问题：前端架构的设计，应是用于解决已存在或者未来可能发生的技术问题，增加项目的可管理性、稳定性、可扩展性。人效比：对于需要额外开发工作量的事务，阅读全文

posted @ 2021-09-29 18:48 古兰精阅读(746) 评论(0) 推荐(0)

浅析JavaScript中变量存储在堆中还是栈中-字符串、数字、其他类型分别是怎样存储的：984k的栈区为啥能装几十M的字符串、V8对字符串的处理过程（存在则复用地址，不存在则新建内存后把地址赋给变量/字符串不可变的理解）、数字（小整数在栈，其他在堆）、其他基本类型（引擎初始化时分配地址，之后都是复用同一个地址）

摘要：看到这个问题，相信大家都觉得这个题目实在基础的不能再基础了。随手百度一下，就能看到很多人说：基本类型存在栈中，引用类型存在堆中。真的这么简单么？如果js中基础类型是存在栈里的，那为什么默认栈区大小为984KiB的V8可以允许声明500MiB大小的字符串呢？如果基础类型也是存在堆里的，又是怎么gc的阅读全文

posted @ 2021-09-29 13:47 古兰精阅读(1186) 评论(0) 推荐(0)

浅析Map和WeakMap有什么不同之处、强/弱引用的区别、WeakMap详解、map的缺点和使用WeakMap的好处

摘要：一、Map 和 WeakMap 有什么不同之处 1、Map 是为了解决对象中的 key 只能为字符串的缺陷 //基本的对象 const obj = { 'name': '张飞'，, 'age': 18 } // Map let m = new Map() a.set(obj,1) 我们的 Map 是阅读全文

posted @ 2021-09-29 11:26 古兰精阅读(1382) 评论(1) 推荐(0)

2021年9月26日

浅析JavaScript图片文字隐写术：什么是隐写术、隐写术与密码学区别、Unicode 中的不可见字符、StegCloak库实现隐写术

摘要：这篇文章主要记录及介绍一下前端实现隐写术及相关知识，具体内容不细节展开，因为感觉工作中实用性不强，就是知道有这个东西，可以实现这些东西，以后如果需要使用的话，再细细研究学习，不过真的感觉不错，会玩，哈哈。主要推荐下面这篇文章：《通过文本与图片的隐写来隐藏信息(非常有意思!)》- https://m 阅读全文

posted @ 2021-09-26 18:51 古兰精阅读(977) 评论(0) 推荐(0)

公告