前端剑解第四天

软技能;304太多有什么影响？

如果客户端发送了一个带条件的GET请求且该请求已被允许，而文档的内容(自上次访问以来或者根据请求的条件)并没有改变，则服务器返回一个304状态码。简单理解成：客户端访问服务器时，服务器已经执行了GET，但文件未变化。

通俗点来理解：为了提高网站访问速度，服务器给访问过的某些页面设置了缓存机制。当客户端请求这些页面时，服务器将根据缓存的内容判断页面是否更新过，如果页面未更新过，它就会返回一个304状态码，这时客户端直接调用缓存的内容，而不必进行第二次调用及下载。

综上所述，304状态码代表了客户端请求的内容没有变化，严格来说这并不是一个错误。而且，304状态码在一定程度上起到了降低服务器带宽、提高网站访问速度及蜘蛛爬行效率的作用。

从理论上讲，304状态码不同于404错误，所以出现在网站任何页面都不会受到搜索引擎惩罚或降权，但是如果网站页面长时间出现大量304状态码，就会影响搜索引擎的信任度，从而产生不利的影响。可能导致出现以下现象：

(1)搜索引擎(如百度蜘蛛)的抓取频率及次数下降;

(2)页面内容收录速度变慢，甚至出现不收录现象;

(3)网站快速更新速度迟缓，甚至停止更新快照;
(4)网站关键词排名逐步下降，影响网站权重也下降;

经过分析总结，可以看出导致返回304状态码的原因有以下3点：

(1)页面更新周期长或不更新
如果页面内容更新周期长甚至不更新，静态页面基本都是直接返回304状态码，即便是动态页面也会因为内容不变出现返回304状态码的问题。

(2)CDN缓存未同步更新
当网站页面内容更新后，设置的CDN缓存没有同步更新时，也会出现返回304状态码的情况。

(3)纯静态页面或强制静态html生成
如果网站有大量的纯静态页面，或者强制生成静态html，就会出现客户端请求时、服务器返回304状态码的情况。

HTML：如何页面引用外部html页面？

a、iframe标签
完整页面：<iframe src="test.html"></iframe>

b、ajax引入代码片段
代码片段：

$.get('test.html',function(html){
    //
});
$.when(
    $.get('test1.html'),
    $.get('test2.html'),
).then(function(html1,html2){
    console.log(html1[0]);
    console.log(html2[0]);
});

c、link import的方法导入

<link rel="import" href="test.html">

if (typeof document.querySelector("link[rel = 'import']").import == 'object') {
    var html = document.querySelector("link[rel = 'import']").import.head.innerHTML;
} else {
    $.get('test.html', function(html) {
    });
}

d、require.js
RequireJS是一个JavaScript文件和模块加载器。它针对浏览器内使用进行了优化，但可以在其他JavaScript环境中使用，例如Rhino和Node。使用像RequireJS这样的模块化脚本加载器将提高代码的速度和质量。

CSS：元素设置flex，子元素什么会失效？

设为Flex布局后，子元素的float、clear、vertical-align属性将失效。

HTML：如何在table里的某一列设置固定宽度？

table{ table-layout:fixed}
table tr td:nth-child(n){width:100px}

JS：举例object.defineProperty会在什么情况下造成循环引用导致栈溢出？

var data = {
    count: 1,
    value: 2
}
Object.defineProperty(data, 'count', {
    enumerable: true,
    configurable: true,
    get: function () {
        console.log('你访问了count', this.count); // 循环读取data.count 导致报错
        return this.value
    },
    set: function (newVal) {
        console.log('你设置了count');
    }
})
console.log(data.count) // 报错 Maximum call stack size exceeded

JS：什么是负无穷大？

在JavaScript中，负无穷大指的是“-Infinity”，表示小于任何有限数的数字（负无穷大的一个数字值），一般小于“-1.7976931348623157E+103088”的数值即为负无穷大。

HTML：html5的video如何附带字幕?

虽然HTML5正式标准没有指定使用哪种格式的字幕。但目前比较通用是WebVTT（后缀.vtt），这个各个浏览器厂商都支持的比较好.

WEBVTT
 
00:00:01.000 --> 00:00:10.000
这是文本的第一行，从第1秒显示到第10秒。
 
00:00:15.000 --> 00:00:20.000
这是文本的第二行，欢迎来到hangge.com

<video controls width="400" height="300">
    <source src="../hangge.mp4" type="video/mp4">
    <track src="hangge.vtt" srclang="zh" kind="subtitles" label="中文" default>
    <track src="hangge_en.vtt" srclang="en" kind="subtitles" label="English">
</video>

(1)如果有多个语言字幕可以添加多条，供用户切换选择
（2）标注为default的表示默认使用的字幕。如果默认不使用任何字幕，则都不设置default。