今天完成的事情：

提交任务14、15

明天计划的事情：

学习js基础知识

遇到的问题：

页面中有3处效果没有实现，都比较简单

收获：

css 在使用中遇到很多问题，多数是关于布局方面，前面的任务很多都是和布局有关，这个方面已经做了大量练习，还有很多关于展示效果的属性没有用到，以后用到再去学习。html 表单和表格不怎么使用，这两个方面在以后会经常遇到，需要注意。 bootstrap 对元素做出很多实用性的改变，并且在这基础中又实现了很多组件。boostrap是一个很好的学习工具，对于它的样式模仿和学习是一条捷径。

任务14

开始时间：5.27

预计结束时间：6.3

http://task.jnshu.com/zentao/project-task-629.html

任务14深度思考

为什么要做组件库？

1 css样式全局性 2 复用性

如果css代码量比较庞大，那么就有可能给我们带来这样的困扰:（1）无法快速确切知道一个类的作用。（2）无法快速确定一个类在哪里被使用。（3）新增一个类是否会造成冲突。为了解决这个问题，可以将页面的每一个功能模块作为一个独立组件，然后对组件相关内容进行合理的命名，从而有助于我们确定一个css代码和相关页面结构的功能，也可以有效的防止冲突，提高代码的复用率。

许多遇到的问题是相似的，会逐渐形成一种固定的解决方法，这样就可以把这种方法单独拿出来以后直接使用或者进行简单修改，形成经验。

任务15深度思考

#1.目前流行的组件库有哪些？css，js各有哪些流行的库？ 

Bootstrap是最流行的前端开发框架，可以让不是前端工程师也能开发出优美的页面，更加快捷、方便的开发web页面和移动端应用。也能开发响应式web页面，上手也非常快。

Semantic UI是一个完全语义化的前端CSS界面开发框架，跟 Bootstrap 比起来更加丰富些，不那么单一，在用户体验、样式都很丰富

Foundation by ZURB是开发适应各种设备上的前端框架，主要开发响应式web应用框架，提供很丰富的DEMO实例，学起来也非常方便上手，也提供丰富的图标库。

Amaze UI是轻量级的前端应用框架，是国内比较流行的框架，比较适用于移动端响应式开发框架，可以按照项目要求生成专属的UI框架库进行使用，组件非常丰富，可以构建出漂亮的web页面。

Pure是雅虎公司开发的轻量级、响应式CSS框架，整个框架包也是非常的小，官网也提供许多实例进行学习，对于开发小型系统界面样式可以考虑使用Pure,因为小巧方便。

ElementUI是由饿了么UED设计、饿了么前端团队开发的,基于Vue2.0的桌面端组件库。

AntDesign蚂蚁金服出品的基于React的一款前端UIlibrary,定位不仅仅是一套UI组件库，而是一套前端设计语言，提供了大量的设计规范和示例。

NG-ZORRO是AntDesign的Angular实现，NG-ZORRO不仅继承了AntDesign的独到思想和极致体验，同时也结合了Angular框架的优点和特性。

QUICK UI是引领视觉公司出品的一套基于Jquery的UI组件库。

Zepto是一个轻量级的针对现代高级浏览器的JavaScript库， 它与jquery有着类似的api。

Node.js是一个Javascript运行环境(runtime)。实际上它是对Google V8引擎进行了封装。V8引 擎执行Javascript的速度非常快，性能非常好。Node.js对一些特殊用例进行了优化，提供了替代的API，使得V8在非浏览器环境下运行得更好。 Node.js是一个基于Chrome JavaScript运行时建立的平台， 用于方便地搭建响应速度快、易于扩展的网络应用。Node.js 使用事件驱动， 非阻塞I/O 模型而得以轻量和高效，非常适合在分布式设备上运行数据密集型的实时应用。

AngularJS诞生于2009年，由Misko Hevery 等人创建，后为Google所收购。是一款优秀的前端JS框架，已经被用于Google的多款产品当中。AngularJS有着诸多特性，最为核心的是：MVVM、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。

