面试题目

1.dns-prefetch preload prefetch的作用和区别？

当一个网站，打开了许多第三方链接，dns解析可能会造成一定程度的延迟，dns-prefetch 可以掩盖dns解析的延迟

preload对应一定会加载的资源，并强制将它的请求优先级提到前面，加载后先存放在内存中，不会立即执行，提前加载指定的资源，不会阻塞渲染和document的onload事件，对跨域的文件使用preload要加上crossorigin属性，preload还有as属性，可以设置资源加载的优先级（as属性用于规定资源的类型，浏览器据此设置请求头里的Accept字段，以便能够使用正常的策略去请求对应的资源；as的值可以取style、script、image、font、fetch、document、audio、video等；如果忽略as属性，或者错误的as属性会使preload等同于XHR请求，浏览器不知道加载的是什么，因此会赋予此类资源非常低的加载优先级，所以一般不应省略as属性。），还可以设置资源加载完的回调函数onload，可用于网页字体文件的加载（避免font文件在其他文件后加载完，可能会影响用户体验）；也就是大部分场景下无需特意使用preload，而是类似字体文件这种隐藏在脚本、样式中的首屏关键资源。

prefetch对应后面可能会加载的资源，比如在首页加载的时候，会把首页的某个弹窗里的图片资源请求到，然后打开弹窗的时候，会直接从prefetch缓存里面去拿；异步加载的模块（典型的如单页系统中的非首页），或者，大概率即将被访问到的资源可以使用prefetch。而且只有5分钟的生命期。

window.onload事件并不会去管prefetch和preload的资源有没有下载完毕。

2.webworker，sharedworker，ServiceWorker的作用和区别？

webworker是指标准worker，仅在单一脚本中被使用，一个专用worker仅仅能被首次生成它的脚本使用。

sharedworker的上下文是SharedWorkerGlobalScope对象，共享worker可以同时被多个脚本使用，所有这些浏览上下文必须属于同源。

一个 ServiceWorker 会有一个作用范围（Scope），表示在这个范围内的页面才可以注册该 ServiceWorker，默认的作用范围是 ServiceWorker 所在路径的上一级。如：路径是 /subdir/sw.js 的 ServiceWorker，其作用范围默认是 /subdir/** ，因此/subdir/**下面的页面（如/subdir/a.html）可以正常注册该 ServiceWorker。当然你也可以在register时，指定scope为/，并且响应头设置service-worker-allowed：/。Service workers只能由HTTPS承载。

3.IndexedDB，cookie，localstorage，sessionstorage，ServiceWorker的cache的作用和区别？

cache存储在disk上，一般50mb，永久存储，存储文件，存储json

cookie设置了过期时间就存储在disk上，没有设置，就存储在内存里面，一般大小4kb，存储字符串

localstorage，sessionstorage存储在disk上，大小一般5mb，localstorage永久存储，sessionstorage关闭浏览器消失，存储字符串

memory cache一般几个G，关闭浏览器就没有了，存储文件

indexdb不少于250MB，取决于硬盘大小，可以存储二进制数据。

4.js的数字大小限制

 为9007199254740992，是2的53次方,Number.MAX_SAFE_INTEGER = 9007199254740991,

Number.MAX_VALUE > Number.MAX_SAFE_INTEGER       //true

数组的索引最大是2的32次方-1，位运算和settimeout/setinterval的delay参数也是。

5.怎么把一个gif图，通过canvas去画出来

xhr 请求文件 ---- 解析gif ---- 把每一帧的图像和播放时间存在 FRAME_LIST 里面。最后用 setInterval 来进行播放。 因为我们每一帧和播放时间都有了。所以 无论是播放、倍速、暂停、切换 上/下一帧都能轻松实现。

6.Vue 组件中的 data 为什么是一个方法

 “当一个组件被定义, data 必须声明为返回一个初始数据对象的函数,因为组件可能被用来创建多个实例。如果 data 仍然是一个纯粹的对象,则所有的实例将共享引用同一个数据对象!通过提供 data 函数,每次创建一个新实例后,我们能够调用 data 函数,从而返回初始数据的一个全新副本数据对象。

7.viewport的作用

手机浏览器是把页面放在一个虚拟的“窗口”（viewport）中，通常这个虚拟的“窗口”（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中，也不会破坏没有针对手机浏览器优化的网页的布局，用户可以通过平移和缩放来看网页的不同部分。移动版的 Safari 浏览器最新引进了viewport 这个 meta tag，让网页开发者来控制 viewport 的大小和缩放，其他手机浏览器也基本支持。

initial-scale : 初始缩放比例，页面第一次加载时的缩放比例；width : 控制viewport的大小，可以指定一个值，如600， 或者特殊的值，如device-width为设备的宽度；maximum-scale : 允许用户缩放到的最大比例，范围从0到10.0；minimum-scale : 允许用户缩放到的最小比例，范围从0到10.0；user-scalable : 用户是否可以手动缩放，值可以是：①yes、 true允许用户缩放；②no、false不允许用户缩放；

让viewport的宽度等于物理设备上的真实分辨率，不允许用户缩放。一般主流的web app都是这么设置的，它的作用其实是故意舍弃viewport，不缩放页面，这样dpi肯定和设备上的真实分辨率是一样的，不做任何缩放，网页会因此显得更细腻。