HTML元素、标签、脚本等

Web用Unicode+Emoji

七种Emoji造字方式

字符值引用（numeric character reference, NCR） - 用Unicode字符码来表示 如 & 十六进制 - & 十进制 - &
JavaScript使用格式 - \u23\uFE0F\u20E3
HTML使用格式 - #️⃣

字符实体引用(character entity reference, CER) - 用直观的实体名来表示。 如 & - & 意思为ampersand

Web JavaScript

读取cookie新API（仅支持https） - await cookieStore.get('x_id');

textContent会保留隐藏标签中的文本，比如<script>alert(true);</script>中的JavaScript文本；而innerText则只保留运行时的实际文本。
知名大数字js库 - https://github.com/MikeMcl/big.js
浏览器Javascript文字朗读API - https://www.cnblogs.com/Amd794/p/17871840.html

弹框：
  if (confirm("确认执行？")) { x = "按确认返回值为true！"; } else { x = "您按了取消！"; }

Lambda/async、await：
  async标注的function返回值return 1会隐式包装为return Promise.resolve(1); 无return则不能链式then(...);
  fetch的then(...)无论有没有return均能链式下去。

后台线程：
  注意 - Blob网址“blob:https://example.com/...”能遵守CORS跨域，但DataURI网址“data:text/javascript;base64,...”则永远判定为不同域，故只能用no-cors关闭跨域，且不会返回响应数据。

  new Worker(URL.createObjectURL(new Blob(["console.log("+location.href+")"])));
  var jsFunction = function () { postMessage("payload"); fetch('https://example.com').then(r =>console.log(r)); };
  new Worker(URL.createObjectURL(new Blob([`(${jsFunction.toString()})()`]))).onmessage = (e) => { console.log(e.data); });
                    };
  // 注意 - 以下所用btoa(...)入参不支持中文、Unicode字符,同时JS中fetch执行时，即使不跨域也会报，必须加no-cors才能解决跨域，且拿不到响应。
  new Worker('data:text/javascript;base64,' + btoa("console.log(123)"));
  new Worker('data:text/javascript;base64,' + btoa(" fetch('https://example.com',{mode:'no-cors'}).then(r =>console.log(r)); "));  // no-cors即只执行不关心响应
  new Worker('data:text/javascript;base64,' + btoa("(" + jsFunction.toString() + ")()"));

文件API:
  File API(HTML标签) - 操作系统本地硬盘真实文件方式；
  File API(FileReader API) - 浏览器本地沙盒方式；
  File System Access API - 操作系统本地硬盘真实文件方式；

通过Blob构造File对象：
  无type构造 - new File([new Blob(["x"])], "x.txt");

Fetch API:
  fetch("https://congci.com/.well-known/static/images/old/home-page-logo.png").then(r => {
    const file = new File([r.blob()], "x.png", {type: "image/png"});
    const fd = new FormData(); fd.append("file", file); console.log(fd.get("file"));
  });

  var type = {type: "text/plain"};
  var file = new File([new Blob(["x"], type)], "x.txt", type);
  var fd = new FormData(); fd.append("file", file);
  fetch('/main/api/default/ga/anonymous/temp/main/test-google-drive',
    {method: 'POST', body: fd}).then(r => console.log(r));

  CORS - 简单请求HEAD\GET\POST执行前不会发送OPTIONS预请求(Preflight request)。

  JS前端读取Java后端响应的File流：
    Java - Response.ok((Object)file).type("audio/mpeg").build(); // todo - 最好改整体传输为流式返回
   循环式读取：
    const chunks = [];
    // const reader = response.body.pipeThrough(new TextDecoderStream()).getReader(); // 或 pipeThrough(new CompressionStream('gzip'))
    const reader = response.body.getReader(); // TextDecoderStream会先将value字节改为文本
    while (true) {
        const {value, done} = await reader.read();
        if (done) {
            break;
        }
        chunks.push(value);
        console.log('Received', value);
    }
   异步迭代器：
    let total = 0; const response = await fetch("https://example.org");

    // [Chrome124+已支持]或手动处理下：
    if (!response.body[Symbol.asyncIterator]) {
        response.body[Symbol.asyncIterator] = () => {
            const reader = response.body.getReader();
            return {next: () => reader.read()};
        };
    }

    for await (const chunk of response.body) { total += chunk.length; }
    console.log(total);

文件多选和上传按钮隐藏

Web CSS

text-wrap:balance - 文本包裹多行字数保持均衡

CSS animation 动画：
document.getElementById("showArea").animate([
  // @keyframes
  { transform: 'translateY(0px)' },
  { transform: 'translateY(-300px)' }
], {
  // sync options
  duration: 1000,
  fill: "both", // 停在最后一帧，而不是回到第一帧。
  iterations: Infinity // 填1则只执行一次。
});