RequireJS的目标是鼓励代码的模块化，它使用了不同于传统<script>标签的脚本加载步骤。可以用它来加速、优化代码，但其主要目的还是为了代码的模块化。它鼓励在使用脚本时以module ID替代URL地址。

React 是Facebook 开发的框架，用于构建页面、javascript库。主要功能是对DOM操作，声明式设计，更快的开发出web应用系统

Vue.js 是用于构建交互式的 Web 界面的库。它提供了 MVVM 数据绑定和一个可组合的组件系统，具有简单、灵活的 API。从技术上讲， Vue.js 集中在 MVVM 模式上的视图模型层，并通过双向数据绑定连接视图和模型。实际的 DOM 操作和输出格式被抽象出来成指令和过滤器。相比其它的 MVVM 框架，Vue.js 更容易上手。

Backbone 为复杂Javascript应用程序提供模型(models)、集合(collections)、视图(views)的结构。其中模型用于绑定键值数据和自定义事件；集合附有可枚举函数的丰富API； 视图可以声明事件处理函数，并通过RESTful JSON接口连接到应用程序。

ECharts，一个纯 Javascript 的图表库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖轻量级的 Canvas 类库ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。

#2.经常遇到的浏览器的兼容性有哪些？原因，解决方法是什么，常用hack的技巧 ？ 

1、浏览器默认的margin和padding不同。解决方案是加一个全局的*{margin:0;padding:0;}来统一。 

2、IE6双边距bug:块属性标签float后，又有横行的margin情况下，在ie6显示margin比设置的大。解决方案是在float的标签样式控制中加入 display:inline;将其转化为行内属性。

3、在ie6，ie7中元素高度超出自己设置高度。原因是IE8以前的浏览器中会给元素设置默认的行高的高度导致的。解决方案是加上overflow:hidden或设置line-height为更小的高度。

4、min-height在IE6下不起作用。解决方案是添加 height:auto !important;height:xxpx;其中xx就是min-height设置的值

5、透明性IE用filter:Alpha(Opacity=60)，而其他主流浏览器用 opacity:0.6; 

6、a(有href属性)标签嵌套下的img标签，在IE下会带有边框。解决办法是加上a img{border:none;}样式。 

7、input边框问题。去掉input边框一般用border:none;就可以，但由于IE6在解析input样式时的BUG(优先级问题)，在IE6下无效。 

ie6的默认CSS样式，涉及到border的有border-style:inset;border-width:2px;浏览器根据自己的内核解析规则，先解析自身的默认CSS，再解析开发者书写的CSS，达到渲染标签的目的。IE6对INPUT的渲染存在bug，border:none;不被解析，当有border-width或border-color设置的时候才会令IE6去解析border-style:none;。 解决方案是用:border:0或border:0 none;或border:none:border-color:transparent;，推荐用第三种方案。 

8、父子标签间用margin的问题，表现在有时除IE(6/7)外的浏览器子标签margin转移到了父标签上，IE6&7下没有转移。

解决办法就是父子标签间的间隔建议用padding，兄弟标签间用margin。

9 如果容器中有浮动的元素，容器的高度不能自动延长适应内容的高度，使得内容溢出到容器外而影响页面布局，为了避免这种情况的发生，我们需要用CSS来清除元素的浮动。

 一般常用的方法有三种： A. 在浮动元素后面添加带有clear属性的空元素

B. 给容器添加属性overflow: hidden或者overflow: auto，在IE6中还需触发haslayout，所以还需添加zoom: 1。

C. 使用:after伪元素

#3.Quirks模式是什么？它和Standards模式有什么区别？ 

Quirks Mode是一种浏览器（像IE，Firefox，Opera）操作模式。从根本上说，怪异模式（也称之为兼容模式）意味着一个相对新的浏览器故意模拟许多在旧浏览器中存在的bug，特别是在IE4和IE5中。 Quirks Mode是由文档类型探查法触发。也就是大家熟知的文档类型切换。这意味着浏览器检查一个HTML文档的开始，看它是否包含一个HTML规范所要求的文档类型声明。

