文章目录
H5新增特性
MutationObserver 监听DOM变化
是什么
原生api中用来监听node节点变化的一个类。
监听DOM发生变化时，将回调函数放入微队列中，实现多次 DOM 变化后，一次触发异步调用，这样即使频繁地操纵 DOM，也不会对性能造成太大的影响。
原理
观察者模式
使用场景
vue2.0 nextTick 实现原理时，如果Promise不兼容就采用MutationObserver
DOMContentLoaded事件
script标签的async属性
学习笔记:https://blog.csdn.net/qq_41370833/article/details/125344985
自定义属性
自定义属性的定义
标签中 data-*开头的属性，使用data-*属性来嵌入自定义数据
- 属性名不应该包含任何大写字母，并且在前缀 “data-” 之后必须有至少一个字符
- 属性值可以是任意字符串
- 用户代理会完全忽略前缀为 “data-” 的自定义属性，比如在vue中通过
event.target.dataset获取到的是*的内容
自定义属性的作用
存储的自定义数据能够被页面的 JavaScript 中利用，以创建更好的用户体验（不进行 Ajax 调用或服务器端数据库查询），比如实现图片懒加载。
自定义属性的使用
element.属性 获取元素内置属性值
element.getAttribute('属性') 获取自定义属性
element.dataset.属性 获取自定义属性，忽略data前缀，采用驼峰命名写法
`element.getAttribute(‘属性’)`` 移除属性
class是保留关键字，但是在element.getAttribute(‘属性’); 方法中可以直接使用；element.属性 写法则需要使用className代替
//获取标签的原属性
var box=document.querySelector('.box');
console.log(box.className);
console.log(box.title);
//获取标签的自定义属性
console.log(box.dataset['name']); //忽略前缀
console.log(box.dataset['myName']);//自定义属性名为date-my-name获取时需要驼峰命名法
console.log(box.getAttribute("data-my-name"))//不忽略前缀
history接口方法 pushState()/replaceState() 用来在浏览历史中添加和修改记录
pushState(state,title,url):可以改变网址(不能跨域)而不刷新页面，在浏览器中添加记录，网页不会真正跳转，本质上网页还是停留在原页面。
state: 与指定网址相关的状态对象，popState事件触发时，该对象会作为参数传入回调函数，如果不需要这个对象，可填null。
title：新网址的标题，可忽略填bull
url：新网址，必须和当前页面处在同一个域
只有用户点击浏览器倒退按钮和前进按钮，或者使用 JavaScript 调用History.back()、History.forward()、History.go()方法时才会触发。
不会触发popstate的情况
1.调用 history.pushState() 或者 history.replaceState()
2.该事件只针对同一个文档，如果浏览历史的切换，导致加载不同的文档
3.页面第一次加载的时候
案例
假设当前地址http://mozilla.org/foo.html
var stateObj = { foo: "bar" };
history.pushState(stateObj, "page 2", "bar.html");
在浏览器记录中push进了http://mozilla.org/bar.html 记录，此时地址栏显示http://mozilla.org/bar.html ,但是页面不会刷新，只是改变浏览器的记录。将记录添加进浏览器，当访问其他地址后，后退就可以退回此记录。
history.replaceState()同pushState()方法，区别类似于replace和push。
push方法会将当前网址压入栈，成为新的栈顶元素。
repalce方法会用当前的网址替换原来的栈顶元素，成为新的栈顶元素。
本地存储localstorage/sessionstorage
用于数据存储,存储的键值对格式的字符串
学习笔记:https://blog.csdn.net/qq_41370833/article/details/125639364
postMessage DOM跨域
跨文档消息机制:通过使用otherWindow.postmessage(data, origin, [transfer]和不同源的 DOM 进行通信。
语法:otherWindow.postmessage(data, origin, [transfer])
- otherWindowb表示其他窗口的一个引用，是接收数据的一方
iframe的contentWindow
<body>
<iframe class="childIframe" scr="http://XXX:8080"></iframe>
<script>
// 获取iframe的contentWindow
const win = document.querySelector('.childIframe').contentWindow
</script>
</body>
执行window.open()方法返回的对象
<body>
<script>
// 获取window.open()打开窗口的引用
const win = window.open('http://XXX:8888')
</script>
</body>
- origin 指定哪些窗口能接收到消息事件
1.父窗口给子窗口发送消息的方式：
document.getElementById('myframe').contentWindow.postMessage('MessageFromIndex1','*');
其实就是在父窗口中操作子窗口发消息，然后让子窗口接收自己刚才发的消息。
2.子窗口给父窗口发送消息的方式：
window.parent.postMessage( {msg: 'MessageFromIframePage'}, '*');
其实就是在子窗口中操作父窗口发消息，然后让父窗口接收自己刚才发的消息。
总结：所谓的跨窗口发送消息，就是通过在别的窗口操作本窗口发送消息，然后本窗口再自己接收的方式实现。
语义化标签
canvas和svg的区别
| - | canvas | svg |
|---|---|---|
| 缩放失真 | canvas是一块画布，可以在里面绘制图片(位图)，当画布缩放时，内部的图片也会缩放会出现失真情况。 | svg是可缩放矢量图，缩放不会失真。 |
| 修改途径 | 只能通过js修改 | svg绘图时，每个图形都是以DOM节点的形式插入到页面中的，我们可以通过js来直接操作这些图形。也可以通过css修改 |
| 应用场景 | 适合图像密集型的游戏应用 | 适合大面积，小数量的场景。 |
3955
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
