2019春招前端面试预测题!

主要考：<code>animation</code> 用法

值

描述

<code>animation-name</code>

规定需要绑定到选择器的 keyframe 名称。

<code>animation-duration</code>

规定完成动画所花费的时间，以秒或毫秒计。

<code>animation-timing-function</code>

规定动画的速度曲线。

<code>animation-delay</code>

规定在动画开始之前的延迟。

<code>animation-iteration-count</code>

规定动画应该播放的次数。

<code>animation-direction</code>

规定是否应该轮流反向播放动画。

最开始的思路是用定时器实现，最后没有想的太完整，面试官给出的答案是用<code>requestAnimationFrame</code>。

定时器思路

<code>requestAnimationFrame</code>

由于之前没有用过这个 <code>API</code> 所以是现学的。

不足之处请指正（毕竟是现学的）顺便查了一下优势：

浏览器可以优化并行的动画动作，更合理的重新排列动作序列，并把能够合并的动作放在一个渲染周期内完成，从而呈现出更流畅的动画效果

解决毫秒的不精确性

避免过度渲染（渲染频率太高、<code>tab</code> 不可见暂停等等）

注：<code>requestAnimFrame</code> 和 定时器一样也头一个类似的清除方法 <code>cancelAnimationFrame</code>。

第一种：

第二种

暂时想到了两种。

第一种

第三种

第四种 <code>flex</code>

<code>static</code> 是默认值

<code>relative</code> 相对定位 相对于自身原有位置进行偏移，仍处于标准文档流中

<code>absolute</code> 绝对定位 相对于最近的已定位的祖先元素, 有已定位(指<code>position</code>不是<code>static</code>的元素)祖先元素, 以最近的祖先元素为参考标准。如果无已定位祖先元素, 以<code>body</code>元素为偏移参照基准, 完全脱离了标准文档流。

<code>fixed</code> 固定定位的元素会相对于视窗来定位,这意味着即便页面滚动，它还是会停留在相同的位置。一个固定定位元素不会保留它原本在页面应有的空隙。

因为项目考虑兼容 <code>IE9</code> 所以直接说用的不多

使用媒体查询做的响应式布局，根据不同屏幕宽度加载不同<code>css</code>.

<code>let</code> 为 <code>ES6</code> 新添加申明变量的命令，它类似于 <code>var</code>，但是有以下不同：

<code>var</code> 声明的变量，其作用域为该语句所在的函数内，且存在变量提升现象

<code>let</code> 声明的变量，其作用域为该语句所在的代码块内，不存在变量提升

<code>let</code> 不允许重复声明.

当我们执行代码时，我们可以简单的理解为新变量分配一块儿内存，命名为<code>a</code>，并赋值为<code>2</code>，但在运行的时候编译器与引擎还会进行两项额外的操作：判断变量是否已经声明：

首先编译器对代码进行分析拆解，从左至右遇见<code>var a</code>，则编译器会询问作用域是否已经存在叫 <code>a</code> 的变量了，如果不存在，则招呼作用域声明一个新的变量<code>a</code>，若已经存在，则忽略<code>var</code> 继续向下编译，这时<code>a = 2</code>被编译成可执行的代码供引擎使用。

引擎遇见<code>a=2</code>时同样会询问在当前的作用域下是否有变量<code>a</code>，若存在，则将<code>a</code>赋值为<code>2</code>（由于第一步编译器忽略了重复声明的<code>var</code>，且作用域中已经有<code>a</code>，所以重复声明会发生值得覆盖而并不会报错）。若不存在，则顺着作用域链向上查找，若最终找到了变量<code>a</code>则将其赋值<code>2</code>，若没有找到，则招呼作用域声明一个变量<code>a</code>并赋值为<code>2</code>。

参考链接

差不多应该是这样，记不太清了

<code>CommonJS</code> 模块的重要特性是加载时执行，即脚本代码在 <code>require</code> 的时候，就会全部执行。一旦出现某个模块被”循环加载”，就只输出已经执行的部分，还未执行的部分不会输出。

<code>ES6</code> 模块是动态引用，如果使用 <code>import</code> 从一个模块加载变量，那些变量不会被缓存，而是成为一个指向被加载模块的引用，需要开发者自己保证，真正取值的时候能够取到值。

<code>import/export</code> 最终都是编译为 <code>require/exports</code> 来执行的。

<code>CommonJS</code> 规范规定，每个模块内部，<code>module</code> 变量代表当前模块。这个变量是一个对象，它的 <code>exports</code> 属性（即 <code>module.exports</code> ）是对外的接口。加载某个模块，其实是加载该模块的 <code>module.exports</code> 属性。

<code>export</code> 命令规定的是对外的接口，必须与模块内部的变量建立一一对应关系。

这个题没答出来??

最开始的思路是遍历来判断，但是最后好像没有说清楚，查了下，好像可以转换为字符串来判断。

