前端剑解第三天

软技能：http缓存策略

http根据是否要向服务器发送请求将缓存规则分为了两类：强缓存和对比缓存（对比缓存也叫做协商缓存）

强缓存直接从缓存数据库中取出资源，无需再发送请求到服务器上：
http中用来判断是否命中强缓存的字段为Expires和Cache-Control，Cache-Control优先级高于Expires。
强缓存状态码为200，但查看chrome的network会发现状态码后面多了个注释。

对比缓存是需要经过服务器确认是否使用缓存的机制，其http状态码为304，意为not modified。
虽然客户端仍然发起了http请求服务器，但是服务器只做了标志对比来确认是否使用缓存，如果确认使用缓存，就不会再返回具体的资源了。这样做虽然没有减少请求数量，但是极大减小了请求负荷，可以明显提升请求速度和减小网络带宽。

html：如何对页面重构

1. 表格 (table) 布局改为 DIV + CSS

2. 使网站前端兼容于现代浏览器 ( 针对于不合规范的 CSS 、如对 IE6 有效的 )

3. 对于移动平台的优化

4. 针对于 SEO 进行优化

5. 深层次的网站重构应该考虑的方面

6. 减少代码间的耦合

7. 让代码保持弹性

8. 严格按规范编写代码

9. 设计可扩展的 API

10. 代替旧有的框架、语言 ( 如 VB)

11. 增强用户体验

12. 通常来说对于速度的优化也包含在重构中

13. 压缩 JS 、 CSS 、 image 等前端资源 ( 通常是由服务器来解决 )

14. 程序的性能优化 ( 如数据读写 )

15. 采用 CDN 来加速资源加载

16. 对于 JS DOM 的优化

17. HTTP 服务器的文件缓存

css：什么是FOUC？如何避免？

在引用css的过程中，如果方法不当或者位置引用不对，会导致某些页面在windows下的ie出现一些奇怪的现象，以无样式显示页面内容的瞬间闪烁，这种现象称之为文档样式短暂失效，简称FOCU。
原因大致为：

1、使用import方法导入样式表

2、将样式表放在页面底部

3、有几个样式表，放在html结构的不同位置。

其实原理很清楚：当样式表晚于结构性html加载，当加载到此样式表时，页面将停止之前的渲染。此样式表被下载和解析后，将重新渲染页面，也就出现了短暂的花屏现象。

解决方法：
使用LINK标签将样式表放在文档HEAD中。

css：字体粗细的属性？？有什么属性值？

font-weight CSS 属性指定了字体的粗细程度。 一些字体只提供 normal 和 bold 两种值。
normal
正常粗细。与400等值。
bold
加粗。 与700等值。
lighter
比从父元素继承来的值更细(处在字体可行的粗细值范围内)。
bolder
比从父元素继承来的值更粗 (处在字体可行的粗细值范围内)。

一个介于 1 和 1000 (包含) 之间的 类型值。更大的数值代表字体重量粗于更小的数值 (或一样粗)。一些常用的数值对应于通用的字体重量名称，如章节常见粗细值名称和数值对应所描述。

js：使用js来实现循环队列

队列是遵循先进先出服务的一组有序的项，队列在尾部添加新元素，并从顶部移除元素，最新添加的元素必须排在队列的末尾。

function hotPotato (nameList, num) {
    let queue = new Queue()
    for (let i = 0; i < nameList.length; i++) {
        queue.enqueue(nameList[i])
    }
    let eliminated = ''
    while (queue.size() > 1) {
        for (let i = 0; i < num; i++) {
            queue.enqueue(queue.dequeue()) // 循环队列的核心
        }
        eliminated = queue.dequeue()
        console.log(eliminated + '在击鼓传花游戏中被淘汰')
    }
    return queue.dequeue()
}

let names = ['snow', 'john', 'alia', 'sansa', 'blue']
let winner = hotPotato(names, 7)
console.log('胜利者' + winner)
// alia在击鼓传花游戏中被淘汰
// john在击鼓传花游戏中被淘汰
// blue在击鼓传花游戏中被淘汰
// sansa在击鼓传花游戏中被淘汰
// 胜利者snow