从IE6开始，引入了Standards模式，标准模式中，浏览器尝试给符合标准的文档在规范上的正确处理达到在指定浏览器中的程度。 在IE6之前CSS还不够成熟，所以IE5等之前的浏览器对CSS的支持很差， IE6将对CSS提供更好的支持，然而这时的问题就来了，因为有很多页面是基于旧的布局方式写的，而如果IE6 支持CSS则将令这些页面显示不正常，如何在即保证不破坏现有页面，又提供新的渲染机制呢？ 在写程序时我们也会经常遇到这样的问题，如何保证原来的接口不变，又提供更强大的功能，尤其是新功能不兼容旧功能时。遇到这种问题时的一个常见做法是增加参数和分支，即当某个参数为真时，我们就使用新功能，而如果这个参数 不为真时，就使用旧功能，这样就能不破坏原有的程序，又提供新功能。IE6也是类似这样做的，它将DTD（文档类型定义）当成了这个“参数”，因为以前的页面大家都不会去写DTD，所以IE6就假定 如果写了DTD，就意味着这个页面将采用对CSS支持更好的布局，而如果没有，则采用兼容之前的布局方式。这就是Quirks模式（怪癖模式，诡异模式，怪异模式）。

#4.渐进增强和优雅降级之间有什么不同? 

渐进增强（Progressive Enhancement）：一开始就针对低版本浏览器进行构建页面，完成基本的功能，然后再针对高级浏览器进行效果、交互、追加功能达到更好的体验。 优雅降级（Graceful Degradation）：一开始就构建站点的完整功能，然后针对浏览器测试和修复。比如一开始使用 CSS3 的特性构建了一个应用，然后逐步针对各大浏览器进行 hack 使其可以在低版本浏览器上正常浏览。 其实渐进增强和优雅降级并非什么新概念，只是旧的概念换了一个新的说法。在传统软件开发中，经常会提到向上兼容和向下兼容的概念。渐进增强相当于向上兼容，而优雅降级相当于向下兼容。向下兼容指的是高版本支持低版本的或者说后期开发的版本支持和兼容早期开发的版本，向上兼容的很少。

优雅降级和渐进增强只是看待同种事物的两种观点。优雅降级和渐进增强都关注于同一网站在不同设备里不同浏览器下的表现程度。关键的区别则在于它们各自关注于何处，以及这种关注如何影响工作的流程。 优雅降级观点认为应该针对那些最高级、最完善的浏览器来设计网站。而将那些被认为“过时”或有功能缺失的浏览器下的测试工作安排在开发周期的最后阶段，并把测试对象限定为主流浏览器（如 IE、Mozilla 等）的前一个版本。在这种设计范例下，旧版的浏览器被认为仅能提供“简陋却无妨 (poor, but passable)” 的浏览体验。你可以做一些小的调整来适应某个特定的浏览器。但由于它们并非我们所关注的焦点，因此除了修复较大的错误之外，其它的差异将被直接忽略。 渐进增强观点则认为应关注于内容本身。请注意其中的差别：我甚至连“浏览器”三个字都没提。内容是我们建立网站的诱因。有的网站展示它，有的则收集它，有的寻求，有的操作，还有的网站甚至会包含以上的种种，但相同点是它们全都涉及到内容。这使得渐进增强成为一种更为合理的设计范例。这也是它立即被 Yahoo! 所采纳并用以构建其“分级式浏览器支持 (Graded Browser Support)”策略的原因所在。

#5.HTML5的离线储存怎么使用？ 

HTML5的离线存储是基于一个新建的.appcache文件的缓存机制(不是存储技术)，通过这个文件上的解析清单离线存储资源，这些资源就会像cookie一样被存储了下来。之后当网络在处于离线状态下时，浏览器会通过被离线存储的数据进行页面展示。

离线存储的manifest一般由三个部分组成： 

① CACHE：必选，表示需要离线存储的资源列表，由于包含manifest文件的页面将被自动离线存储，所以不需要把页面自身也列出来。 