减少 <code>HTTP</code> 请求数

减少 <code>DNS</code> 查询

使用 <code>CDN</code>

避免重定向

图片懒加载

减少 <code>DOM</code> 元素数量

减少 <code>DOM</code> 操作

使用外部 <code>JavaScript</code> 和 <code>CSS</code>

压缩 <code>JavaScript</code> 、 <code>CSS</code> 、字体、图片等

优化 <code>CSS Sprite</code>

使用 <code>iconfont</code>

字体裁剪

多域名分发划分内容到不同域名

尽量减少 <code>iframe</code> 使用

避免图片 <code>src</code> 为空

把样式表放在 中

把脚本放在页面底部

欢迎补充。。。

使用命名空间。

我说Vue项目中使用了，然后就没问了。

不知道怎么怎么回答，不都是使用模块来写的么，然后就说是使用模块。

<code>router</code> 是 <code>hash</code> 改变

<code>location.href</code> 是页面跳转，刷新页面

通过 <code>Object.defineProperty</code> 实现的

<code>ES6</code> 提供了新的数据结构 <code>Set</code> 它类似于数组，但是成员的值都是唯一的，没有重复的值。

<code>ES6</code> 提供了 <code>Map</code> 数据结构。它类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键。也就是说，<code>Object</code> 结构提供了“字符串—值”的对应，<code>Map</code>结构提供了“值—值”的对应，是一种更完善的 <code>Hash</code> 结构实现。

<code>WeakMap</code> 结构与 <code>Map</code> 结构基本类似，唯一的区别是它只接受对象作为键名（ <code>null</code> 除外），不接受其他类型的值作为键名，而且键名所指向的对象，不计入垃圾回收机制。

<code>WeakMap</code> 最大的好处是可以避免内存泄漏。一个仅被 <code>WeakMap</code> 作为 <code>key</code> 而引用的对象，会被垃圾回收器回收掉。

<code>WeakMap</code> 拥有和 <code>Map</code> 类似的 <code>set(key, value)</code> 、<code>get(key)、has(key)</code>、<code>delete(key)</code>~~ 和 <code>clear()</code> ~~方法, 没有任何与迭代有关的属性和方法。

<code>clear</code> 已经废弃了.

部分渲染树（或者整个渲染树）需要重新分析并且节点尺寸需要重新计算。这被称为重排。注意这里至少会有一次重排-初始化页面布局。

由于节点的几何属性发生改变或者由于样式发生改变，例如改变元素背景色时，屏幕上的部分内容需要更新。这样的更新被称为重绘。

添加、删除、更新 <code>DOM</code> 节点

通过 <code>display: none</code> 隐藏一个 <code>DOM</code> 节点-触发重排和重绘

通过 <code>visibility: hidden</code> 隐藏一个 <code>DOM</code> 节点-只触发重绘，因为没有几何变化

移动或者给页面中的 <code>DOM</code> 节点添加动画

添加一个样式表，调整样式属性

用户行为，例如调整窗口大小，改变字号，或者滚动。

浏览器缓存分为强缓存和协商缓存。当客户端请求某个资源时，获取缓存的流程如下：

先根据这个资源的一些 <code>http header</code> 判断它是否命中强缓存，如果命中，则直接从本地获取缓存资源，不会发请求到服务器；

当强缓存没有命中时，客户端会发送请求到服务器，服务器通过另一些<code>request header</code>验证这个资源是否命中协商缓存，称为<code>http</code>再验证，如果命中，服务器将请求返回，但不返回资源，而是告诉客户端直接从缓存中获取，客户端收到返回后就会从缓存中获取资源；

强缓存和协商缓存共同之处在于，如果命中缓存，服务器都不会返回资源；

区别是，强缓存不对发送请求到服务器，但协商缓存会。

当协商缓存也没命中时，服务器就会将资源发送回客户端。

当 <code>ctrl+f5</code> 强制刷新网页时，直接从服务器加载，跳过强缓存和协商缓存；

当 <code>f5</code> 刷新网页时，跳过强缓存，但是会检查协商缓存；

Expires（该字段是 <code>http1.0</code> 时的规范，值为一个绝对时间的 <code>GMT</code> 格式的时间字符串，代表缓存资源的过期时间）

Cache-Control:max-age（该字段是 <code>http1.1</code> 的规范，强缓存利用其 <code>max-age</code> 值来判断缓存资源的最大生命周期，它的值单位为秒）

Last-Modified（值为资源最后更新时间，随服务器response返回）

If-Modified-Since（通过比较两个时间来判断资源在两次请求期间是否有过修改，如果没有修改，则命中协商缓存）

ETag（表示资源内容的唯一标识，随服务器response返回）

If-None-Match（服务器通过比较请求头部的If-None-Match与当前资源的ETag是否一致来判断资源是否在两次请求之间有过修改，如果没有修改，则命中协商缓存）