前端面试总结

HTML/CSS:

1,什么是渐进增强（progressive enhancement）、优雅降级（graceful degradation）？

渐进增强 progressive enhancement：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
优雅降级 graceful degradation：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。
两者的区别：
优雅降级是从最复杂的现状开始，并试图减少用户体验的供给；而渐进增强是从最基础的、能够起作用的版本开始，并且不断扩充，以适应未来环境的需求。
更合适的说话是，渐进增强是保证基本效果的情况下增强效果，优雅降级是保证最恶劣情况下的基本效果。

2.语义化HTML的好处？

在HTML 5出来之前，我们用div来表示页面章节，但是这些div都没有实际意义。（即使我们用css样式的id和class形容这块内容的意义）
a.在没有css的情况下，页面呈现清晰的结构
b.屏幕阅读器能够根据根据你的“标记”读网页，例如一些有视障的访客。
c.网络搜索引擎爬虫更容易找到对应查找的内容
d.便于团队的开发维护，语义化更具有可读性。
例如：
header元素、hgroup元素里面一般放<hgroup><h1>~</h6></hgroup>
article元素 代表的是在网站中自成一体的内容，譬如帖子、文章等。
footer元素 放在页脚部分，相关文档的链接，标签、版权资料等
nav元素用于导航部分
address代表区块容器，作为联系信息，邮编地址，邮件等内容的载体

3.设计中使用了非标准的字体，该如何处理？

a.用图片代替。
b.使用一些在线字体库，例如Typekit，Google Webfonts等。
c.使用@font-face

4.如何隐藏网页内容，只让它们在屏幕阅读器上使用？

a.display：none;
b.visibility:hidden;
c.overflow:hidden;
d.position：absolute;top:-999px;
e.opacity:0;

5.CSS引入的方式有哪些？

a.使用<link>元素链接外部的样式文件
b.在head中使用<style></style>标签里面书写。
c.在css中使用@import标记来导入样式表单
d.在DOM中插入style属性。

6.link和@import的区别?

a.link属于HTML标签的，而@import只是css提供的一种引入方式。
b.link标签还能干其它很多的事，例如定义RSS，rel连接属性。@import只能加载css
c.兼容性的差别：@import是CSS2.1提出的，IE5以上的才能识别，link标签无此问题
d.link属于html文档中的标签，Dom能够控制，但不能对@import进行Dom操作

7.css属性position的属性值有哪些，描述它们的作用。

a.position:static css中所有的position默认属性都是static.例如两个页面中都有同一个div，一个需要决定定位，另一个不需要。那么可以设置为static
b.relative相对定位，设置relative之后，就可以设置TRBL("left", "top", "right" 以及 "bottom" ),相对于自己本身的位置进行定位。
   设置relative，没有TRBL设置，则不会进行任何位置改变。移动之后所占的物理空间还是存在的，相对定位后并不会影响相邻的元素。
c.绝对定位absolute
给定absolute之后，会飘出文档流，本身的物理空间也消失了。找最近的设置了relative的元素位置进行参照，没有设置则以祖先元素html为参照。
d.fixed绝对定位，相对于浏览器窗口进行绝对定位，同样可以通过TRBL设置位置。
e.inherit从父元素中继承position属性。

8.Web标准以及W3c标准的理解

不是由某一条标准构成，而是由一系列标准构成。将网页分成3个部分：结构、表现、行为，各自都有各自的标准：
a.Web标准规范要求，书写标签必须闭合、标签小写、不乱嵌套，可以提高机器人对网页的搜索几率。
b.建议使用外链css和js脚本，达到结构和行为、表现层的分离。
c.延迟脚本的加载，将脚本放在页面底部。

9.css权重？

CSS文档是如何确定给不同的样式分配不同的权重的，越往后权重越大。
用户代理声明（译注：如浏览器默认样式）
用户声明（译注：如用户浏览器选项设置或通过开发人员调试工具修改）
开发者声明（译注：如页面中引用的CSS）
带有!important的开发者声明
带有!important的用户声明

10.html5的新特征有哪些？

     a.DOCTYPE(DOCTYPE !html即可)
     b.正则表达式使用pattern属性，很方便地对浏览器端输入的数据进行验证。
     c.数据列表元素 datalist >option>option
     d.下载属性，download="ssss.pdf"
     e.链接网页的预先加载处理
     rel="prefetch"或者prerender属性可以帮助你提前加载整个页面
     f.语义化标签
     d.Drag和Drop
      新增用于拖拽的属性draggable,决定了元素是否能被拖拽。
     .........

11.清除浮动的几种方法？

    a.使用空标签清除浮动。
    这种方法是在所有浮动标签后面添加一个空标签 定义css clear:both. 弊端就是增加了无意义标签。
    b.使用overflow。
    给包含浮动元素的父标签添加css属性 overflow:auto; zoom:1; zoom:1用于兼容IE6。
   c.使用after伪对象清除浮动。
    该方法只适用于非IE浏览器。使用中需注意以下几点。一、该方法中必须为需要清除浮动元素的伪对象中设置 height:0，否则该元素会比实际高出若干像素；二、content属性是必须的，但其值可以为空，可设置content属性的值设为”.”。

12.使用 CSS 预处理器的优缺点有哪些？

优点:
    a.css的语法不够强大，需要重复书写很多重复的选择器.css预处理器刚好解决了这一问题。
    b.提供变量和逻辑控制
    c.合理的样式复用机制 减少代码的冗余
    d.提高代码的可维护性
    e.mixin 混入
缺点：
   a.学习成本有点高。
   b.使用这个预处理团队的难度加大
   c.个人感觉是css本来就是很简单的东西，这样搞的更复杂

