前端面试题集锦

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浏览器。使用中需注意如下几点。1、该方法中必须为须要清除浮动元素的伪对象中设置 height:0，不然该元素会比实际高出若干像素；2、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.五、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.严格模式与混杂模式

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