② NETWORK：可选，可以使用通配符，表示在它下面列出来的资源只有在在线的情况下才能访问，他们不会被离线存储，所以在离线情况下无法使用这些资源。不过，如果在CACHE和NETWORK中有一个相同的资源，那么这个资源还是会被离线存储，也就是说CACHE的优先级更高。 

③ FALLBACK：可选，表示如果访问第一个资源失败，那么就使用第二个资源来替换他，如/html/ /404.html表示用 “404.html” 替代 /html/ 目录中的所有文件，/ /404.html表示用 “404.html” 替代当前目录中的所有文件，*.html /404.html表示用 “404.html” 替代 所有html文件。 

浏览器如何对离线存储的资源进行管理和加载： 

① 在线的情况下，浏览器发现html头部有manifest属性，它会请求manifest文件，如果是第一次访问app，那么浏览器就会根据manifest文件的内容下载相应的资源并且进行离线存储。如果已经访问过app并且资源已经离线存储了，那么浏览器就会使用离线的资源加载页面，然后浏览器会对比新的manifest文件与旧的manifest文件，如果文件没有发生改变，就不做任何操作，如果文件改变了，那么就会重新下载文件中的资源并进行离线存储。 

② 离线的情况下，浏览器就直接使用离线存储的资源。

#6.知道什么是微格式吗？谈谈理解。在前端构建中应该考虑微格式吗？ 

微格式是网页上使用的简单规范（称为实体），用于描述特定的信息类型，例如评论、活动、商品、商家或人物。每个实体都有自己相应的属性。例如，人物具有姓名、地址、职位、公司和电子邮件地址等属性。通常情况下，微格式使用 HTML 标记（常为 <span> 或 <div>）中的 class 属性为实体及其属性分配简要的描述性名称。

微格式就是建立在已有的 被广泛采用的标准基础之上的一组简单的, 开放的数据格式. 微格式主要包括hCard，hCalendar，hAtom等. 

(1)hCard微格式及实例 hCard微格式是一种设计用来表示人员及公司, 组织和位置的格式, 或多或少使用了与vCard标准相同的属性和值, 但它使用的是(X)HTML.

(2)hCalendar微格式与其实例 网上讨论的常见的事件通常由下列元素构成:概要或者标题. 位置. URL. 起始日期和时间.

#7.知道css有个content属性吗？有什么作用？有什么应用？ 

content属性用于插入生成的内容，常和:before选择器和:after选择器配合使用，将生成的内容放在一个元素内容的前面或后面。

#8.谈谈以前端角度出发做好SEO需要考虑什么？ 

搜索引擎优化（Search Engine Optimization）,简称SEO。是按照搜索引擎给出的优化建议，以增强网站核心价值为目标，从网站结构、内容建设方案、用户互动传播等角度进行合理规划，以改善网站在搜索引擎中的表现，吸引更多搜索引擎用户访问网站。SEO与搜索引擎，互相促进，互利互助。

1、 搜索引擎工作原理 可以将搜索引擎比喻为一个偌大的图书馆，里面所有的图书都已经分门别类排列整齐了，分类分成大分类（可以理解为书架）小分类（可以理解为书架上搁架）以及具体到最小的分类（书的名字）。图书馆每天都在增加新的图书，那么一个新的网站就等于一本书，我们进入搜索引擎输入的关键词就是图书馆里面分类的名字或者直接是书名，通过搜索引擎这个庞大的图书馆系统可以很快的找到我们需要的内容。那么什么书归置于什么分类下，如何摆到更容易被找到的位置就需要理解下面的内容了。 

2、 搜索引擎蜘蛛工作原理 搜索引擎蜘蛛是搜索引擎工程师开发出的模拟蜘蛛在蜘蛛网爬行的一个程序，因为类似蜘蛛的行为，就称为搜索引擎蜘蛛，用来抓取网页信息，分门别类的存储在上面所说的图书馆里，有需要的时候再进行调取。所以为了让蜘蛛更容易抓取网页内容，就要投其所好，才能为我所用。

为了提高网站的权重，增强搜索引擎友好度，以达到提高排名，增加流量，改善用户体验，促进销售的作用。 