13.假若你有5个不同的 CSS 文件, 加载进页面的最好方式是?

1.用一个大的css文件代替这5个css文件

14.xhtml的局限性

     a.语法上更严格，放弃了一些语义不好的标签
     b.必须要有head，body.标签必须闭合
     c.一些老的浏览器并不兼容

15.如果把HTML5看做一个开放的平台，那么它构建的模块有哪些？

    a.基于位置服务的LBS
    b.Web Storage API
    c.无插件播放音频和视频
   d.调用相机和GPU图像处理单元等硬件设备
   e.拖拽和Form AP

Javascript

1.什么是事件代理？

JavaScript事件代理则是一种简单的技巧，通过它你可以把事件处理器添加到一个父级元素上，这样就避免了把事件处理器添加到多个子级元素上。
当我们需要对很多元素添加事件的时候，可以通过将事件添加到它们的父节点而将事件委托给父节点来触发处理函数。这主要得益于浏览器的事件冒泡机制。

2.javascript的typeof返回哪些数据类型

typeof 返回值有六种可能： "number," "string," "boolean," "object," "function," 和 "undefined"

3.js中的split、slice、splice函数区别？

a . string.split(separator,limit)
该方法是将string分割成片段来创建一个字符串数组，可选参数limit可以限制被分割的片段数量
separator参数可以是字符串,或者正则表达式,separator是一个空字符，会返回一个单字符的数组。
  limit是返回的数量限制
  //"hello world".split('',1);//["h"]
// "hello world".split('',5);//["h", "e", "l", "l", "o"]
//"hello world".split('',-1);//["h", "e", "l", "l", "o", " ", "w", "o", "r", "l", "d"]
// "hello world".split(' ',2);//["hello", "world"]
//"hello world".split(' ',3);//["hello", "world"]
b .string.slice(start,end)
解释：slice方法复制string的一部分来构造一个新的字符串
// "hello world".slice(0,5);//"hello"
//"hello world".slice(0,-1);//"hello worl"
c.数组的splice
    array.splice(start,deleteCount,item...)
   splice方法从array中移除一个或多个数组，并用新的item替换它们。
  参数start是从数组array中移除元素的开始位置,默认从0开始，参数deleteCount是要移除的元素的个数。
  //var a=['a','b','c'];//var b=a.splice(1,1,'e','f');  //a=['a','e','f','c'],b=['b']

Jquery/Bootstrap/React等框架类库

其它

1,主要的浏览器及内核？主要区别？

IE：Trident内核
Mozilla FireFox： Gecko内核
Chrome 、Safari：Webkit内核
Opera:Presto内核

2.常见浏览器端存储技术有哪些？

cookie
cookie会随着每次HTTP请求头信息一起发送，无形中增加了网络流量，另外，cookie能存储的数据容量有限，根据浏览器类型不同而不同，IE6大约只能存储2K。
Flash ShareObject
这种方式能能解决上面提到的cookie存储的两个弊端，而且能够跨浏览器，应该说是目前最好的本地存储方案。不过，需要在页面中插入一个Flash，当浏览器没有安装Flash控件时就不能用了。所幸的是，没有安装Flash的用户极少。
缺点：需要安装Flash插件。
Google Gear
Google开发出的一种本地存储技术。
缺点：需要安装Gear组件。
userData
IE浏览器可以使用userData来存储数据，容量可达到640K，这种方案是很可靠的，不需要安装额外的插件。缺点：它仅在IE下有效。
sessionStorage
使用于Firefox2+的火狐浏览器，用这种方式存储的数据仅窗口级别有效，同一个窗口（或者Tab）页面刷新或者跳转，都能获取到本地存储的数据，当新开窗口或者页面时，原来的数据就失效了。
缺点：IE不支持、不能实现数据的持久保存。
globalStorage
使用于Firefox2+的火狐浏览器，类似于IE的userData。
1//赋值2 globalStorage[location.hostname]['name'] = 'tugai'; 3//读取4 globalStorage[location.hostname]['name']; 5//删除6 globalStorage[location.hostname].removeItem('name');
缺点：IE不支持。
localStorage
localStorage是Web Storage互联网存储规范中的一部分，现在在Firefox 3.5、Safari 4和IE8中得到支持。
缺点：低版本浏览器不支持。
结论：
Flash shareobject是不错的选择，如果你不想在页面上嵌入Flash，可以结合使用userData(IE6+)和globalStorage(Firefox2+)和localStorage(chrome3+)实现跨浏览器。

3.制作一个网站的流程有哪些？

1.咨询
网站的一个目的，服务宗旨，总体的色调，主体内容...包括网站的上线时间，预算。
2.计划，项目的一个建议书，这里罗列出前期咨询沟通的所有细节，包括一些不确认因素
3.准备一个合同
没有合同决不搞任何交易。有合同那基本上可以保证您和客户都不会再随意更改了。
4.做一些研究
这种网站同行是如何做的，竞争对手是如何做的，例如有没有必要做一些seo优化等
5.制作一个网站地图
网站的框架图，骨架。网站的组织架构，易于分工操作，
6.准备网站所需的材料
图像，视频，音频材料等
7.开始网站的设计、coding阶段
8.建立测试站点
9.启动网站

4.严格模式与混杂模式

当浏览器厂商开始创建与标准兼容的浏览器时，他们希望确保向后兼容性。为了实现这一点，他们创建了两种呈现模式：标准模式和混杂模式
在标准模式中，浏览器以其支持的最高标准呈现页面，；
在混杂模式中，页面以一种比较宽松的向后兼容的方式显示。混杂模式通常模拟老式浏览器的行为以防止老站点无法工作。