俗话说得好，基础不牢，选型糟糕。糟糕的技术选型源自自身的技术广度不足。 — 张鑫旭 记录一些好用的原生方法，mdn文档

工具函数

atob() 和 btoa()

项目中做base64转换的时候你会怎么做，引入cryptojs吗，或者是各种其他的库，其实浏览器原生已经存在这些方法了

  1. btoa('buer')
  2. // YnVlcg==
  3. atob('YnVlcg==')
  4. // buer

URL.createObjectURL(object)

URL.createObjectURL方法来创建 Object URL，该方法接收一个Blob对象，并为其创建一个唯一的 URL，其形式为blob:<origin>/<uuid>，其实就是做一个 url 到 文件的映射

在web worker 中可用 ，但是在 service worker中不能使用（可能会造成内存问题)
也就是他创建的映射，如果应用没有关闭，所以这个时候blob对象也会一直存在内存中，可以通过URL.revokeObjectURL 来解除引用

编码

escape

对字符串进行编码，除了ASCII字母 数字 @*/+ 之外的都会被编码，这个方法是针对字符串使用的，不是用于 url ！！！

encodeURI && encodeURIComponent

encodeURI方法不会对下列字符编码ASCII字母 数字 ~!@#$&()=:/,;?+’
encodeURIComponent方法不会对下列字符编码ASCII字母 数字 ~!()’
所以encodeURIComponent比encodeURI编码的范围更大
总结
由于encodeURIComponent会编码/，所以地址不要用它，但是后面的参数可以用

  1. encodeURI("http://www.cnblogs.com/season-huang/some other thing")
  2. > "http://www.cnblogs.com/season-huang/some%20other%20thing"
  3. encodeURIComponent("http://www.cnblogs.com/season-huang/some other thing")
  4. > "http%3A%2F%2Fwww.cnblogs.com%2Fseason-huang%2Fsome%20other%20thing"
  5. // 所以当参数中含有/，#等符号的时候，使用
  6. var param = "http://www.cnblogs.com/season-huang/"; //param为参数
  7. param = encodeURIComponent(param);
  8. var url = "http://www.cnblogs.com?next=" + param
  9. console.log(url)
  10. > "http://www.cnblogs.com?next=http%3A%2F%2Fwww.cnblogs.com%2Fseason-huang%2F"

性能优化

loading=”lazy” 图片懒加载

  1. <img src="pic.jpg" alt="" loading="lazy">

结合渐进式图片的加载，可以优化在网络带宽不足，尤其是移动端图片加载时间较长造成页面白屏过长
image.png
实际上有两种方式可以实现这种渐进式效果，一种是图像隔行扫描（Interlace）， 中文可以成为交错，另外一种叫做图像渐进式扫描（Progressive）。

  1. 隔行扫描可以在gif/png中实现。隔行GIF是指图像文件是按照隔行的方式来显示的， 比如先出奇数行，再出偶数行，造成图像是逐渐变清楚的。将图像文件保存成隔行 GIF 格式的方法是，在 Photoshop中进行保存时，图片选项选择 交错
  2. 渐进式扫描在在jpg中实现。逐级JPG文件可以让图像先以比较模糊的形式显示， 随着图像文件数据不断从网上传过来，图像会逐渐变清晰。 这样做的好处是图像可以尽快地显示出来，虽然图像不很完美， 但是却让浏览者看到了希望，并且图像在不断地变好。将图像文件保存成逐级 JPG格式的方法是，在Photoshop中进行保存时，图片选项选择 连续

渐进式图片也会增加图片的大小（ 5%左右
image.png
参考：
https://blog.csdn.net/greenerycn/article/details/1458231
http://www.libpng.org/pub/png/pngintro.html

页面数据相关

Navigator.sendBeacon()

如果想在用户关闭页面的时候，发送一个页面统计数据。unload中的异步请求会被忽略掉，但是可以在 beforeunload 的钩子里写同步请求函数，这会造成本页面延迟关闭，进而导致下个页面延迟加载。

sendBeacon方法可以让用户异步的发送数据，同时不会延迟页面卸载和下一个页面加载

document.hidden

可以用来检测当前页面的tab是否在活跃状态

  1. setInterval(() => {
  2.   console.log(document.hidden)
  3. }, 1000)