1、 什么样的网站需要被搜索引擎检索到？ 我有百度过关键词“合肥房产网”，出来的结果是好居网排名21位，也就是说翻到第三页第一个才是我们的网站。如果我是一位准备买房或者卖房的用户，我用百度搜索也不太可能会翻到第三页才决定我要找谁给我买或者卖这个房子吧。就算我们的服务我们的产品是最好的，但是用户搜索不到也是白搭，这就是SEO的作用所在，通过更高的排名，让潜在用户可以更便捷的找到我们。 

2、 什么样的网站可以更好的被搜索引擎检索到？ 对搜索引擎越友好，网站权重越高，排名就越高，就更容易被检索到。从拟人化的角度来看待搜索引擎蜘蛛，可以得出一些结论。首先你需要投其所好，网站结构脉络需要符合蜘蛛阅读的习惯，代码杂乱无章，蜘蛛看着都头疼，就无法给他留个好印象了；其次，网站深度不能太深，从首页到目标页跳转最好不能超过四次，再多的话蜘蛛就头晕了，转不出来，下次他就不再光顾，我们只能往后站；再次，当蜘蛛进入一个网站，半天加载不出来，他每天这么繁重的工作量，哪里会有时间慢慢等加载完成，相信印象也不会有多好了；最后，内容是一个网站存在的基础

1 提高页面加载速度。 能用css解决的不用背景图片，背景图片也尽量压缩大小，可以几个icons放在一个图片上，使用background-position找到需要的图片位置。可以减少HTTP请求数，提高网页加载速度。 

2 结构、表现和行为的分离。另外一个重要的拖慢网页加载速度的原因就是将css和JS都堆积在HTML页面上，每次看到有人直接在页面上编写CSS和JS我都很痛心疾首。通过外链的方式能大大加快网页加载速度的，css文件可以放在head里，JS文件可以放置在body的最下方，在不影响阅读的情况下再去加载JS文件。 

3 优化网站分级结构。在每个内页加面包屑导航是很有必要的，可以让蜘蛛进入页面之后不至于迷路，有条件的话，最好能单独加个Sitemap页面，将网站结构一目了然地展示在蜘蛛面前，更有利于蜘蛛抓取信息。 

4 集中网站权重。由于蜘蛛分配到每个页面的权重是一定的，这些权重也将平均分配到每个a链接上，那么为了集中网站权重，可以使用”rel=nofollow”属性，它告诉蜘蛛无需抓取目标页,可以将权重分给其他的链接。 

5 文本强调标签的使用。当着重强调某个关键词需要加粗表示，选用strong标签比使用b标签要更有强调作用。 

6 a标签的title属性的使用。在不影响页面功能的情况下，可以尽量给a标签加上title属性，可以更有利于蜘蛛抓取信息。 

7 图片alt属性的使用。这个属性可以在图片加载不出来的时候显示在页面上相关的文字信息，作用同上。 

8 H标签的使用。主要是H1标签的使用需要特别注意，因为它自带权重，一个页面有且最多只能有一个H1标签，放在该页面最重要的标题上面，如首页的logo上可以加H1标签。 

精减代码 

清除网页中一些冗余的代码，网上有这样的工具，可以辅助完成，如果需要的话，我们可以把代码中的注释去掉，甚至空行之类的也去掉，尽量的减少代码量，从而减小页面体积。 

CSS Sprites 

通俗点讲，就是图片合并，可以把网站中一些比较通用的小图片，合并到一张图片上，然后利用CSS技术来分别调用图片不同的部分。这样可以大大的减少HTTP的请求量，在网页加载的时候，速度就快很多，现在很多大中型网站都在用这个前端加速技术，效果也是很不错的。 

为图片指定宽度与高度 

这也是很多人比较容易忽略的，在页面中，请你为每一个图片，都指定一个width属性与height属性，这样在页面加载的时候，浏览器会预先留出既定的位置，图片下边的代码可以继续下载而不用等待，提高并行下载的速度，提高了页面加载的速度。 

启用Keep-Alive属性 

