javascript-interview-questions-05(Browser/DOM)

This post includes the Browser DOM related interview questions

Performance optimization

前端性能优化的方法有哪些？

使用懒加载 - 减少首屏加载时间
減少包体积 - 提升首页加载速度
合并API call - 减少网络请求次数
使用CDN - 加速资源加载速度
使用缓存 - 减少重复请求

What’s the event loop in Chrome browser?

事件循环的核心流程如下：

执行同步代码 :
所有同步代码会被依次执行，并压入调用栈。
同步代码执行完毕后，调用栈清空。
检查微任务队列 :
如果调用栈为空，事件循环会优先检查微任务队列。
将微任务队列中的任务依次取出并执行，直到微任务队列为空。
渲染更新 :
在浏览器环境中，如果需要更新 DOM 或绘制页面，此时会进行渲染。
检查宏任务队列 :
当微任务队列为空时，事件循环会从宏任务队列中取出一个任务并执行。
宏任务执行完毕后，再次回到步骤 2，检查微任务队列。

以下代码输出结果是什么？

console.log('Start'); // 1. 同步代码，立即执行

setTimeout(() => {
  console.log('Timeout'); // 5. 宏任务，最后执行
}, 0);

Promise.resolve().then(() => {
  console.log('Promise'); // 3. 微任务，优先于宏任务
});

console.log('End'); // 2. 同步代码，立即执行

答案：

Start
End
Promise
Timeout

什么是cookie?如何保证cookie的安全性？

我们现不纠结cookie的定义，而是看为什么需要cookie，可能你已经听过这个结论：HTTP是无状态的，也就是说每次请求都是独立的，服务器无法知道这次请求和上次请求是否来自同一个用户。cookie就是为了解决这个问题而诞生的。关于cookie的使用方法，可以看这篇

保证cookie的安全性，主要有以下几个方面：

设置HttpOnly属性：HttpOnly属性是cookie的一个属性，它的作用是禁止JavaScript访问cookie，这样可以防止XSS攻击。
设置Secure属性：Secure属性是cookie的一个属性，它的作用是要求cookie只能通过HTTPS协议传输，这样可以防止MITM攻击。
设置SameSite属性：SameSite属性是cookie的一个属性，它的作用是指定cookie是否可以随着跨域请求发送，这样可以防止CSRF攻击。
合理设置cookie的过期时间，过期时间够用就好，不要太长。
不要在cookie中存储敏感信息，如密码等。

以下是使用Express设置cookie的示例代码：

app.get('/set-cookie', function(req, res) {
    res.cookie('session_id', 'your-session-id-here', { 
        httpOnly: true, // 设置HttpOnly标志
        secure: true,   // 强制HTTPS传输
        sameSite: 'strict', // 防止CSRF攻击
        maxAge: 3600 // 设置Cookie有效期为1小时.
    });
    res.send('Cookie has been set');
});

localStorage和sessionStorage的区别是什么？

localStorage和sessionStorage都是HTML5提供的用于在浏览器端存储数据的机制，它们属于Web Storage API的一部分。尽管两者有相似之处，但也存在一些关键区别：

生命周期：
- localStorage：数据没有过期时间，一旦数据被存储，它将永远保留在那里，除非用户通过浏览器设置手动清除数据，或者使用JavaScript代码显式地删除它。
- sessionStorage：数据的生命周期与页面会话等同。页面会话在浏览器打开期间一直保持，包括页面重新加载或恢复。一旦浏览器关闭，所有在sessionStorage中保存的数据都会被清除。
作用范围：
- localStorage：在同一源（协议+域名+端口）下的所有窗口、标签页之间共享数据。这意味着即使你在一个标签页中修改了localStorage中的数据，在同一网站的其他标签页中也能访问到更新后的数据。
- sessionStorage：对于来自同一源的每个页面，都有其自己的独立存储空间，并且这些存储空间互不干扰。也就是说，不同的标签页或窗口间无法共享sessionStorage中的数据，即使是同一个网站。
使用场景：
- localStorage适用于需要长期存储的数据，如用户偏好设置、应用状态等。
- sessionStorage则更适合于临时性的、仅在当前会话期间有用的场景，比如保存表单数据以防止刷新页面时丢失信息。

What’s the benefit of web component?

Cross platform, framework free.

What’s the differences between `document.write` and `innerHTML`?

Answer:

document.write update the entire page.
innerHTML update the content of an element, it can be used at any time.

What’s the output of the following code?

<body>
  <script>
    document.body.style = "background-color: blue;";
    Promise.resolve().then(() => {
      document.body.style = "background-color: red;";
    });
  </script>
</body>

Answer:
The browser start to render the page after micro task queue is empty in each event loop. So the background color of the body will be red directly(You won’t see the blue background color).

How to create group for `options` in a `select` element?

Answer:
You can use optgroup element to group options in a select element.

<select>
  <optgroup label="China">
    <option>Beijing</option>
    <option>Dalian</option>
  </optgroup>
  <optgroup label="America">
    <option>Washington</option>
    <option>New York</option>
  </optgroup>
</select>