黑马程序员技术交流社区
标题: 100IT 名企前端面试真题 [打印本页]
作者: 播妞 时间: 2017-9-21 17:37
标题: 100IT 名企前端面试真题
随着移动互联网的兴起，HTML5 技术发进一步发展， 拥有全栈能力的高级前端工程师，迅速成为每个 IT 企业不可或缺的岗位。 作为新兴的专业，正在展示他蓬勃发展的前景，一骑绝尘，成为市场的宠儿，成为企业争抢的香饽饽，随着HTML5 等 web 前端技术兴起，前端开发大潮已经袭来！
一、HTML 和 CSS
1、你做的页面在哪些流览器测试过？这些浏览器的内核分别是什么?
IE: trident 内核
Firefox：gecko 内核
Safari:webkit 内核
Opera:以前是 presto 内核，Opera 现已改用 Google Chrome 的 Blink 内核
Chrome:Blink(基于 webkit，Google 与 Opera Software 共同开发)
2、每个 HTML 文件里开头都有个很重要的东西，Doctype，知道这是干什么的吗？
<!DOCTYPE> 声明位于文档中的最前面的位置，处于 <html> 标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。（重点：告诉浏览器按照何种规范解析页面）
3、Quirks 模式是什么？它和 Standards 模式有什么区别
从 IE6 开始，引入了 Standards 模式，标准模式中，浏览器尝试给符合标准的文档在规范上的正确处理达到在指定浏览器中的程度。
在 IE6 之前 CSS 还不够成熟，所以 IE5 等之前的浏览器对 CSS 的支持很差， IE6 将对 CSS提供更好的支持，然而这时的问题就来了，因为有很多页面是基于旧的布局方式写的，而如果 IE6 支持 CSS 则将令这些页面显示不正常，如何在即保证不破坏现有页面，又提供新的
渲染机制呢？
在写程序时我们也会经常遇到这样的问题，如何保证原来的接口不变，又提供更强大的功能，尤其是新功能不兼容旧功能时。遇到这种问题时的一个常见做法是增加参数和分支，即当某个参数为真时，我们就使用新功能，而如果这个参数 不为真时，就使用旧功能，这样就能不破坏原有的程序，又提供新功能。IE6 也是类似这样做的，它将 DTD 当成了这个“参数”，因为以前的页面大家都不会去写 DTD，所以 IE6 就假定 如果写了 DTD，就意味着这个页面将采用对 CSS 支持更好的布局，而如果没有，则采用兼容之前的布局方式。这就是 Quirks模式（怪癖模式，诡异模式，怪异模式）。
总体会有布局、样式解析和脚本执行三个方面的区别。
盒模型：在 W3C 标准中，如果设置一个元素的宽度和高度，指的是元素内容的宽度和高度，而在 Quirks 模式下，IE 的宽度和高度还包含了 padding 和 border。
设置行内元素的高宽：在 Standards 模式下，给<span>等行内元素设置 wdith 和 height 都不会生效，而在 quirks 模式下，则会生效。
设置百分比的高度：在 standards 模式下，一个元素的高度是由其包含的内容来决定的，如果父元素没有设置百分比的高度，子元素设置一个百分比的高度是无效的用
margin:0 auto 设置水平居中：使用 margin:0 auto 在 standards 模式下可以使元素水平居中，但在 quirks 模式下却会失效。（还有很多，答出什么不重要，关键是看他答出的这些是不是自己经验遇到的，还是说都是看文章看的，甚至完全不知道。）
4、div+css 的布局较 table 布局有什么优点？
改版的时候更方便 只要改 css 文件。
页面加载速度更快、结构化清晰、页面显示简洁。
表现与结构相分离。
易于优化（seo）搜索引擎更友好，排名更容易靠前。
5、 img 的 alt 与 title 有何异同？ strong 与 em 的异同？
a:alt(alt text):为不能显示图像、窗体或 applets 的用户代理（UA），alt 属性用来指定替换文字。替换文字的语言由 lang 属性指定。(在 IE 浏览器下会在没有 title 时把 alt
当成 tool tip 显示)
title(tool tip):该属性为设置该属性的元素提供建议性的信息。
strong:粗体强调标签，强调，表示内容的重要性
em:斜体强调标签，更强烈强调，表示内容的强调点
6、你能描述一下渐进增强和优雅降级之间的不同吗?
渐进增强 progressive enhancement：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。优雅降级 graceful degradation：一开始就构建完整的功能，然后再针对低版本浏览器
进行兼容。
区别：优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带。
file:///C:\Users\ADMINI~1\AppData\Local\Temp\ksohtml\wps979F.tmp.pngfile:///C:\Users\ADMINI~1\AppData\Local\Temp\ksohtml\wps97B0.tmp.pngfile:///C:\Users\ADMINI~1\AppData\Local\Temp\ksohtml\wps97B1.tmp.png
“优雅降级”观点
“优雅降级”观点认为应该针对那些最高级、最完善的浏览器来设计网站。而将那些被认为“过时”或有功能缺失的浏览器下的测试工作安排在开发周期的最后阶段，并把测试对象限定为主流浏览器（如 IE、Mozilla 等）的前一个版本。
在这种设计范例下，旧版的浏览器被认为仅能提供“简陋却无妨 (poor, but passable)” 的浏览体验。你可以做一些小的调整来适应某个特定的浏览器。但由于它们并非我们所关注的焦点，因此除了修复较大的错误之外，其它的差异将被直接忽略。
“渐进增强”观点
“渐进增强”观点则认为应关注于内容本身。
内容是我们建立网站的诱因。有的网站展示它，有的则收集它，有的寻求，有的操作，还有的网站甚至会包含以上的种种，但相同点是它们全都涉及到内容。这使得“渐进增强”成为一种更为合理的设计范例。这也是它立即被 Yahoo! 所采纳并用以构建其“分级式浏览器支持 (Graded Browser Support)”策略的原因所在。
那么问题来了。现在产品经理看到 IE6,7,8 网页效果相对高版本现代浏览器少了很多圆角，
阴影（CSS3），要求兼容（使用图片背景，放弃 CSS3），你会如何说服他？
7、为什么利用多个域名来存储网站资源会更有效？
CDN 缓存更方便
突破浏览器并发限制
节约 cookie 带宽
节约主域名的连接数，优化页面响应速度
防止不必要的安全问题
8、请谈一下你对网页标准和标准制定机构重要性的理解。
网页标准和标准制定机构都是为了能让 web 发展的更‘健康’，开发者遵循统一的标准，降低开发难度，开发成本，SEO 也会更好做，也不会因为滥用代码导致各种 BUG、安全问题，最终提高网站易用性。
9、请描述一下 cookies，sessionStorage 和 localStorage 的区别？
sessionStorage 用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此 sessionStorage 不是一种持久
file:///C:\Users\ADMINI~1\AppData\Local\Temp\ksohtml\wps97C4.tmp.png的本地存储，仅仅是会话级别的存储。而 localStorage 用于持久化的本地存储，除非主
动删除数据，否则数据是永远不会过期的。
web storage 和 cookie 的区别
Web Storage 的概念和 cookie 相似，区别是它是为了更大容量存储设计的。Cookie 的大小是受限的，并且每次你请求一个新的页面的时候 Cookie 都会被发送过去，这样无形中浪费
了带宽，另外 cookie 还需要指定作用域，不可以跨域调用。
除此之外，Web Storage 拥有 setItem,getItem,removeItem,clear 等方法，不像 cookie需要前端开发者自己封装 setCookie，getCookie。但是 Cookie 也是不可以或缺的：Cookie的作用是与服务器进行交互，作为 HTTP 规范的一部分而存在 ，而 Web Storage 仅仅是为了在本地“存储”数据而生。
10、简述一下 src 与 href 的区别。
src 用于替换当前元素，href 用于在当前文档和引用资源之间确立联系。
src 是 source 的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求 src 资源时会将其指向的资源下载并应用到文档内，例如 js 脚本，img 图片和 frame 等元素。
<script src =”js.js”></script>
当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js 脚本放在底部而不是头部。
href 是 Hypertext Reference 的缩写，指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，如果我们在文档中添加
<link href=”common.css” rel=”stylesheet”/>
那么浏览器会识别该文档为 css 文件，就会并行下载资源并且不会停止对当前文档的处理。
这也是为什么建议使用 link 方式来加载 css，而不是使用@import 方式。
作者: 乌龟 时间: 2017-9-22 20:53
楼主好人
作者: lpz1002 时间: 2017-9-23 15:08
好人一生平安
作者: hh448175416 时间: 2017-9-24 02:31
来瞅瞅喂！
作者: xqlee120 时间: 2017-9-24 11:42
好资料，值得收藏
作者: dxq469088739 时间: 2017-9-24 13:01
下载下来看一看
作者: p91919 时间: 2017-9-24 16:23
这个才是我想要的啊
作者: 空城灬 时间: 2017-9-24 16:24
求资源 求资源 求资源
作者: 打卡时间 时间: 2017-9-24 22:44
好人一生平安
作者: 林天的洛洛 时间: 2017-9-25 10:37
下载文件
作者: 林天的洛洛 时间: 2017-9-25 10:42
十分感谢！
作者: 游走于高山之间 时间: 2017-9-26 09:10
xiexie
作者: 王者風範 时间: 2017-9-27 08:35
我要学习
作者: withqlt 时间: 2017-9-27 09:27
sdfsdfsdfsdddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd
作者: 繁华落尽的凄凉 时间: 2017-9-27 15:47
来瞅瞅喂！
作者: syuangel 时间: 2017-9-27 18:58
好东西，正在寻找
作者: hcyin 时间: 2017-9-28 22:42
感谢分享 楼主真是好人
作者: 小懒123 时间: 2017-9-29 00:39
谢谢啦，楼主好人
作者: 高钱荣 时间: 2017-9-29 11:53
谢谢黑马提供的面试题，下来多看看
作者: longskyer 时间: 2017-9-29 16:59
资料资料资料资料资料
作者: luckily525 时间: 2017-9-30 11:57
了解下前端及面试题
作者: asdfasdf-1 时间: 2017-9-30 12:54
好东西，收藏收藏啦，哈哈
作者: xgwhsgws 时间: 2017-9-30 21:32
很有用，值得学习，感谢楼主分享
作者: hellodr 时间: 2017-10-1 12:26
不错，希望有帮助
作者: 沐阳而生 时间: 2017-10-3 01:10
来来来，留个爪子
作者: 毕加非 时间: 2017-10-5 21:34
国庆快乐中秋快乐~
作者: ccsaint73 时间: 2017-10-6 08:08
谢谢分享
作者: hpu145 时间: 2017-10-6 18:19
66666666666666666
作者: 枝间 时间: 2017-10-6 20:22
谢谢分享！！！55
作者: 枝间 时间: 2017-10-6 20:23
谢谢分享，谢谢了！！！
作者: hpu145 时间: 2017-10-8 11:42
6666666666666
作者: Ruin 时间: 2017-10-9 00:03
100IT 名企前端面试真题
作者: 夜貓1994 时间: 2017-10-9 18:06
7777777788
作者: 幸福璐forever 时间: 2017-10-9 21:13
非常需要！！
作者: 巷里 时间: 2017-10-10 09:47
初级黑马
作者: 慵懒的孙铭泽 时间: 2017-10-10 10:21
感谢，下来看看
作者: 啊喵酱啊 时间: 2017-10-10 15:45
谢谢
作者: abner159753 时间: 2017-10-10 20:41
不错，看看
作者: 我要学前端 时间: 2017-10-11 12:45
好定西，先收藏
作者: 哇哦 时间: 2017-10-11 14:26
谢谢小姐姐
作者: cwjb000 时间: 2017-10-11 16:51
看一看，保佑我找到工作
作者: SkaterTree 时间: 2017-10-12 08:48
thank you very much!
作者: 水中狼 时间: 2017-10-14 17:00
谢谢分享！
作者: wqewqe 时间: 2017-10-15 15:08
好东西呀，面试必备呀呀呀呀
作者: 新新凯 时间: 2017-10-15 15:17
好喜欢呀
作者: 半路码农 时间: 2017-10-17 00:45
非常有用
作者: HDD2360597352 时间: 2017-10-17 19:48
6666666666666666666
作者: 马润雪 时间: 2017-10-17 20:38
求求求资源
作者: 摩羯编写人生 时间: 2017-10-18 11:29
好人一生平胸！！！
作者: 赵路飞 时间: 2017-10-18 19:23
赞。。。。
作者: 闹够了没有 时间: 2017-10-19 07:46
非常好，很有用，下载好好学习
作者: happy32123 时间: 2017-10-19 10:30
给力的面试题
作者: 13806831603 时间: 2017-10-19 14:06
非常的棒
作者: 823351061 时间: 2017-10-19 17:36
lllllllllllllllll
作者: chensq77 时间: 2017-10-20 09:01
DDDDDDDDDDDDDDD
作者: 我心永恒y520 时间: 2017-10-20 13:51
是我想要的资料,非常感谢
作者: 大侠啊 时间: 2017-10-21 15:18
66666666666666666
作者: 海东你好 时间: 2017-10-22 12:19
好人一生平安
作者: 海东你好 时间: 2017-10-22 12:20
好人一生平安，已经回复啦，为啥还不能下载啊
作者: Haohong 时间: 2017-10-22 20:02
谢谢！ 好好学习
作者: 不败娜美 时间: 2017-10-24 10:09
6666666666666666
作者: heimababa 时间: 2017-10-24 10:14
大神顶顶顶
作者: 晓Vi_0 时间: 2017-10-25 19:54
作者: ╂足ヤ笨小孩 时间: 2017-10-26 00:45
哇哇哇，资源真多！！！
作者: 梦龙龙 时间: 2017-10-26 01:02
好人一生平安
作者: 噬魂勇者 时间: 2017-10-27 19:18
谢谢分享
作者: cuu 时间: 2017-10-28 21:49
哎呦，不错呦哈哈哈哈哈哈哈
作者: 墨月苍羽 时间: 2017-10-28 23:19
666666666666
作者: xueyu 时间: 2017-10-29 20:14
谢谢
作者: 1161304910 时间: 2017-10-29 22:49
.................................
作者: taozi96 时间: 2017-10-31 11:35
谢谢分享
作者: yyboy 时间: 2017-10-31 13:58
6666666666666666666
作者: artcool 时间: 2017-11-3 17:54
发过火非官方吧
作者: Miss.Q 时间: 2017-11-3 19:57
大爱传智，太喜欢了
作者: Jack小白 时间: 2017-11-9 10:11
看看看看
作者: 王大可 时间: 2017-11-9 10:16
作者: 功夫熊猫IT 时间: 2017-11-11 10:27
谢谢分享!
作者: kzzier 时间: 2017-11-12 23:49
66666666666666666666
作者: 南栀 时间: 2017-11-13 01:11
6666666666666666666
作者: as913480698 时间: 2017-11-14 23:04
谢谢楼主
作者: zhulei123 时间: 2017-11-14 23:41
fsadfsadfdsfa
作者: 后来的我们丶 时间: 2017-11-15 21:30
66666666666666
作者: shaliwers 时间: 2017-11-15 23:05
加油加油加油加油加油
作者: learning2017 时间: 2017-11-16 13:39
想赶紧找到工作
作者: sssshy 时间: 2017-11-16 14:48
asdasdasdasdasda
作者: XxHh 时间: 2017-11-16 15:09
很有用，学一下。顺便补补姿势
作者: taozi96 时间: 2017-11-22 22:35
谢谢分享。。
作者: tangyin 时间: 2017-11-22 23:22
学习！学习
作者: L1150143576 时间: 2017-11-23 10:50
MK，好好学习 ，
作者: wenwen1993 时间: 2017-11-28 12:58
这个需要要看看看的哈哈哈哈
作者: yanghao666 时间: 2017-11-29 09:23
舒舒服服到宿舍
作者: Miot 时间: 2017-11-29 17:14
6666666666666666666666
作者: 小哈哈3 时间: 2017-11-29 22:52
感谢分享
作者: zhangteng 时间: 2017-12-3 12:17
作者: zhangteng 时间: 2017-12-3 12:48
作者: zhongyou109 时间: 2017-12-3 16:39
不错，感谢分享
作者: bulade 时间: 2017-12-4 01:07
美女很善良
作者: JMmamaLi 时间: 2017-12-5 14:25
的顶顶顶顶顶的顶顶顶顶顶多多多多多多多多多多多多多多
作者: 羊屎蛋 时间: 2017-12-6 13:59
rfsdffffffffff
作者: qqlcx5 时间: 2017-12-7 13:58
微信上有
| 欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) |
黑马程序员IT技术论坛 X3.2 |