前端记录-高频面试题-html

1.script标签的属性async和defer的区别

    <script src='xxx'></script>
    <script src='xxx' async></script>
    <script src='xxx' defer></script>

这个需要我们先来了解html的加载顺序：

在html解析中遇到script标签会停止解析，去加载script资源并在加载后执行js脚本，再继续解析html。问题是遇到script加载时间比较久或者执行js中会出现白屏的情况。

async 加载资源的时候不会阻塞页面解析，但是加载好资源就会立即执行脚本，可能会阻塞页面解析。

defer 加载资源的时候不会阻塞页面解析，直到解析完成后才会按照顺序执行脚本。不会出现阻塞页面解析。

总结：

2.web work

web worker是独立的线程，运行在后台的js脚本，是浏览器提供的javaScript APi，可以避免运行时间较长的js代码阻塞主线程，提高页面的性能和响应速度。

1. 主线程创建web work

   const myWork = new Worker('./worker.js')
   

2. 给worker.js传递消息

   myWork.postMessage('hi, my name is ss')
   

3. 主线程监听消息

   myWork.addEventListener('message', function(e) {
    console.log('收到消息：' + e.data);
   });
   
   

4. worker.js中监听消息/发送消息

   onmessage = function (e) {
     console.log("Worker: Message from main ", e);
     postMessage(e.data + 1);
   };
   

备注： 在主线程中使用时，onmessage 和 postMessage() 必须挂在 worker 对象上，而在 worker 中使用时不用这样做。原因是，在 worker 内部，worker 是有效的全局作用域。

在 worker 内，不能直接操作 DOM 节点，也不能使用 window 对象的默认方法和属性。