script标签&&图片格式&&汉诺塔&&prefetch与preload

下面的都是我在百度面试时遇到的自身问题，记录下来，做个反思。

script标签

概念

MDN解释：HTMLscript元素用于嵌入或引用可执行脚本。这通常用作嵌入或者指向 JavaScript代码。它也能在其他语言中使用，比如 WebGL 的 GLSL 着色器语言。

script意义上为脚本，可以用src指向外部文件，在跨域请求资源也有很重要的应用。

属性（重点）

1.script

浏览器在解析 HTML 的时候，如果遇到一个没有任何属性的 script 标签，就会暂停解析，先发送网络请求获取该 JS 脚本的代码内容，然后让 JS 引擎执行该代码，当代码执行完毕后恢复解析。
script可能阻塞了浏览器对 HTML 的解析，如果获取 JS 脚本的网络请求迟迟得不到响应，或者JS 脚本执行时间过长，都会导致白屏，用户看不到页面内容。

2.async

加载阻塞，执行阻塞解析dom
当浏览器遇到带有 async 属性的 script 时，请求该脚本的网络请求是异步的，不会阻塞浏览器解析 HTML，一旦网络请求回来之后，如果此时 HTML 还没有解析完，浏览器会暂停解析，先让 JS 引擎执行代码，执行完毕后再进行解析。当然，如果在 JS 脚本请求回来之前，HTML 已经解析完毕了，那就啥事没有，立即执行 JS 代码。
同时async 是不可控的，因为执行时间不确定，你如果在异步 JS 脚本中获取某个 DOM 元素，有可能获取到也有可能获取不到。而且如果存在多个 async 的时候，它们之间的执行顺序也不确定，完全依赖于网络传输结果，谁先到执行谁。

3.defer

当浏览器遇到带有 defer 属性的 script 时，获取该脚本的网络请求也是异步的，不会阻塞浏览器解析 HTML，一旦网络请求回来之后，如果此时 HTML 还没有解析完，浏览器不会暂停解析并执行 JS 代码，而是等待 HTML 解析完毕再执行 JS 代码。如果存在多个 defer script 标签，浏览器（IE9及以下除外）会保证它们按照在 HTML 中出现的顺序执行，不会破坏 JS 脚本之间的依赖关系。

参考：https://juejin.cn/post/6894629999215640583

图片格式

1.jpg（jepg）

JPEG的压缩方式通常是破坏性资料压缩（lossy compression）,意即在压缩过程中图像的品质会遭受到可见的破坏，有损压缩。
适用于存储色彩丰富、层次分明的图片，不适合于线条绘图（drawing）和其他文字或图标（iconic）的图形，因为它的压缩方法用在这些类型的图形上，得到的结果并不好(PNG和GIF通常是用来存储这类的图形)

2.png

是一种无损数据压缩位图图形文件格式。支持存储附加文本信息,以保留图像名称、作者、版权、创作时间、注释等信息。
如果保存文本，线条或类似的边缘清晰，有大块相同颜色区域的图像，PNG格式的压缩效果就要比JPEG好很多，并且不会出现JPEG那样的高对比度区域的图像有损。如果图像既有清晰边缘，又有照片图像的特点，就需要在这两种格式之间权衡一下了。JPEG不支持透明度。

3.webp

体积小，质量好，但兼容性不高
WebP 的优势体现在它具有更优的图像数据压缩算法，能带来更小的图片体积，而且拥有肉眼识别无差异的图像质量；同时具备了无损和有损的压缩模式、Alpha 透明以及动画的特性，在 JPEG 和 PNG 上的转化效果都相当优秀、稳定和统一。

4.gif

1.优秀的压缩算法使其在一定程度上保证图像质量的同时将体积变得很小。
2.可插入多帧,从而实现动画效果。
3.可设置透明色以产生对象浮现于背景之上的效果。

参考：https://www.zhihu.com/question/27201061和https://www.cnblogs.com/diligenceday/p/4472035.html

汉诺塔

   /*
   将起始柱上的 n-1 个圆盘移动到辅助柱；
   将起始柱上最大的圆盘移动到目标柱；
   将辅助柱中的 n-1个圆盘移动到目标柱。
   */
   function hanNuoTowers(int topN, char from, char inter, char to) {
        if (topN == 1){
            //只有一个盘子时，直接从起始柱移动到目标柱
            console.log(`Disk  from  ${from}  to  ${to}`);
        }else {
            //起始柱的小盘子移动到辅助柱
            doTowers(topN - 1, from, to, inter);  
            //起始柱的大盘子移动到目标柱
            console.log(`Disk  ${topN}  from  ${from}  to  ${to}`);
            //辅助柱的小盘子移动到目标柱，执行到这一步，实现一轮大小盘子的正确移动
            doTowers(topN - 1, inter, from, to);
        }
    }

prefetch与preload

prefetch(链接预取）是一种浏览器机制，其利用浏览器空闲时间来下载或预取用户在不久的将来可能访问的文档。网页向浏览器提供一组预取提示，并在浏览器完成当前页面的加载后开始静默地拉取指定的文档并将其存储在缓存中。当用户访问其中一个预取文档时，便可以快速的从浏览器缓存中得到。–MDN
preload表示用户十分有可能需要在当前浏览中加载目标资源，所以浏览器必须预先获取和缓存对应资源。

    <link rel="prefetch" href="static/xxx.png">
    <link rel="preload" href="static/xxx.png">

preload用来声明当前页面的关键资源，强制浏览器尽快加载；而prefetch用来声明将来可能用到的资源，在浏览器空闲时进行加载。

• 大部分场景下无需特意使用preload
• 类似字体文件这种隐藏在脚本、样式中的首屏关键资源，建议使用preload
• 异步加载的模块（典型的如单页系统中的非首页）建议使用prefetch
• 大概率即将被访问到的资源可以使用prefetch提升性能和体验