Keep-Alive你可以理解为长连接，在没有启用keep-alive属性之前，浏览器向服务器请求的connection是即连即断的，执行一次HTTP请求完成后，马上断开这个连接的，而启用Conncetion的Keep-Alive属性之后，这个连接可以保持一段时间，从而可以提高页面加载的速度。 

使用浏览器缓存 

可以使用缓存技术来提高页面的加载速度，为一些不经常变化的文件，设置一个相对较长的过期时间，这样当用户访问网站后，就会在它的浏览器中留下缓 存，当它在下次请求的时候，留在缓存中的组件就不用再向服务器发出HTTP请求了，这样减少了浏览器向网站服务器发出的HTTP请求数，从而提高了页面加 载速度，这在一些图片比较多的网站，效果是非常明显的，我们要善于使用缓存技术。 

启用GZIP压缩 

大中型网站，基本都启用了GZIP压缩，如果你使用的是虚拟主机，你可以让服务商为你启用，如果自己有服务器，自己启用也很简单的，为什么启用GZIP压缩就会加快速度呢，因为当启用了GZIP后，网站服务器向你传输数据之前，是经过压缩了的，当传输到你的浏览器后，会再被解压缩的，从而可以在 你的浏览器上正常显示，而且压缩率可以达到很多高，效果非常好。一般你启用了压缩后，搜索引擎对你网站的抓取量也是上升了的。 前端速度优化方面还有很多工作可以去做，例如大公司都启用了CDN加速，你的图片也可以进行无损压缩，CSS、JS文件都可以用一些专业的工具去压缩，在你网页的head标头要声明字符集，尽量少用重定向，指定Last-Modified 或 ETag标头等，当然这些都多少涉及了一些技术方面的问题，做页面前端优化是一个系统的工程，是需要技术、SEO、运维等去配合完成的

#9.请描述 BFC(Block Formatting Context) 及其如何工作 

MDN解释： 

A block formatting context is a part of a visual CSS rendering of a Web page. It is the region in which the layout of block boxes occurs and in which floats interact with each other，一个块级格式化上下文[BFC]是可视化CSS渲染网页的一部分，它是一个区域，块级布局，相互浮动在这个区域发生。

A block formatting context contains everything inside of the element creating it that is not also inside a descendant element that creates a new block formatting context.一个BFC块区域包含所有里面的元素，除子元素创建了新的BFC。（因为各个BFC是一个独立的区域，BFC之间相互不影响） 

所以：由于html(根元素)是独立的BFC，在里面的浮动，块级布局等才会相互影响，若新创建BFC,则相邻BFC之间的浮动元素，或是其他元素将不会影响。如,相邻两个块级元素的外边距折叠的情况将不会发生。

如何触发BFC 

position为absolute 或者fixed （总结为 脱离文档流） 

float不为none（也是要脱离文档流） 

the root element or something that contains it(根元素可产生独立BFC) 

display值为：inline-block,table-cell,table-caption,flex,inline-flex(flex和inline-flex是css3的特性) 

overflow:不为visible的任何其他值 

fieldset元素

BFC就是一种布局方式，在这种布局方式下，内部盒子们自所在的 containing block 顶部起一个接一个垂直排列，水平方向上撑满整个宽度 (除非内部的盒子自己内部建立了新的 BFC)。 developer center上面有对BFC的一段描述： 一个 block formatting context 是web页面可视化CSS渲染的一个部分，是一块 block boxes 排布以及 float 元素相互作用的区域。可以理解为一个作用范围，在一个BFC里的布局与其之外的布局不相关或者说不相互影响

#10.描述一个你在实际使用中有用过什么比较好的布局方式（不拘泥于页面整体布局，页面中某一小版块也行），深入讲解下其中的原理？

双飞翼布局

主要内容放在前面，浏览器会先渲染主体，然后两侧最后加载，保证用户先看到主体内容

左中右三部分都是用左浮动，中间设置width: 100%在前面挡到左右两部分，接下使用负margin让左右两部分与中间位于同一行，margin-left: -100% margin-left: -100px 这样左右两部分会挡到中间内容，在中间内容框的子框设置左右margin来消除上述影响。