口味网

前端面试笔试题总结

网站:口味网   来源:网络收集

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 等 一、谈谈 cookie 的弊端: 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 了一种存储可以持久化用户数据,叫做 uerData,从 IE5.0 就 开始支持。

每个数据最多 128K,每个域名下最多 1M。

这个持久化数 据放在缓存中,如果缓存没有清理,那么会一直存在。

优点:极高的扩展性和可用性 1.通过良好的编程,控制保存在 cookie 中的 session 对象的大小。

2.通过加密和安全传输技术(SSL),减少 cookie 被的可能性。

3.只在 cookie 中存放不敏感数据,即使被盗也不会有重大损失。

4.控制 cookie 的生命期,使之不会永远有效。

偷盗者很可能拿到一个 过期的 cookie。

缺点: 1.`Cookie`数量和长度的限制。

每个 domain 最多只能有 20 条 cookie, 每个 cookie 长度不能超过 4KB,否则会被截掉。

2. 安全性问题。

如果 cookie 被人拦截了,那人就可以取得所有的 session 信息。

即使加密也与事无补, 因为拦截者并不需要知道 cookie 的意义,他只要原样转发 cookie 就可以达到目的了。

3.有些状态不可能保存在客户端。

例如,为了防止重复提交表单,我 们需要在服务器端保存一个计数器。

如果我们把这个计数器保存在客 户端,那么它起不到任何作用。

二、浏览器本地存储: 在较高版本的浏览器中, js 了 sessionStorage 和 globalStorage。

在 HTML5 中了 localStorage 来取代 globalStorage。

html5 中的 Web Storage 包括了两种存储方式: sessionStorage 和 localStorage。

sessionStorage 用于本地存储一个会话(session)中的数据,这些数据 只有在同一个会话中的页面才能访问并且当会话结束后数据也随之 销毁。

因此 sessionStorage 不是一种持久化的本地存储,仅仅是会话 级别的存储。

而 localStorage 用于持久化的本地存储,除非主动删除数据,否则数 据是永远不会过期的。

三、web storage 和 cookie 的区别 Web Storage 的概念和 cookie 相似,区别是它是为了更大容量存储设 计的。

Cookie 的大小是受限的, 并且每次你请求一个新的页面的时候 Cookie 都会被发送过去,这样无形中浪费了带宽,另外 cookie 还需 要指定作用域,不可以跨域调用。

除此之外,Web Storage 拥有 setItem,getItem,removeItem,clear 等方法, 不像 cookie 需要前端开发者自己封装 setCookie,getCookie。

但是 Cookie 也是不可以或缺的: Cookie 的作用是与服务器进行交互, 作为 HTTP 规范的一部分而存在 , 而 Web Storage 仅仅是为了在本地 “存储”数据而生 浏览器的支持除了 IE7及以下不支持外,其他标准浏览器都完全支

持(ie 及 FF 需在 web 服务器里运行),值得一提的是 IE 总是办好事, 例如 IE7、 IE6 中的 UserData 其实就是 javascript 本地存储的解决方案。

通过简单的代码封装可以统一到所有的浏览器都支持 web storage。

localStorage 和 sessionStorage 都具有相同的操作方法,例如 setItem、 getItem 和 removeItem 等 四、display:none 和 visibility:hidden 的区别? display:none 隐藏对应的元素,在文档布局中不再给它分配空间,它 各边的元素会合拢,就当他从来不存在。

visibility:hidden 隐藏对应的元素,但是在文档布局中仍保留原来的 空间。

五、CSS 中 link 和@import 的区别是? (1) link 属于 HTML 标签,而@import 是 CSS 的; (2) 页面被加载的时,link 会同时被加载,而@import 引用的 CSS 会 等到页面被加载完再加载; (3) import 只在 IE5 以上才能识别,而 link 是 HTML 标签,无兼容问 题; (4) link 方式的样式的权重 高于@import 的权重. 六、position 的 absolute 与 fixed 共同点与不同点 A:共同点: 1.改变行内元素的呈现方式,display 被置为 block; 2.让元素脱离普通流,不占据空间; 3.默认会覆盖到非定位元素上 B 不同点: absolute 的”根元素“是可以设置的,而 fixed 的”根元素“固定为浏 览器窗口。

当你滚动网页,fixed 元素与浏览器窗口之间的距离是不变的。

七、介绍一下 CSS 的盒子模型? 参考答案 1)盒模型: 内容(content)、填充(padding)、边界(margin)、 边框(border) 2)有两种, IE 盒子模型、标准 W3C 盒子模型;IE 的 content 部分包含了 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.属性选择器(a[rel = "external"]) 9.伪类选择器(a: hover, li:nth-child) 可继承的样式:

