《前端面试笔试题总结》由会员分享，可在线阅读，更多相关《前端面试笔试题总结（35页珍藏版）》请在金锄头文库上搜索。
1、JavaScript 类库：jQuery、Prototype JavaScript 框架：BackBone、Vuejs、Angular.js、React.js CSS 预编译器：LessCss、Sass JavaScript 模块加载器：RequireJS、Browserify 项目构建工具：Grunt、Gulp 项目管理和协同工具的使用：SVN、Git 前端测试框架以及工具：Jasmine、Mocha 基本后端开发：NodeJS、Python web 相关技术： MongoDB、CoffeeScript、SEO、Socket.io、Express、Tornado 等 1、谈谈 cookie
2、的弊端： cookie 虽然在持久保存客户端数据提供了方便，分担了服务器存储 的负担，但还是有很多局限性的。 第一：每个特定的域名下最多生成 20个 cookie 1.IE6 或更低版本最多 20个 cookie 2.IE7 和之后的版本最后可以有 50个 cookie。 3.Firefox 最多 50个 cookie 4.chrome 和 Safari 没有做硬性限制 IE 和 Opera 会清理近期最少使用的 cookie，Firefox 会随机清理 cookie。 cookie 的最大大约为 4096字节，为了兼容性，一般不能超过 4095 字节。 IE 提供了一种存储可以持久化用户数据
3、，叫做 uerData，从 IE5.0 就 开始支持。每个数据最多 128K，每个域名下最多 1M。这个持久化 数据放在缓存中，如果缓存没有清理，那么会一直存在。优点：极高的扩展性和可用性 1.通过良好的编程，控制保存在 cookie 中的 session 对象的大小。 2.通过加密和安全传输技术（SSL），减少 cookie 被破解的可能性。 3.只在 cookie 中存放不敏感数据，即使被盗也不会有重大损失。 4.控制 cookie 的生命期，使之不会永远有效。偷盗者很可能拿到一 个过期的 cookie。 缺点： 1.Cookie数量和长度的限制。每个 domain 最多只能有 20条 c
4、ookie，每个 cookie 长度不能超过 4KB，否则会被截掉。 2.安全性问题。如果 cookie 被人拦截了，那人就可以取得所有的 session 信息。即使加密也与事无补，因为拦截者并不需要知道 cookie 的意义，他只要原样转发 cookie 就可以达到目的了。 3.有些状态不可能保存在客户端。例如，为了防止重复提交表单， 我们需要在服务器端保存一个计数器。如果我们把这个计数器保存 在客户端，那么它起不到任何作用。 二、浏览器本地存储： 在较高版本的浏览器中，js 提供了 sessionStorage 和 globalStorage。 在 HTML5 中提供了 localStor
5、age 来取代 globalStorage。 html5 中的 Web Storage 包括了两种存储方式：sessionStorage 和 localStorage。 sessionStorage 用于本地存储一个会话（session）中的数据，这些数 据只有在同一个会话中的页面才能访问并且当会话结束后数据也随 之销毁。因此 sessionStorage 不是一种持久化的本地存储，仅仅是会 话级别的存储。 而 localStorage 用于持久化的本地存储，除非主动删除数据，否则数 据是永远不会过期的。 三、web storage 和 cookie 的区别 Web Storage 的概念和
6、cookie 相似，区别是它是为了更大容量存储设 计的。Cookie 的大小是受限的，并且每次你请求一个新的页面的时 候 Cookie 都会被发送过去，这样无形中浪费了带宽，另外 cookie 还 需要指定作用域，不可以跨域调用。 除此之外，Web Storage 拥有 setItem,getItem,removeItem,clear 等方法， 不像 cookie 需要前端开发者自己封装 setCookie，getCookie。 但是 Cookie 也是不可以或缺的：Cookie 的作用是与服务器进行交互， 作为 HTTP 规范的一部分而存在 ，而 Web Storage 仅仅是为了在本 地“
7、存储”数据而生 浏览器的支持除了 IE及以下不支持外，其他标准浏览器都完全支持(ie 及 FF 需在 web 服务器里运行)，值得一提的是 IE 总是办好事， 例如 IE7、IE6 中的 UserData 其实就是 javascript 本地存储的解决方 案。通过简单的代码封装可以统一到所有的浏览器都支持 web storage。 localStorage 和 sessionStorage 都具有相同的操作方法，例如 setItem、getItem 和 removeItem 等 四、display:none 和 visibility:hidden 的区别？ display:none 隐藏对应的
8、元素，在文档布局中不再给它分配空间，它 各边的元素会合拢，就当他从来不存在。 visibility:hidden 隐藏对应的元素，但是在文档布局中仍保留原来的 空间。 五、CSS 中 link 和import 的区别是？ (1) link 属于 HTML 标签，而import 是 CSS 提供的; (2) 页面被加载的时，link 会同时被加载，而import 引用的 CSS 会 等到页面被加载完再加载; (3) import 只在 IE5 以上才能识别，而 link 是 HTML 标签，无兼容 问题; (4) link 方式的样式的权重 高于import 的权重. 六、position 的
9、absolute 与 fixed 共同点与不同点 A：共同点： 1.改变行内元素的呈现方式，display 被置为 block； 2.让元素脱离普通流，不占据空间； 3.默认会覆盖到非定位元素上 B 不同点： absolute 的”根元素“是可以设置的，而 fixed 的”根元素“固定为 浏览器窗口。 当你滚动网页，fixed 元素与浏览器窗口之间的距离是不变的。 七、介绍一下CSS的盒子模型？ 参考答案 1）盒模型： 内容(content)、填充(padding)、边界(margin)、 边框(border) 2）有两种， IE 盒子模型、标准 W3C 盒子模型；IE的content部分包含
10、了 border 和 pading;3） 八、CSS 选择符有哪些？哪些属性可以继承？优先级算法如何计算？ CSS3新 增伪类有那些？ 参考答案 CSS 选择符： 1.id选择器(# myid) 2.类选择器(.myclassname) 3.标签选择器(div, h1, p) 4.相邻选择器(h1 + p) 5.子选择器(ul li) 6.后代选择器(li a) 7.通配符选择器( * ) 8.属性选择器(arel = “external“) 9.伪类选择器(a: hover, li:nth-child) 可继承的样式：1.font-size 2.font-family 3.color 4.t
11、ext-indent 不可继承的样式： 1.border 2.padding 3.margin 4.width 5.height 优先级算法： 1.优先级就近原则，同权重情况下样式定义最近者为准; 2.载入样式以最后载入的定位为准; 3.!important id class tag 4.important 比 内联优先级高，但内联比 id 要高 CSS3新增伪类举例： p:first-of-type 选择属于其父元素的首个 元素的每个 元素。 p:last-of-type 选择属于其父元素的最后 元素的每个 元素。 p:only-of-type 选择属于其父元素唯一的 元素的每个 元素。 p
12、:only-child 选择属于其父元素的唯一子元素的每个 元素。 p:nth-child(2) 选择属于其父元素的第二个子元素的每个 元素。 :enabled :disabled 控制表单控件的禁用状态。 :checked 单选框或复选框被选中。 九、列出display的值，说明他们的作用。position的值， relative和 absolute分别是相对于谁进行定位的？ 参考答案 display 的值的作用： 1.block 象块类型元素一样显示。 2.inline 缺省值。象行内元素类型一样显示。 3.inline-block 象行内元素一样显示，但其内容象块类型元素一样显示。 4.
13、list-item 象块类型元素一样显示，并添加样式列表标记。 position 的值的定位区别： 1.absolute 生成绝对定位的元素，相对于 static 定位以外的第一个祖先元素 进行定位。 2.fixed 生成绝对定位的元素，相对于浏览器窗口进行定位（老IE不支持）。 3.relative 生成相对定位的元素，相对于其在普通流中的位置进行定位。 4.static 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right z-index 声明）。 5.inherit 规定从父元素继承 position 属性的值。十、CSS3有哪些新特性？ 参考答
14、案 1. CSS3实现圆角（border-radius），阴影（box-shadow）， 2. 对文字加特效（text-shadow、），线性渐变（gradient），旋转 （transform） 3. transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);/ 旋转,缩放,定位,倾斜 4. 增加了更多的CSS选择器 多背景 rgba 5. 在CSS3中唯一引入的伪元素是 :selection. 6. 媒体查询，多栏布局 7. border-image 十一、为什么要初始化CSS样式。 参考答案
15、 因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对 CSS初始化往往会出现浏览器之间的页面显示差异。 当然，初始化样式会对SEO有一定的影响，但鱼和熊掌不可兼得，但力求影响 最小的情况下初始化。 *最简单的初始化方法就是（不建议）： padding: 0; margin: 0; 淘宝的样式初始化： body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td margin
16、:0; padding:0; body, button, input, select, textarea font:12px/1.5tahoma, arial, 5b8b4f53; h1, h2, h3, h4, h5, h6 font-size:100%; address, cite, dfn, em, var font-style:normal; code, kbd, pre, samp font-family:couriernew, courier, monospace; small font-size:12px; ul, ol list-style:none; a text-decoration:none; a:hover text-decoration:underline; sup vertical-align:text-top; sub vertical-align
