WEB前端面试题
前端开发面试知识点大纲：
HTML&CSS：
对Web标准的理解、浏览器内核差异、兼容性、hack、CSS基本功：布局、盒子模型、选择器优先级及使用、HTML5、CSS3、移动端适应
JavaScript：
数据类型、面向对象、继承、闭包、插件、作用域、跨域、原型链、模块化、自定义事件、内存泄漏、事件机制、异步装载回调、模板引擎、Nodejs、JSON、ajax等。
其他：
HTTP、安全、正则、优化、重构、响应式、移动端、团队协作、可维护、SEO、UED、架构、职业生涯
作为一名前端工程师，无论工作年头长短都应该必须掌握的知识点：
1、DOM结构 —— 两个节点之间可能存在哪些关系以及如何在节点之间任意移动。
2、DOM操作 ——如何添加、移除、移动、复制、创建和查找节点等。
3、事件 —— 如何使用事件，以及IE和标准DOM事件模型之间存在的差别。
4、XMLHttpRequest —— 这是什么、怎样完整地执行一次GET请求、怎样检测错误。
5、严格模式与混杂模式 —— 如何触发这两种模式，区分它们有何意义。
6、盒模型 —— 外边距、内边距和边框之间的关系，及IE8以下版本的浏览器中的盒模型
7、块级元素与行内元素 —— 怎么用CSS控制它们、以及如何合理的使用它们
8、浮动元素——怎么使用它们、它们有什么问题以及怎么解决这些问题。
9、HTML与XHTML——二者有什么区别，你觉得应该使用哪一个并说出理由。
1、请谈谈你对性能优化的认识？
网页内容
减少http请求次数
80%的响应时间花在下载网页内容(images, stylesheets, javascripts,scripts, flash等)。减少请求次数是缩短响应时间的关键！可以通过简化页面设计来减少请求次数，但页面内容较多可以采用以下技巧。
图片显示效果如左图
减少DNS查询次数
DNS查询也消耗响应时间，如果我们的网页内容来自各个不同的domain (比如嵌入了开放广告，引用了外部图片或脚本)，那么客户端首次解析这些domain也需要消耗一定的时间。DNS查询结果缓存在本地系统和浏览器中一段时间，所以DNS查询一般是对首次访问响应速度有所影响。下面是我清空本地dns后访问博客园主页dns的查询请求。
缓存Ajax
Ajax可以帮助我们异步的下载网页内容，但是有些网页内容即使是异步的，用户还是在等待它的返回结果，例如ajax的返回是用户联系人的下拉列表。所以我们还是要注意尽量应用以下规则提高ajax的响应速度。
延迟加载
这里讨论延迟加载需要我们知道我们的网页最初加载需要的最小内容集是什么。剩下的内容就可以推到延迟加载的集合中。
Javascript是典型的可以延迟加载内容。一个比较激进的做法是开发网页时先确保网页在没有Javascript的时候也可以基本工作，然后通过延迟加载脚本来完成一些高级的功能。
延迟加载
这里讨论延迟加载需要我们知道我们的网页最初加载需要的最小内容集是什么。剩下的内容就可以推到延迟加载的集合中。
Javascript是典型的可以延迟加载内容。一个比较激进的做法是开发网页时先确保网页在没有Javascript的时候也可以基本工作，然后通过延迟加载脚本来完成一些高级的功能。
2、 XX .call() 和 XX.apply() 的含义和区别？
call() 和 apply() 都属于Function.prototype的一个方法，是预定义的函数方法，用来调用函数，并用指定对象（第一个参数）替换函数的 this 值（当前对象）。
两个方法可用于调用函数，两个方法的第一个参数必须是对象本身。
apply传入的是一个参数数组，也就是将多个参数组合成为一个数组传入，而call则作为call的参数传入（从第二个参数开始）。
function add(c, d){
return this.a + this.b + c + d;
}
var o = {a:1, b:3};
add.call(o, 5, 7); // 1 + 3 + 5 + 7 = 16
add.apply(o, [10, 20]); // 1 + 3 + 10 + 20 = 34
Object.call(this,obj1,obj2,obj3)
Object.apply(this,arguments)
3. 如何解决跨域问题?
由于受浏览器的**同源策略**（same-origin policy）的影响， Ajax 请求默认只能在同一域名
下进行访问。同源策略是浏览器安全的基石，所有的浏览器都实行了这个策略。
同源政策的目的，是为了保证用户信息的安全，防止恶意的网站窃取用户的数据。
jsonp、CORS、window.name、window.postMessage、服务器上设置代理页面
1、服务器代理（浏览器请求同源服务器，再由后者请求外部服务）.
2、WebSocket
WebSocket 是一种通信协议，使用 ws://（非加密）和 wss://（加密）作为协议前缀。该协议不实行同源政策，只要服务器支持 WebSocket ，就可以通过它进行跨源通信。
JSONP 的基本思想是：
服务器端返回的数据格式是一段可在客户端执行的 javascript 代码，形如：callback_name(json_data)
客户端获取该 jsonp 数据，并自动执行回调函数。
这种使用模式就是所谓的 JSONP。用 JSONP 抓到的数据并不是 JSON，而是任意的 JavaScript。
首先，我们修改服务器端 http://apidemo.test/api/test 返回的数据内容：
Route::get('test', function(){
$callback = $_REQUEST['callback']; // 获取回调函数名
$json_data = json_encode(['id'=>1, 'name'=>'test']);
return $callback . "(" . $json_data . ")"; // 输出 jsonp 格式的数据
});
然后，修改客户端 http://adm.test/demo 的代码：
客户端的代码，还可以这样写：
或者
或者
其实，客户端的 jsonp 写法还有很多。
注：只有当客户端的写法是第一种时，才需要在客户端显式的的定义回调函数
服务器器端返回的 jsonp 数据内容其实是：
foo({"id":1,"name":"test"})
如果客户端写法不是第一种，服务器端返回的是：
jQuery21408122298865448574_1523471817778({"id":1,"name":"test"})
格式为：callback_name(json_data)
JSONP 的缺点是只能发送 GET 请求。
3、CORS
CORS 是跨源资源分享（Cross-Origin Resource Sharing）的缩写。它是 W3C 标准，是跨源 AJAX 请求的根本解决方法。
var url = 'http://apidemo.test/api/test';
var xhr = new XMLHttpRequest();
xhr.open('PUT', url, true); // 异步的 PUT 请求
xhr.setRequestHeader('X-Custom-Header', 'value');
xhr.send(); // 将请求发送到服务器
xhr.onreadystatechange = function (){ // 当 readyState 的值改变时，callback 函数会被调用。
if (xhr.readyState == 4 && xhr.status == 200){ // 如果请求成功，且状态码为 200
console.log(xhr.response);
}
}
**页面编码和被请求的资源编码如果不一
4、平时如何管理项目？
所谓项目，简单地说，就是在既定的资源和要求的约束下，为实现某种目的而相互联系的一次性工作任务。一般来说，项目具有如下的基本特征：
1）明确的目标其结果只可能是一种期望的产品，也可能是一种所希望得到的服务。
2）独特的性质每一个项目都是唯一的。
3）资源成本的约束性每一项目都需要运用各种资源来实施，而资源是有限的。
4）项目实施的一次性项目不能重复。
5）项目的不确定性在项目的具体实施中，外部和内部因素总是会发生一些变化，因此项目也会出现不确定性。
5.简单介绍javascript的同源策略。
一段脚本只能读取来自于同一来源的窗口和文档的属性，这里的同一来源指的是主机名、协议和端口号的组合。
所谓同源是指：域名，协议，端口相同。
在JavaScript中，有一个很重要的安全性限制，被称为“Same-Origin Policy”（同源策略）。同源策略是客户端脚本(尤其是JavaScript)的重要安全度量标准。这一策略对于JavaScript代码能够访问的页面内容做了很重要的限制，即JavaScript只能访问与包含它的文档在同一域下的内容。
其目的是防止某个文档或脚本从多个不同源装载。同源策略是一种安全协议。
具体表现在JS中：一段脚本自能读取来自同一来源的窗口的文档和属性。(iframe.contentDocument 等访问错误)
6.页面导入样式时，使用link和@import有什么区别？
（1）link属于XHTML标签，而@import是CSS提供的;
（2）页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;
（3）import只在IE5以上才能识别，CSS2.1以下浏览器不支持，而link是XHTML标签，无兼容问题;
（4）link方式的样式的权重 高于@import的权重.
（5） Link 支持使用javascript改变样式，后者不可
7.jquery中如何将数组转化为json字符串，然后再转化回来？
jQuery中没有提供这个功能，所以你需要先编写两个jQuery的扩展：
var array = [ 15, 14,16];
var str ="[115,14,13]";
$.fn.stringifyArray = function(array) {
return JSON.stringify(array) //将数组转化为字符串'[ 15, 14,16]'
}
$.fn.parseArray = function(array) {
return JSON.parse(str) ;//记住，只能将数组型的字符串转化为数组；
}
然后调用：
$("").stringifyArray(array)
8.HTML 和 HTML5？
HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加。
绘画 canvas
用于媒介回放的 video 和 audio 元素
本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；
sessionStorage 的数据在浏览器关闭后自动删除
语意化更好的内容元素，比如 article、footer、header、nav、section
表单控件，calendar、date、time、email、url、search
新的技术webworker, websockt, Geolocation
移除的元素-纯表现的元素：basefont，big，center，font, s，strike，tt，u；
对可用性产生负面影响的元素：frame，frameset，noframes；
9. CSS选择符有哪些？哪些属性可以继承？
1.id选择器（ # myid）
2.类选择器（.myclassname）
3.标签选择器（div, h1, p）
4.相邻选择器（h1 + p）
5.子选择器（ul > li）
6.后代选择器（li a）
7.通配符选择器（ * ）
8.属性选择器（a[rel = “external”]）
9.伪类选择器（a: hover, li: nth - child）
不可继承的样式：border padding margin width height ;
可以同父元素继承的样式：
所有元素可继承：visibility和cursor。
内联元素可继承：letter-spacing、word-spacing、white-space、line-height、color、font、 font-family、font-size、font-style、font-variant、font-weight、text- decoration、text-transform、direction。
块状元素可继承：text-indent和text-align。
列表元素可继承：list-style、list-style-type、list-style-position、list-style-image。
表格元素可继承：border-collapse。
10.eval是做什么的？
它的功能是把对应的字符串解析成JS代码并运行；应该避免使用eval，不安全，非常耗性能（2次，一次解析成js语句，一次执行）。
会话跟踪常用的4种方法：
URL重写：URL重写技术就是在URL结尾添加一个附加数据以标识该会话，把会话ID通过URL的信息传递过去，以便在服务端进行识别不同的用户。
隐藏表单域：将会话ID添加到HTML表单元素中提交到服务器，此表单不再客户端显示。
Cookie：Cookie是Web服务器发送给客户端的一小段信息，客户端请求时可以读取该信息发送到服务器端，进而进行用户的识别。对于客户端的每次请求，服务器都会将Cookie发送到客户端，在客户端可以进行保存,以便下次使用。
session: 在服务器端会创建一个session对象，产生一个sessionID来标识这个session对象，然后将这个sessionID放入到Cookie中发送到客户端，下一次访问时，sessionID会发送到服务器，在服务器端进行识别不同的用户 , Session是依赖Cookie的，如果Cookie被禁用，那么session也将失效
11.请描述一下cookie，sessionStorage和localStorage的区别？
答：cookies兼容所有的浏览器，Html5提供的storage存储方式。
• Document.cookie
• Window.localstorage
• Window.sessionstorage
cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。
存储大小限制也不同，cookie数据不能超过4k，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，如会话标识。sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。
数据有效期不同，sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持；localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。
作用域不同，sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；localStorage 在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的。
12.谈谈你对模块化的理解？
什么是模块化？
• 模块化就是为了减少系统耦合度，提高高内聚，减少资源循环依赖，增强系统框架设计。
• 让开发者便于维护,同时也让逻辑相同的部分可复用
所谓的模块化开发就是封装细节，提供使用接口，彼此之间互不影响，每个模块都是实现某一特定的功能
13、谈谈你对预加载的理解？
Web预加载指的是在网页全加载完成之前，在页面优先显示一些主要内容，以提高用户体验。对于一个较庞大的网站，如果没有使用预加载技术，用户界面就会长时间显示一片空白，直到资源加载完成，页面才会显示内容。
例如，可以通过js预先从服务加载图片资源(动态创建Image，设置src属性)，只要浏览器把图片下载到本地，就会被缓存，再次请求相当的src时就会优先寻找浏览器缓存，提高访问速度。
14、缓存和预加载的区别是什么？
缓存就是把请求过的数据缓存起来，下次请求的时候直接使用缓存内容，提高响应速度
预加载指的是提前把需要的内容加载完成，访问的时候可以明天提高响应效率，比如图片的预加载（可以提前加载一定数量的图片，当用户访问图片的时候一般只看前几张，由于是预加载好的，所以速度比较快）
15、如何区分静态页面和动态页面？
答：要区分这两个，最简单的方法就是看后缀了，动态网页网址中有两个标志性的符号“?”和“&”（有的可能没有&），这个问号和&就是用来带参数的。现在几乎爱所有的网页都是动态网页。
16、你如何对网站的文件和资源进行优化?期待的解决方案包括？
答：文件合并
文件最小化/文件压缩
使用CDN托管
缓存的使用
17、内存泄漏怎么理解？和常见的内存泄漏
内存泄漏的定义： 对象既不能被调用，占有内存也不能被释放，因为它们正在被引用。
1、意外的全局变量
js中如果不用 var 声明变量,该变量将被视为 window 对象(全局对象)的属性,也就是全局变量.
function foo(arg) {
bar = "this is a hidden global variable";
}
// 上面的函数等价于
function foo(arg) {
window.bar = "this is an explicit global variable";
}
所以,你调用完了函数以后,变量仍然存在,导致泄漏.
2、被遗忘的定时器或者回调
var someResource = getData();
setInterval(function() {
var node = document.getElementById('Node');
if(node) {
node.innerHTML = JSON.stringify(someResource));
}
}, 1000);
这样的代码很常见, 如果 id 为 Node 的元素从 DOM 中移除, 该定时器仍会存在, 同时, 因为回调函数中包含对 someResource 的引用, 定时器外面的 someResource 也不会被释放.
3、没有清理的DOM元素引用
var elements = {
button: document.getElementById('button'),
image: document.getElementById('image'),
text: document.getElementById('text')
};
function doStuff() {
image.src = 'http://some.url/image';
button.click();
console.log(text.innerHTML);
}
function removeButton() {
document.body.removeChild(document.getElementById('button'));
// 虽然我们用removeChild移除了button, 但是还在elements对象里保存着#button的引用
// 换言之, DOM元素还在内存里面.
}
4、闭包
先看这样一段代码:
var theThing = null;
var replaceThing = function () {
var someMessage = '123'
theThing = {
someMethod: function () {
console.log(someMessage);
}
};
};
调用 replaceThing 之后, 调用 theThing.someMethod , 会输出 123 , 基本的闭包, 我想到这里应该不难理解.
解释一下的话, theThing 包含一个 someMethod 方法, 该方法引用了函数中的 someMessage 变量, 所以函数中的 someMessage 变量不会被回收, 调用 someMethod 可以拿到它正确的 console.log 出来.
18、CDN是啥？
CDN的全称：是Content DeliveryNetwork，即内容分发网络，加速的意思，那么网站CND服务就是网站加速服务。
CDN加速原理：CDN加速将网站的内容缓存在网络边缘（离用户接入网络最近的地方），然后在用户访问网站内容的时候，通过调度系统将用户的请求路由或者引导到离用户接入网络最近或者访问效果最佳的缓存服务器上，有该缓存服务器为用户提供内容服务；相对于直接访问源站，这种方式缩短了用户和内容之间的网络距离，从而达到加速的效果。
CDN的特点：
1、本地加速 提高了企业站点(尤其含有大量图片和静态页面站点)的访问速度，并大大提高以上性质站点的稳定性
2、镜像服务 消除了不同运营商之间互联的瓶颈造成的影响，实现了跨运营商的网络加速，保证不同网络中的用户都能得到良好的访问质量。
3、远程加速 远程访问用户根据DNS负载均衡技术 智能自动选择Cache服务器，选择最快的Cache服务器，加快远程访问的速度
4、带宽优化 自动生成服务器的远程Mirror(镜像)cache服务器，远程用户访问时从cache服务器上读取数据，减少远程访问的带宽、分担网络流量、减轻原站点WEB服务器负载等功能。
5、集群抗攻击 广泛分布的CDN节点加上节点之间的智能冗于机制，可以有效地预防黑客入侵以及降低各种D.D.o.S攻击对网站的影响，同时保证较好的服务质量
19、什么是垃圾回收机制（GC）？
早期的计算机语言，比如C和C++，需要开发者手动的来跟踪内存，这种机制的优点是内存分配和释放的效率很高。但是它也有着它的缺点，程序员很容易不小心忘记释放内存，从而造成内存的泄露。
新的编程语言，比如JAVA, C#， javascript, 都提供了所谓“垃圾回收的机制”，运行时自身会运行相应的垃圾回收机制。程序员只需要申请内存，而不需要关注内存的释放。垃圾回收器(GC)会在适当的时候将已经终止生命周期的变量的内存给释放掉。GC的优点就在于它大大简化了应用层开发的复杂度，降低了内存泄露的风险。
20、http和tcp有什么区别？
TPC/IP协议是传输层协议，主要解决数据如何在网络中传输，是一种“经过三次握手”的可靠的传输方式；
HTTP协议即超文本传送协议(Hypertext Transfer Protocol )，是应用层协议，是Web联网的基础，也是手机联网常用的协议之一，HTTP协议是建立在TCP协议之上的一种应用。
21、从服务器考虑提高网站性能
答：业界常用的优化WEB页面加载速度的方法（可以分别从页面元素展现，请求连接，css,js,服务器等方面介绍）？
对于服务器方面前端能做的工作：
使用CDN加速，使用户从离自己最近的服务器下载文件；
减少Cookie的大小，使用无cookie的域，客户端请求静态文件的时候，减少 Cookie 的反复传输对主域名的影响；
为文件头指定Expires，使内容具有缓存性；
前端优化:DNS预解析提升页面速度
服务器端能做的工作：
负载均衡，分布式存储，提升服务器性能等等。
22. 页面跳转方式
一、按钮式：
二、链接式：
返回上一步
">返回上一步
跳转到百度123
三、直接跳转式：
打开百度
23.比较typeof与instanceof？
相同点：JavaScript 中 typeof 和 instanceof 常用来判断一个变量是否为空，或者是什么类型的。
typeof的定义和用法：返回值是一个字符串，用来说明变量的数据类型。
细节：
(1)、typeof 一般只能返回如下几个结果：number,boolean,string,function,object,undefined。
(2)、typeof 来获取一个变量是否存在，如 if(typeof a!=“undefined”){alert(“ok”)}，而不要去使用 if(a) 因为如果 a 不存在（未声明）则会出错。
(3)、对于 Array,Null 等特殊对象使用 typeof 一律返回 object，这正是 typeof 的局限性。
Instanceof定义和用法：instanceof 用于判断一个变量是否属于某个对象的实例。
实例演示：
a instanceof b?alert("true"):alert("false"); //a是b的实例？真:假
var a = new Array();
alert(a instanceof Array); // true
alert(a instanceof Object) // true
24. 如何理解闭包？
1、定义和用法：当甲函数的返回值是另外乙函数，而乙函数如果调用了其父函数（甲）内部的其它变量，如果乙函数在外部被执行，就产生了闭包。
2、表现形式：使函数外部能够调用函数内部定义的变量。
3、实例如下：
(1)、根据作用域链的规则，底层作用域没有声明的变量，会向上一级找，找到就返回，没找到就一直找，直到window的变量，没有就返回undefined。这里明显count 是函数内部的flag2 的那个count 。
var count=10; //全局作用域 标记为flag1
function add(){
var count=0; //函数全局作用域 标记为flag2
return function(){
count+=1; //函数的内部作用域
alert(count);
}
}
var s = add()
s();//输出1
s();//输出2
25、变量的作用域
要理解闭包，首先必须理解Javascript特殊的变量作用域。
变量的作用域分类：全局变量和局部变量。
特点：
1、函数内部可以读取函数外部的全局变量；在函数外部无法读取函数内的局部变量。
2、函数内部声明变量的时候，一定要使用var命令。如果不用的话，你实际上声明了一个全局变量！
3、滥用闭包，会造成内存泄漏：由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包
26.HTML添加了哪些功能
HTML5定义了一系列新元素，如新语义标签（header，footer，article，aside）、智能表单、多媒体标签（播放音频/视频）等，可以帮助开发者创建富互联网应用。
还提供了一些Javascript API，如地理定位、重力感应、硬件访问等，可以在浏览器内实现类原生应用，甚至结合Canvas我们可开发网页版游戏。
表单元素
email— 输入email格式
tel —手机号码
url —只能输入url格式
number —只能输入数字
search—搜索框
range —范围 滑动条
color —拾色器
time —时间
date— 日期 不是绝对的
datetime —时间日期
month —月份
week —星期
数据列表
与input 配合使用
生成加密字符串
keygen 元素
keygen 元素的作用是提供一种验证用户的可靠方法。
keygen 元素是密钥对生成器（key-pair generator）。当提交表单时，会生成两个键， 一个是私钥，一个公钥。
私钥（private key）存储于客户端，公钥（public key）则被发送到服务器。公钥可用于之后验证用户的客户端证书（client certificate）。
表单属性
placeholder 占位符
autofocus 获取焦点
multiple 文件上传多选或多个邮箱地址
autocomplete 自动完成，用于表单元素，也可用于表单自身(on/off)
form 指定表单项属于哪个form，处理复杂表单时会需要
novalidate 关闭验证，可用于标签
required 必填项
pattern 正则表达式 验证表单
手机号:
27.表单事件
oninput 用户输入内容时触发，可用于移动端输入字数统计
oninvalid 验证不通过时触发
//统计text1的字符个数
28. 多媒体
代码实现
属性
autoplay 自动播放
controls 是否显不默认播放控件
loop 循环播放
preload 预加载 同时设置autoplay时些属性失效
29.HTML DOM空扩展
获取元素
1、document.getElementsByClassName (‘class’) 通过类名获取元素，以类数组形式存在。
2、document.querySelector(‘div’) 通过CSS选择器获取元素，符合匹配条件的第1个元素。
3、document.querySelectorAll(‘selector’) 通过CSS选择器获取元素，以类数组形式存在。
类名操作
1、Node.classList.add(‘class’) 添加class
2、Node.classList.remove(‘class’) 移除class
3、Node.classList.toggle(‘class’) 切换class，有则移除，无则添加
4、Node.classList.contains(‘class’) 检测是否存在class
30 在h5中提供两种web存储方式
// sessionStorage session（会话，会议） 5M 当窗口关闭是数据销毁 内存
// localStorage 20M 永久生效 ，除非手动删除 清理垃圾 硬盘上
setItem(key, value) 设置存储内容
getItem(key) 读取存储内容
removeItem(key) 删除键值为key的存储内容
clear() 清空所有存储内容
key(n) 以索引值来获取存储内容
代码实现
var txt=document.querySelector('input');
var btns=document.querySelectorAll('button');
// localStorage存储数据
btns[0].onclick=function(){
window.localStorage.userName=txt.value;
}
// localStorage存储数据
btns[1].onclick=function(){
txt.value= window.localStorage.userName;
}
btns[3].onclick=function(){
window.localStorage.removeItem('userName');
}
31.应用缓存
构建一个离线（无网络状态）应用，只需要创建一个cache manifest文件。
优势
1、可配置需要缓存的资源
2、网络无连接应用仍可用
3、本地读取缓存资源，提升访问速度，增强用户体验
4、减少请求，缓解服务器负担
1、顶行写CACHE MANIFEST
2、CACHE: 换行 指定我们需要缓存的静态资源，如.css、image、js等
3、NETWORK: 换行 指定需要在线访问的资源，可使用通配符
4、FALLBACK: 当前页面无法访问时退回的页面(回退; 后退)
代码实现
appcache文件
CACHE MANIFEST
# 注释以#开头
#下面是要缓存的文件
CACHE:
images/img1.jpg
images/img2.jpg
#指定必须联网才能访问的文件
NETWORK:
images/img3.jpg
images/img4.jpg
#当前页面无法访问是回退的页面
FALLBACK:
404.html