1.font-size 2.font-family 3.color 4.text-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:only-child 选择属于其父元素的唯一子元素的每个

元素。

p:nth-child(2) 选择属于其父元素的第二个子元素的每个

元素。

:enabled :disabled 控制表单控件的禁用状态。

:checked 单选框或复选框被选中。

九、 列出 display 的值, 说明他们的作用。

position 的值, relative 和 absolute 分别是相对于谁进行定位的? 参考答案 display 的值的作用: 1.block 象块类型元素一样显示。

2.inline 缺省值。

象行内元素类型一样显示。

3.inline-block 象行内元素一样显示,但其内容象块类型元素一样显示。

4.list-item 象块类型元素一样显示,并添加样式列表标记。

position 的值的定位区别: 1.absolute 生成绝对定位的元素,相对于 static 定位以外的第一个祖先元素 进行定位。

2.fixed 生成绝对定位的元素,相对于浏览器窗口进行定位(老 IE 不支持)。

3.relative 生成相对定位的元素,相对于其在普通流中的位置进行定位。

4.static 默认值。

没有定位, 元素出现在正常的流中 (忽略 top, bottom, left, right z-index 声明)。

5.inherit 规定从父元素继承 position 属性的值。

十、CSS3 有哪些新特性? 参考答案 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 样式。

参考答案 因为浏览器的兼容问题,不同浏览器对有些标签的默认值是不同的,如果没对 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:0; padding:0; } body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; } 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:text-bottom; } legend { color:#000; } fieldset, img { border:0; } button, input, select, textarea { font-size:100%; } table { border-collapse:collapse; border-spacing:0; } 十二、对 BFC 规范的理解? 参考答案 BFC,块级格式化上下文,一个创建了新的 BFC 的盒子是独立布局的,盒子里面 的子元素的样式不会影响到外面的元素。

在同一个 BFC 中的两个毗邻的块级盒

相关内容
  • 前端笔试面试题目总结

    前端笔试面试题目总结

    前端笔试面试题目总结...

  • web前端笔试面试总结

    web前端笔试面试总结

    web前端笔试面试总结...

  • web前端优化知识总结+笔试+面试总结

    web前端优化知识总结+笔试+面试总结

    web前端优化知识总结+笔试+面试总结...

  • web前端笔试面试总结+js+css

    web前端笔试面试总结+js+css

    web前端笔试面试总结+js+css...

  • web+笔试+面试汇总+前端优化总结+js+css

    web+笔试+面试汇总+前端优化总结+js+css

    web+笔试+面试汇总+前端优化总结+js+css...

  • IC公司数字前端笔试面试知识点总结

    IC公司数字前端笔试面试知识点总结

    IC公司数字前端笔试面试知识点总结...

  • 2013-山东电力笔试面试题目总结-浙(新)大人总结

    2013-山东电力笔试面试题目总结-浙(新)大人总结

    2013-山东电力笔试面试题目总结-浙(新)大人总结...

  • 面试笔试题总结(java)

    面试笔试题总结(java)

    面试笔试题总结(java)...

  • Linux笔试面试知识点总结

    Linux笔试面试知识点总结

    Linux笔试面试知识点总结...

  • php面试总结的笔试题答案

    php面试总结的笔试题答案

    php面试总结的笔试题答案...

  • 网友在搜
    西湖大学明年成立 lazyload this 丸姬美丝美脚 psycho 全部歌词谐音 yumi kazama 核磁共振 xtc800与xtc820 大人会长白色糠疹吗 ナイアシン 什么意思 for循环remove garageband老版本 妹のひとりえっち 湖州 孟文囡 廖 并行打印机 showroom使用 暮光之城台词中英版 赵玉蓥 豆瓣 江南 英文版 硬盘光驱供电插头 4针 listview divider颜色 美能达500r 迁爱 方妍 续写 unix 系统 发行版 浮潜可以带隐形眼镜吗 漆黒のシャガ第二话 拉着妈妈的手简谱 科迈罗刷ecu evus被拒后咋办 ()的旅伴填空 什么的旅伴填空! 最强nbacdkey add the title here ipad air2背光更换视频 滑梯 室内 selenium 分页 惠普probook 430 G5 绯色系列朱迪 freeswitch nat 230和280的动力差多少 wcg比赛现场 鹿晗可爱动漫图片 newera中国 ios 申请定位权限 如何文字调教控制m

    All Right Reserved 口味网

    声明:本站内容源于网络,出于传递更多信息之目的,并不意味着赞同其观点或证实其描述。文章内容仅供参考,请咨询相关专业人士。

    如果无意之中侵犯了您的版权,或有意见、反馈或投诉等情况 网站地图 网站栏目