汇总资料整理 100 家 IT (阿里、百度、腾讯、)企面试题


面试题由长沙黑马程序员老师整理发送,若是有须要了解更多的学习资源或者面试题能够加QQ(2832281573)css


一、你作的页面在哪些流览器测试过?这些浏览器的内核分别是什么?html

 

IE: trident 内核前端

Firefox:gecko 内核程序员

Safari:webkit 内核web

Opera:之前是 presto 内核,Opera 现已改用 Google Chrome 的 Blink 内核面试

Chrome:Blink(基于 webkit,Google 与 Opera Software 共同开发)跨域

 

二、每一个 HTML 文件里开头都有个很重要的东西,Doctype,知道这是干什么的吗?

 

<!DOCTYPE> 声明位于文档中的最前面的位置,处于 <html> 标签以前。此标签可告知浏览器文档使用哪一种 HTML 或 XHTML 规范。(重点:告诉浏览器按照何种规范解析页面)浏览器

 

三、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 模式下却会失效。

 

还有不少,答出什么不重要,关键是看他答出的这些是否是本身经验遇到的,仍是说都是   看文章看的,甚至彻底不知道。)

 

四、div+css 的布局较 table 布局有什么优势?

 

改版的时候更方便 只要改 css 文件。

页面加载速度更快、结构化清晰、页面显示简洁。 表现与结构相分离。

易于优化(seo)搜索引擎更友好,排名更容易靠前。

 

五、 img 的 alt 与 title 有何异同? strong 与 em 的异同?

 

a:alt(alt text):为不能显示图像、窗体或 applets 的用户代理UA),alt 属性用来指定替换文字。替换文字的语言由 lang 属性指定。(在 IE 浏览器下会在没有 title 时把 alt 当成 tool tip 显示)

 

title(tool tip):该属性为设置该属性的元素提供建议性的信息。

 

strong:粗体强调标签,强调,表示内容的重要性em:斜体强调标签,更强烈强调,表示内容的强调点

六、你能描述一下渐进加强和优雅降级之间的不一样吗?

 

渐进加强 progressive enhancement:针对低版本浏览器进行构建页面,保证最基本的功能,而后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

优雅降级 graceful degradation:一开始就构建完整的功能,而后再针对低版本浏览器  进行兼容。

区别:优雅降级是从复杂的现状开始,并试图减小用户体验的供给,而渐进加强则是从一个   很是基础的,可以起做用的版本开始,并不断扩充,以适应将来环境的须要。降级(功能衰   减)意味着往回看;而渐进加强则意味着朝前看,同时保证其根基处于安全地带。


“优雅降级”观点                                                              “优雅降级”观点认为应该针对那些最高级、最完善的浏览器来设计网站。而将那些被认为   “过期”或有功能缺失的浏览器下的测试工做安排在开发周期的最后阶段,并把测试对象限   定为主流浏览器(如 IE、Mozilla 等)的前一个版本。

 

在这种设计范例下,旧版的浏览器被认为仅能提供“简陋却无

(poor, but passable)” 的浏览体验。你能够作一些小的调整来适应某个特定的浏览器。但因为它们并不是咱们所关注的焦点,所以除了修复较大的错误以外,其它的差别将被   直接忽略。

 

“渐进加强”观点

“渐进加强”观点则认为应关注于内容自己。

 

内容是咱们创建网站的诱因。有的网站展现它,有的则收集它,有的寻求,有的操做,还有   的网站甚至会包含以上的种种,但相同点是它们全都涉及到内容。这使得“渐进加强”成为   一种更为合理的设计范例。这也是它当即被 Yahoo! 所采纳并用以构建其“分级式浏览器支持 (Graded Browser Support)”策略的缘由所在。

 

那么问题来了。如今产品经理看到 IE6,7,8 网页效果相对高版本现代浏览器少了不少圆角, 阴影(CSS3),要求兼容(使用图片背景,放弃 CSS3),你会如何说服他?

 

七、为何利用多个域名来存储网站资源会更有效?

 

CDN 缓存更方便

突破浏览器并发限制节约 cookie 带宽

节约主域名的链接数,优化页面响应速度防止没必要要的安全问题

八、请谈一下你对网页标准和标准制定机构重要性的理解。

 

网页标准和标准制定机构都是为了能让 web 发展的更‘健康’,开发者遵循统一的标准,下降开发难度,开发成本,SEO 也会更好作,也不会由于滥用代码致使各类 BUG、安全问题, 最终提升网站易用性。

 

九、请描述一下 cookies,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 仅仅是为了在本地“存储”数据而生。

 

十、简述一下 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 方式。