20200528.md

layout	title	tag
post	前端性能优化小记	js performance

已知

• 浏览器是多进程的
• 每个tab页是单独的一个render进程
• 需要提前了解的文章在这里 开始刷

浏览器内核模型

render进程

• 常说的JS单线程模型其实是指的单个render进程内的JS引擎
• • JS引擎中最重要的 event loop模型

* * [比较好的讲解](https://jakearchibald.com/2015/tasks-microtasks-queues-and-schedules/)

• • 异步

// wait ms milliseconds
function wait(ms) {
    return new Promise(r => setTimeout(r, ms));
}


async function series() {
    await wait(500);
    await wait(500);
    return "done!";
}

async function parallel() {
    const wait1 = wait(500);
    const wait2 = wait(500);
    await wait1;
    await wait2;
    return "done!";
}

tc39

async function logInOrder(urls) {
    for (const url of urls) {
        const response = await fetch(url);
        console.log(await response.text());
    }
}
async function logInOrder(urls) {
    // fetch all the URLs in parallel
    const textPromises = urls.map(async url => {   
        const response = await fetch(url);
        return response.text();
    });
    // log them in sequence
    for (const textPromise of textPromises) {
        console.log(await textPromise);
    }
}

async function getResponseSize(url) {
  const response = await fetch(url);
  let total = 0;
  
  // Here comes the new bit…
  for await (const value of response) {
    total += value.length;
    console.log('Received chunk', value);
  }

  return total;
}

• 页面渲染过程
• 刷
• csstriggers

webAssembly

• 复杂计算，如索引，维度计算等