前端面试题目整理

 

1.请说出三种减小页面加载时间的方法。
* 1.优化图片
* 2.优化css,压缩合并css
* 3.减小http请求（合并文件，合并图片）

 

2.解释下CSS sprites ,以及你要如何在页面或网站中使用它。
* CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background-repeat”,“background-position”的组合进行背景定位，background-position能够用数字精确的定位出背景图片的位置。

 

3.简述一下你对HTML语义化的理解？
* 用正确的标签作正确的事情。
* HTML语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析。即便在没有样式css状况下也以一种文档格式显示，而且是容易阅读的。

 

 

4.为何要推出es6,相较es5有啥好处？（es6，实际上，就是一种新的javascript规范）
* es6，它包含了一些很棒的新特性，能够更加方便的实现不少复杂的操做，提升开发人员的效率。

你所不知道的es6新特性

 

5.原生forEach和map的区别以及兼容

http://www.javashuo.com/article/p-hjrfcprx-cq.html

 

 

前端开发的优化问题

一、减小http请求次数：css spirit,data url

二、JS，CSS源码压缩

三、用innerHTML代替DOM操做，减小DOM操做次数，优化javascript性能

四、当设置的样式不少时设置className而不是直接操做style

五、少用全局变量

六、缓存DOM节点查找的结果

七、图片预加载

八、避免在页面的主体布局中使用table，table要等其中的内容彻底加载以后才会显示出来，显示比div+css布局慢

清除浮动

一、在浮动元素后面添加空标签 clear:both

二、给父标签使用overflow:hidden/auto；zoom:1

三、父级div定义，使用伪类：after和zoom

.clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0}
.clearfloat{zoom:1}

　　zoom:1的做用： 触发IE下的hasLayout。zoom是IE浏览器专有属性，能够设置或检索对象的缩放比例。

　　当设置了zoom的值以后，所设置的元素就会扩大或缩小，高度宽度就会从新计算了，这里一旦改变zoom值时其实也会发生从新渲染，运用这个原理，也就解决了ie下子元素浮动时候父元素不随着自动扩大的问题。

有哪些隐藏内容的方法（同时还要保证屏幕阅读器可用）

 　　display:none; visibility:hidden;overflow:hidden;

一、display:none;的缺陷

　　a.搜索引擎可能认为被隐藏的文字属于垃圾信息而被忽略

　　b.屏幕阅读器（是为视觉上有障碍的人设计的读取屏幕内容的程序）会忽略被隐藏的文字。

二、visibility:hidden;的缺陷

　　a.隐藏的内容会占据他所应该占据的物理空间

三、overflow:hidden;一个比较合理的方法

.texthidden{display:block;overflow:hidden;width:0;height:0}

　　将宽度和高度设定为0，而后超过部分隐藏，就会弥补上述1、二方法中的缺陷，也达到了隐藏内容的目的。

css动画和js动画的优缺点

CSS3动画

　　优势：

　　　　1.在性能上会稍微好一点，浏览器会对CSS3的动画作一些优化（好比专门新建一个图层用来跑动画）

　　　　2.代码相对简单

　　缺点：

　　　　1.在动画控制上不够灵活

　　　　2.兼容性很差

　　　　3.部分动画功能没法实现（如滚动动画，视差滚动等）

JAVASCRIPT动画

　　优势 ：

　　　　1.控制能力很强，能够单帧的控制、变换

　　　　2.兼容性好，写得好彻底能够兼容IE6，且功能强大

　　缺点：

　　　　计算没有css快，另外常常须要依赖其余的库

总结：

　　不复杂的动画彻底能够用css实现，复杂一些的，或者须要交互的时候，用js会靠谱一些

cookies，sessionStorage和localStorage的区别

　　cookie：

　　　　cookie是网站为了标示用户身份而储存在用户本地终端上的数据（一般通过加密）

　　　　cookie数据始终在同源的http请求中携带（即便不须要），即会在浏览器和服务器间来回传递

　　sessionSotrage和localStorage不会自动把数据发给服务器，仅在本地保存。

　　存储大小：

　　　　cookie数据大小不能超过4k

　　　　sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，能够达到5M或更大。

　　有效时间：

　　　　localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据

　　　　sessionStorage 数据在当前浏览器窗口关闭后自动删除

　　　　cookie 设置的cookie过时时间以前一直有效，即便窗口或浏览器关闭

　　做用域不一样：

　　　　sessionStorage不在不一样浏览器窗口中共享，即便是同一个页面

　　　　localStorage在全部同源窗口中都是共享的；cookie也是在全部同源窗口中都是共享的。

　　　

资料连接：http://www.javashuo.com/article/p-wfdauyca-bd.html