整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
者 | 叙帝利
链接 | www.cnblogs.com/nzbin/p/7073601.html
前言
这篇文章我已经酝酿了半年之久，或者说拖沓了这么久吧。想说的东西很多，却又无从说起。如今轻量级框架如雨后春笋，层出不穷。我想每个人都应该归纳总结工作中的常见需求，编写一套适合自己的 CSS 框架。
在之前的文章中，我提到了面向对象的 CSS（比如 BEM、OOCSS、SMACSS，详见 http://vanseodesign.com/css/dry-principles/）。这是一种思想，并不涉及具体的 CSS 问题，主要是类命名的策略！现在仍然有很多人对于前端框架的认识还停留在表面，认为 Bootstrap 是后端人员专用，前端没必要等等。
我不知道这种说法从何而来，我最开始也不喜欢使用框架，或许和很多人的想法一样，畏惧新知识、害怕难以驾驭、遇到问题的时候无法解决等等。最关键的一点是很多人认为框架的样式是固定的，修改起来太麻烦，还不如自己根据设计图写起来方便。
为什么使用框架？答案显而易见，效率。除此之外，使用框架或者研究框架的意义还有很多，比如面向对象思想的具体实现。在上一家公司工作的时候，开始的几个项目我也是用最原始的方法书写 CSS 。项目之中最让我头疼的就是类的命名。我想大多数人都是根据功能去命名，这就造成了很多的冗余，相同的组件可能写很多次。简单举一个例子，如下图，个人中心的登录界面。
很多人包括我刚开始的时候可能会选择下面的类命名及布局方式，其通用性非常差：
<div class="login-area"><div class="login-img"><img src="..." /></div><div class="login-text"><a href="...">请点击登录</a></div></div>
然而了解 Bootstrap 的人应该一眼就发现上图就是一个 media 对象，无非一些小细节需要调整一下：
<div class="media"><div class="media-left"><img src="..." /></div><div class="media-body media-middle"><a href="...">请点击登录</a></div></div>
为了让文字与图片居中对齐，我们可以使用 Bootstrap 的.media-middle的辅助类。如果在工作中还要根据需求自定义一些辅助类调整细节，当然这是一个移动端的例子，可以选择移动端框架相关的 media 对象。
另外，在项目改版的时候，原始的方法的修改更是惨不忍睹，可以说是噩梦，冗长的 CSS 文件、混乱的功能划分、类名、色值等等。最后也只能硬着头皮一点一点修改。那一刻我才体会到框架的意义以及前端工具的重要性。我从工作中总结出，要么你可以熟练的使用某一个框架，要么就自己实现一个框架。
目前市面上前端框架主要分重量级与轻量级。重量级主要有 Bootstrap、Semantic、UIkit、Foundation 等，轻量级有 Pure、Skeleton、Miligram 等。经常关注前端动态的工程师会发现轻量级框架每年都层出不穷。在我上面提到的主流轻量级框架之外还有很多类似的框架。
我一直问自己，为什么要重复造轮子。经过研究，我发现这些轻量级框架其实大多都不能胜任工作需求，而且模仿的痕迹很重，基本上都或多或少的有 Bootstrap 的影子。那么这些轻量级框架有没有意义呢？当然有。但是就我个人观点，选择轻量级框架反倒不如自己实现一个框架。因为大多轻量级框架就像是工作总结，是根据自己的业务需求实现的。所以大多不具有通用性。
前端框架的对比主要以 Bootstrap、Semantic、UIkit 为主，因为我个人感觉这三个最具有代表性，而且设计风格各有特色。Foundation 也有很多大公司在用，但以我个人观点，无论是框架的易用性还是设计风格，相比其它几个框架稍逊一筹。
其中 Bootstrap 和 Semantic 是面向对象的最好体现。
我先说一下 Bootstrap 的优势，不是设计风格，不是模块，不是特效，而是栅格，响应式栅格。Bootstrap 的栅格在与其它框架对比中占有绝对优势，无论是栅格的划分还是类名的风格都堪称经典。如果读者有心看一下 Bootstrap 的 Less 源文件，就会感受到 Bootstrap 对于响应式栅格的独具匠心。其实在 Bootstrap 之前也有很多栅格方案，但是给人的感觉就是不够利索，类名繁琐不好记。而后来的很多框架，尤其轻量级的框架大多都有 Bootstrap 的影子。
下面我们通过对比几个框架的栅格和按钮来看一下类命名的策略。
Bootstrap
<div class="row"><div class="col-md-8"></div><div class="col-md-4"></div></div><button class="btn btn-primary" type="submit">Button</button>
Semantic
<div class="ui grid"><div class="ten wide column"></div><div class="six wide column"></div></div>
<button class="ui primary basic button">Primary</button>
Foundation
<div class="row"><div class="small-3 columns"></div><div class="small-9 columns"></div></div>
<button type="button" class="primary button">Primary</button>
UIkit
<div class="uk-grid"><div class="uk-width-1-2"></div><div class="uk-width-1-2"></div></div>
<button class="uk-button uk-button-primary" type="button">Primary</button>
Pure
<div class="pure-g"><div class="pure-u-1-2"></div><div class="pure-u-1-2"></div></div>
<button class="pure-button pure-button-primary">A Primary Button</button>
通过上面的对比，大家应该已经发现了这些框架的命名策略的不同。不可否认，Bootstrap 的命名最经典。
之前在网上看到有人讨论关于框架的易用性，有人说 Bootstrap 的类名太长，然而通过上面几个框架的对比，Bootstrap 的类并不繁琐，而且用预处理器编写框架时嵌套会比较灵活。
Semantic 的类名最简洁，通过多个定语的修饰组成一句话，确实很有意思。但是过多的修饰类在编写框架时会稍显凌乱，有利有弊，因人而异吧。
Foundation 的栅格应该是最丰富的，策略上类似 Bootstrap，只是对公共属性进行了拆分，大家也可以看看其中的具体细节。
UIkit 和 Pure 的策略相同，都加了前缀以区分其它框架，但是很显然类名过于冗长了。我在编写框架时也这样想过，但是最终放弃了这种方式。
CSS 预处理器早已不是什么新鲜事，但是真正能够在工作中运用的人有多少呢？熟练使用预处理器特性的人又有多少呢？
我之前工作的时候也没有用预处理器，因为不用，所以也意识不到预处理器的好处。主要是觉得麻烦，因为要使用编译器编译一下，还不如直接写 CSS 方便。但是在项目维护的时候就意识到预处理器的好处。
后来在几个项目中尝试了预处理器，但是对于模块化的写法不太明确。预处理器作为工具，可以实现模块化编写 CSS，那么应该如何划分模块？另外，预处理器有很多特性，但是大多数人刚开始只用到变量和嵌套，其它的特性几乎很少用到。我相信在自己动手实现一个轻量级框架的过程中，我们可以对预处理器有一个全面的了解。
目前流行的预处理器有 Less，Sass，Stylus 三个，选择哪个完全是看自己的习惯。我最开始因为 Bootstrap 了解的 Less，但是因为习惯选择了 Sass，其次 Sass 的功能要更全面一些。
无论是工作还是自己写项目，都要搭建一个项目环境，也就是安装一系列的 npm 包。相比刀耕火种的开发方式，使用工具开发的前期准备过程稍显麻烦，然而一旦环境建好，后期的开发将会游刃有余。
Miligram 这个轻量级框架在 Github 上有很高人气，但是说实话，用处并不大。不过这个框架的构建方式非常值得学习。虽然 CSS 对于很多人来说很简单，但是真要去写一个框架，还是非常棘手，这时候就需要借鉴一些优秀的框架。
编写框架大致会用到的 npm 如下：
--autoprefixer--node-sass--npm-run-all--rimraf--onchange
其实最主要的就是一个 node-sass，其它的都是辅助 CSS 文件的生成修改，大家感兴趣的话可以去 npm 官网搜索这些插件，了解具体用法，如有不懂可以给我留言，我就不啰嗦了。
终于到了本篇文章的重头戏。
简单介绍一下，我给自己编写的框架取名 Snack，原意“快餐”，主要表达简单之意。虽然是轻量级框架，但我并不想拿轻量级做为噱头，毕竟体量轻意味着某些功能的缺失以及疏漏。这个框架的意义更多的是交流学习，我试图借鉴其它框架的优秀之处，尽量简化类名，以及尝试探索一些更通用的组件。
大多数的轻量级框架只是 CSS 框架，不涉及 JS 部分，主要用于网页的布局。我之所以打算自己编写框架，是因为工作中重复的东西太多，通过框架可以很好的将这些零散组件整合到一起。另一方面，写个小项目，学点新知识是一件趣事。
编写框架是去年想做的事情，但因为时间原因，拖了很久。写框架之初我曾陷入一个误区，我打算设计一些比较前卫的样式，立体的按钮、浮动的面板等，比如下图中的风格。
https://dribbble.com/shots/524593-Soft-Interface-Black
但是在断断续续编写框架的过程中，我逐渐找到了方向，上图的样式只是一种皮肤，编写框架之初不应该把重点放在这上面。当然，好的 UI 设计也是框架成功的一部分。
编写框架的第一步就是要确定框架应该包含哪些模块。因为是轻量级框架，所以模块肯定没有重量级框架那么全面，只有核心的一些组件。通过比较一些轻量级框架以及工作总结，大致常用的模块包括栅格、媒体、按钮、排版、表单、表格、面板以及辅助工具。
在常用的这几个组件中，需要重点关注的是栅格、表单及面板，媒体组件也很重要，但是自由发挥的空间不大，我直接用了 Bootstrap 的媒体组件。
首先是类命名的层次与结构。类命名一直是我比较纠结的地方，刚开始工作的时候为了起一个见名知意又简洁的类名总是抓耳挠腮。我在编写框架时尽量避免与 Bootstrap 的类名重叠，但也不能完全避免。对比其他框架会发现，这种情况不可避免的会出现，毕竟类名会有一定的规律性以及层次性。在这一点上我比较喜欢 Bootstrap 的风格。下面和 Bootstrap 的表单做一个对比。
Bootstrap 的表单结构及类名
--div.form-horizontal--div.form-group--label.control-label--input.form-control
Snack 的表单结构及类名
--div.form-row--div.form-item--label.form-label--input.form-field
这个表单结构整体而言还算不错，只是个别地方需要修改。有一些框架不给input等元素起类名，而是给父元素一个类名，个人对这种做法表示疑问，不起类名会降低框架编写及使用的灵活性。
第二个策略是组件的修饰，比如按钮及面板都存在多个语境（颜色、大小等），在这一点上我编写框架时做了一些简化，风格上有些 Semantic 的影子。
<button class="btn primary">primary</button><table class="table bordered striped">...</table><div class="boxes primary">...</div>
关于修饰类的策略是一个仁者见仁智者见智的问题，至于哪种方法更好，还需要在编写框架的过程中摸索。
演示示例: https://nzbin.github.io/snack/#grid
任何框架必须建立在栅格的基础上才能灵活布局。我在前面提到了 Bootstrap 的精华就是栅格系统。栅格系统的编写需要使用预处理器的循环功能，否则就要做无谓的重复劳动了。我遇到过一些轻量级框架是用 Less 编写的，其栅格系统就没有用循环，这样的源码稍显唐突，可能是作者对 Less 的循环功能不熟，当然 Less 本身的循环比较弱，用起来有些别扭。
关于预处理器的循环，可以参照我之前翻译的 《CSS 预处理器中的循环》，比较详细地对比了三种流行预处理器的循环功能。简单说一下，Less 没有循环，但可以用递归实现，而 Sass 和 Stylus 有真循环。
我编写的栅格系统也是默认 12 列，但是后来发现 12 列的栅格缺少最常用的列宽（比如 10%、20%、30%等），比如下面 CodePen 展示的例子用 12 列栅格是无法完成的，所以我又添加了 10 列栅格，但仍然无法面面俱到，不过已经很灵活了。
栅格的使用和 Bootstrap 是一样的，除了 12 列栅格外，10 列栅格以及均分栅格都要添加.cols-类
<!-- 默认 12 列栅格，所以省略 cols-12 --><div class="row"><div class="col-5"></div><div class="col-7"></div></div>
<!-- 10 列栅格 --><div class="row cols-10"><div class="col-3"></div><div class="col-7"></div></div>
这个栅格并没有响应式，只有一个断点，小屏手机上的话所有栅格都会单行显示。一方面，这样的设计符合大多数轻量级框架的初衷；另一方面，我打算再写一个针对移动端的框架，毕竟 Web 端和移动端的风格差距较大，按照业务需求分开会更好。不过最近我更改了源文件，为响应式预留了扩展方式。
演示示例: https://nzbin.github.io/snack/#forms
在上面的命名策略中已经展示了 Snack 表单的基本结构，基本表单除了结构之外，样式上并没有太多可以讨论的地方。在此说一下表单中checkbox的结构调整，先看一下 Bootstrap 的checkbox结构。
<!-- checkbox --><div class="checkbox"><label><input type="checkbox" value=""> checkbox</label></div><!-- checkbox-inline --><label class="checkbox-inline"><input type="checkbox" id="inlineCheckbox1" value="option1"> checkbox</label>
以上两种结构不能有偏差，稍有偏差样式就会错乱，灵活性较差。其次我在想两种结构能不能整合在一起，增强灵活性。想了很久，找到了方法，Snack 结构如下：
<!-- checkbox --><div class="checkbox"><label><input type="checkbox" value=""> checkbox</label></div><!-- checkbox-inline --><div class="checkbox inline"><label><input type="checkbox" value=""> checkbox</label></div>
也可以将样式直接加到label标签上。另外，如果将input移到label标签外也是没有问题的，如下：
<!-- checkbox --><div class="checkbox"><input type="checkbox" id="checkbox1" value=""><label for="checkbox1">checkbox</label></div><!-- checkbox-inline --><div class="checkbox inline"><input type="checkbox" id="inlineCheckbox1" value=""><label for="inlineCheckbox1">checkbox</label></div>
这种结构有一个好处，就是可以自定义input样式，详见下面的 CodePen 的scss文件。radio的设置和checkBox是一样的。
辅助类是一系列类的组合，比如字号大小、颜色值、padding、margin 以及左右浮动等。在一些 Bootstrap 搭建的后台管理系统中尤为常见，这样布局起来就会比较灵活。以下是一个边框的辅助类。
.border-left-right {border-left: 1px solid #eee;border-right: 1px solid #eee;}.border-top-bottom {border-top: 1px solid #eee;border-bottom: 1px solid #eee;}.border-left {border-left: 1px solid #eee;}.border-right {border-right: 1px solid #eee;}.border-top {border-top: 1px solid #eee;}.border-bottom {border-bottom: 1px solid #eee;}
关于助类的更多内容可以搜索阅读这篇文章《如何编写通用的 Helper Class》
演示示例: https://nzbin.github.io/snack/#boxes
盒组件是我整个框架中比较满意的一个模块。之所以要做这个组件主要是觉得 Bootstrap 的 list 组件和 panel 组件可以整合到一起。当然，这样的做法有利有弊。盒组件在后台管理系统的布局中表现的尤为突出。
其命名也是多种多样，比如 panel、widget、portlet、ibox、card等，每个后台管理系统框架都会对这个组件进行深度开发，可见其在布局上的重要性。给一个组件起一个合适的类名也很关键，想了很久，最后用了box的类名，当然一般情况下尽量不要用box，因为这个类名比较宽泛。下面的 CodePen 模拟了 Bootstrap 的 list 及 panel 组件。
给框架添加主题是一件有趣的事情。Snack 的默认主题是白色，因为喜欢黑色，最后添加了暗夜主题，编写主题只需改变组件的颜色。演示文档 的页面用了暗夜主题，点击上方的红色按钮可以切换主题。
如果大家问我那个框架更好，我会毫不犹豫的选择 Bootstrap。在工作中可以根据需求的难易进行框架选择，如果业务比较重，最好根据 Bootstrap 进行二次开发；反之，可以选择一些轻量级框架，最好还是根据自己的需求造轮子，如果大家愿意选择或是借鉴我的框架，那会是我的荣幸。
Github: https://github.com/nzbin/snack
Docs: https://nzbin.github.io/snack
eb前端技术由html、css和 javascript三大部分构成，是一个庞大而复杂的技术体系，其复杂程度不低于任何一门后端语言。而我们在学习它的时候往往是先从某一个点切入，然后不断地接触和学习新的知识点，因此对于初学者很难理清楚整个体系的脉络结构。本文将对Web前端知识体系进行简单的梳理，对应的每个知识点点到为止，不作详细介绍。目的是帮助大家审查自己的知识结构是否完善，如有遗漏或不正确的地方，希望共勉。
HTML 篇
1、BOM
BOM 是 Browser Object Model
的缩写，即浏览器对象模型，当一个浏览器页面初始化时，会在内存创建一个全局的对象，用以描述当前窗口的属性和状态，这个全局对象被称为浏览器对象模型，即BOM。BOM的核心对象就是window，window
对象也是BOM的顶级对象，其中包含了浏览器的 6个核心模块：
document -
即文档对象，渲染引擎在解析HTML代码时，会为每一个元素生成对应的DOM对象，由于元素之间有层级关系，因此整个HTML代码解析完以后，会生成一个由不同节点组成的树形结构，俗称DOM树，document
用于描述DOM树的状态和属性，并提供了很多操作DOM的API。
frames - HTML 子框架，即在浏览器里嵌入另一个窗口，父框架和子框架拥有独立的作用域和上下文。
history - 以栈(FIFO)的形式保存着页面被访问的历史记录，页面前进即入栈，页面返回即出栈。
location - 提供了当前窗口中加载的文档相关信息以及一些导航功能。
navigator - 用来描述浏览器本身，包括浏览器的名称、版本、语言、系统平台、用户特性字符串等信息。
screen - 提供了浏览器显示屏幕的相关属性，比如显示屏幕的宽度和高度，可用宽度和高度。
2、DOM 系统
DOM 是 Document Object Model 的缩写，即 文档对象模型，是所有浏览器公共遵守的标准，DOM
将HTML和XML文档映射成一个由不同节点组成的树型结构，俗称DOM树。其核心对象是document，用于描述DOM树的状态和属性，并提供对应的DOM操作API。随着历史的发展，DOM
被划分为1级、2级、3级，共3个级别：
1级DOM - 在1998年10月份成为W3C的提议，由DOM核心与DOM
HTML两个模块组成。DOM核心能映射以XML为基础的文档结构，允许获取和操作文档的任意部分。DOM
HTML通过添加HTML专用的对象与函数对DOM核心进行了扩展。
2级DOM - 鉴于1级DOM仅以映射文档结构为目标，DOM
2级面向更为宽广。通过对原有DOM的扩展，2级DOM通过对象接口增加了对鼠标和用户界面事件（DHTML长期支持鼠标与用户界面事件）、范围、遍历（重复执行DOM文档）和层叠样式表（CSS）的支持。同时也对DOM
1的核心进行了扩展，从而可支持XML命名空间。
3级DOM -
通过引入统一方式载入和保存文档和文档验证方法对DOM进行进一步扩展，DOM3包含一个名为“DOM载入与保存”的新模块，DOM核心扩展后可支持XML1.0的所有内容，包括XML
Infoset、 XPath、和XML Base。
浏览器对不同级别DOM的支持情况如下所示：
从图中可以看出，移动端常用的 webkit 内核浏览器目前只支持DOM2，而不支持DOM3 。
新手福利获取方式：
1.在你手机的右上角有【关注】选项，或点击我的头像，点击关注！（关注我）
2.关注后，手机客户端点击我的主页面，右上角有私信，请私信发我：html
其实作为一个开发者，有一个学习的氛围跟一个交流圈子特别重要这里请私信我“html”不管你是小白还是大牛欢迎入住大家一起交流成长。小编会在里面不定期分享干货源码，包括我精心整理的一份零基础教程。欢迎各位感兴趣的的小伙伴。
学习思路：
3、事件系统
事件是用户与页面交互的基础，到目前为止，DOM事件从PC端的 鼠标事件(mouse) 发展到了 移动端的 触摸事件(touch) 和
手势事件(guesture)，touch事件描述了手指在屏幕操作的每一个细节，guesture 则是描述多手指操作时更为复杂的情况，总结如下：
第一根手指放下，触发 touchstart，除此之外什么都不会发生
手指滑动时，触发touchmove
第二根手指放下，触发 gesturestart
触发第二根手指的 touchstart
立即触发 gesturechange
任意手指移动，持续触发 gesturechange
第二根手指弹起时，触发 gestureend，以后将不会再触发 gesturechange
触发第二根手指的 touchend
触发touchstart (多根手指在屏幕上，提起一根，会刷新一次全局touch) _ ___
弹起第一根手指，触发 touchend
更多关于手势事件的介绍请参考：
gesture事件处理复杂手势
DOM2.0 模型将事件处理流程分为三个阶段，即 事件捕获阶段 、 事件处理阶段 、 事件冒泡阶段， 如图所示：
事件捕获 ：当用户触发点击事件后，顶层对象document 就会发出一个事件流，从最外层的DOM节点向目标元素节点传递，最终到达目标元素。
事件处理 ：当到达目标元素之后，执行目标元素绑定的处理函数。如果没有绑定监听函数，则不做任何处理。
事件冒泡 ：事件流从目标元素开始，向最外层DOM节点传递，途中如果有节点绑定了事件处理函数，这些函数就会被执行。
利用事件冒泡原理可以实现 事件委托
，所谓事件委托，就是在父元素上添加事件监听器，用以监听和处理子元素的事件，避免重复为子元素绑定相同的事件。当目标元素的事件被触发以后，这个事件就从目标元素开始，向最外层元素传递，最终冒泡到父元素上，父元素再通过event.target
获取到这个目标元素，这样做的好处是，父元素只需绑定一个事件监听，就可以对所有子元素的事件进行处理了，从而减少了不必要的事件绑定，对页面性能有一定的提升。
4、HTML解析过程
浏览器加载 html 文件以后，渲染引擎会从上往下，一步步来解析HTML标签，大致过程如下：
用户输入网址，浏览器向服务器发出请求，服务器返回html文件；
渲染引擎开始解析 html 标签，并将标签转化为DOM节点，生成 DOM树；
如果head 标签中引用了外部css文件，则发出css文件请求，服务器返回该文件，该过程会阻塞后面的解析；
如果引用了外部 js 文件，则发出 js 文件请求，服务器返回后立即执行该脚本，这个过程也会阻塞html的解析；
引擎开始解析 body 里面的内容，如果标签里引用了css 样式，就需要解析刚才下载好的css文件，然后用css来设置标签的样式属性，并生成渲染树；
如果 body 中的 img 标签引用了图片资源，则立即向服务器发出请求，此时引擎不会等待图片下载完毕，而是继续解析后面的标签；
服务器返回图片文件，由于图片需要占用一定的空间，会影响到后面元素的排版，因此引擎需要重新渲染这部分内容；
如果此时 js 脚本中运行了 style.display="none"，布局被改变，引擎也需要重新渲染这部分代码；
直到 html 结束标签为止，页面解析完毕。
5、重绘 和 回流
当渲染树中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建。这就称为回流。比如上面的img文件加载完成后就会引起回流，每个页面至少需要一次回流，就是在页面第一次加载的时候。
当渲染树中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的，比如 background-color。则就叫称为重绘。
从上面可以看出，回流必将引起重绘，而重绘不一定会引起回流。会引起重绘和回流的操作如下：
添加、删除元素(回流+重绘)
隐藏元素，display:none(回流+重绘)，visibility:hidden(只重绘，不回流)
移动元素，比如改变top,left的值，或者移动元素到另外一个父元素中。(重绘+回流)
对style的操作(对不同的属性操作，影响不一样)
还有一种是用户的操作，比如改变浏览器大小，改变浏览器的字体大小等(回流+重绘)
另外，transform
操作不会引起重绘和回流，是一种高效率的渲染。这是因为transform属于合成属性，对合成属性进行transition/animation
动画时将会创建一个合成层，这使得动画元素在一个独立的层中进行渲染，当元素的内容没有发生改变，就没必要进行重绘，浏览器会通过重新复合来创建动画帧。
6、本地存储
本地存储最原始的方式就是 cookie,cookie 是存放在本地浏览器的一段文本，数据以键值对的形式保存，可以设置过期时间。 但是 cookie
不适合大量数据的存储，因为每请求一次页面，cookie 都会发送给服务器，这使得 cookie
速度很慢而且效率也不高。因此cookie的大小被限制为4k左右(不同浏览器可能不同,分HOST)，如下所示：
Firefox和Safari允许cookie多达4097个字节，包括名(name)、值(value) 和 等号。
Opera允许cookie多达4096个字节，包括：名(name)、值(value) 和 等号。
Internet Explorer允许cookie多达4095个字节，包括：名(name)、值(value) 和 等号。
在所有浏览器中，任何cookie大小超过限制都被忽略，且永远不会被设置。
html5 提供了两种在客户端存储数据的新方法：localStorage 和 sessionStorage, 它们都是以key/value
的形式来存储数据，前者是永久存储，后者的存储期限仅限于浏览器会话(session)，即当浏览器窗口关闭后，sessionStorage中的数据被清除。
localStorage的存储空间大约5M左右(不同浏览器可能不同，分
HOST)，这个相当于一个5M大小的前端数据库，相比于cookie，可以节约带宽，但localStorage在浏览器隐私模式下是不可读取的，当存储数据超过了localStorage
的存储空间后会抛出异常。
此外，H5还提供了逆天的websql和
indexedDB，允许前端以关系型数据库的方式来存储本地数据，相对来说，这个功能目前应用的场景比较少，此处不作介绍。
7、浏览器缓存机制
浏览器缓存机制是指通过 HTTP 协议头里的 Cache-Control (或 Expires) 和 Last-Modified (或 Etag)
等字段来控制文件缓存的机制。
Cache-Control 用于控制文件在本地缓存有效时长。最常见的，比如服务器回包：Cache-Control:max-age=600
表示文件在本地应该缓存，且有效时长是600秒 (从发出请求算起)。在接下来600秒内，如果有请求这个资源，浏览器不会发出 HTTP
请求，而是直接使用本地缓存的文件。
Last-Modified 是标识文件在服务器上的最新更新时间。下次请求时，如果文件缓存过期，浏览器通过 If-Modified-Since
字段带上这个时间，发送给服务器，由服务器比较时间戳来判断文件是否有修改。如果没有修改，服务器返回304告诉浏览器继续使用缓存；如果有修改，则返回200，同时返回最新的文件。
Cache-Control 通常与 Last-Modified 一起使用。一个用于控制缓存有效时间，一个在缓存失效后，向服务查询是否有更新。
Cache-Control 还有一个同功能的字段：Expires。Expires 的值一个绝对的时间点，如：Expires: Thu, 10 Nov
2015 08:45:11 GMT，表示在这个时间点之前，缓存都是有效的。
Expires 是 HTTP1.0 标准中的字段，Cache-Control 是 HTTP1.1
标准中新加的字段，功能一样，都是控制缓存的有效时间。当这两个字段同时出现时，Cache-Control 是高优化级的。
Etag 也是和 Last-Modified 一样，对文件进行标识的字段。不同的是，Etag
的取值是一个对文件进行标识的特征字串。在向服务器查询文件是否有更新时，浏览器通过 If-None-Match
字段把特征字串发送给服务器，由服务器和文件最新特征字串进行匹配，来判断文件是否有更新。没有更新回包304，有更新回包200。Etag 和
Last-Modified 可根据需求使用一个或两个同时使用。两个同时使用时，只要满足基中一个条件，就认为文件没有更新。
另外有两种特殊的情况：
手动刷新页面(F5)，浏览器会直接认为缓存已经过期(可能缓存还没有过期)，在请求中加上字段：Cache-Control:max-age=0，发包向服务器查询是否有文件是否有更新。
强制刷新页面(Ctrl+F5)，浏览器会直接忽略本地的缓存(有缓存也会认为本地没有缓存)，在请求中加上字段：Cache-Control:no-cache
(或 Pragma:no-cache)，发包向服务重新拉取文件。
8、History
用户访问网页的历史记录通常会被保存在一个类似于栈的对象中，即history对象，点击返回就出栈，跳下一页就入栈。 它提供了以下方法来操作页面的前进和后退：
window.history.back( ) 返回到上一个页面
window.history.forward( ) 进入到下一个页面
window.history.go( [delta] ) 跳转到指定页面
HTML5 对History Api 进行了增强，新增了两个Api 和一个事件，分别是pushState、replaceState 和
onpopstate：
pushState是往history对象里添加一个新的历史记录，即压栈。
replaceState 是替换history对象中的当前历史记录。
当点击浏览器后退按钮或 js调用history.back 都会触发 onpopstate 事件。
与其类似的还有一个事件：onhashchange，onhashchange是老API，浏览器支持度高，本来是用来监听hash变化的，但可以被利用来做客户端前进和后退事件的监听，而onpopstate是专门用来监听浏览器前进后退的，不仅可以支持hash，非hash的同源
url 也支持。
9、HTML5离线缓存
HTML5离线缓存又叫Application
Cache，是从浏览器的缓存中分出来的一块缓存区，如果要在这个缓存中保存数据，可以使用一个描述文件（manifest file），列出要下载和缓存的资源。
manifest 文件是简单的文本文件，它告知浏览器被缓存的内容（以及不缓存的内容）。manifest 文件可分为三个部分：
- CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存
- NETWORK - 在此标题下列出的文件需要与服务器的连接，且不会被缓存
- FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面（比如 404 页面）
离线缓存为应用带来三个优势：
离线浏览 - 用户可在应用离线时使用它们
速度 - 已缓存资源加载得更快
减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。
10、Web语义化 和 SEO
Web语义化是指使用语义恰当的标签，使页面有良好的结构，页面元素有含义，能够让人和搜索引擎都容易理解。
SEO是指在了解搜索引擎自然排名机制的基础之上，对网站进行内部及外部的调整优化，改进网站在搜索引擎中关键词的自然排名，获得更多的展现量，吸引更多目标客户点击访问网站，从而达到互联网营销及品牌建设的目标。
搜索引擎通过爬虫技术获取的页面就是由一堆 html 标签组成的代码，人可以通过可视化的方式来判断页面上哪些内容是重点，而机器做不到。
但搜索引擎会根据标签的含义来判断内容的权重，因此，在合适的位置使用恰当的标签，使整个页面的语义明确，结构清晰，搜索引擎才能正确识别页面中的重要内容，并予以较高的权值。比如h1~h6这几个标签在SEO中的权值非常高，用它们作页面的标题就是一个简单的SEO优化。
*请认真填写需求信息，我们会在24小时内与您取得联系。
