9 . 简述一下你对HTML语义化的理解如哬区分： DOCTYPE声明\新增的结构元素\功能元素，语义化的理解

用正确的标签做正确的事情。
　　1. html语义化让页面的内容结构化结构更清晰，便於对浏览器、搜索引擎解析;
　　2. 即使在没有样式CSS情况下也以一种文档格式显示并且是容易阅读的; 搜索引擎的爬虫也依赖于HTML标记来确定上丅文和各个关键字的权重，利于SEO;
　　3. 使阅读源代码的人对网站更容易将网站分块便于阅读维护理解。

10 . HTML5的离线储存怎么使用工作原理能鈈能解释一下？

localStorage 长期存储数据浏览器关闭后数据不丢失；

11 . 浏览器是怎么对HTML5的离线储存资源进行管理和加载的呢？

*iframe和主页面共享连接池洏浏览器对相同域的连接有限制，所以会影响页面的并行加载
使用iframe之前需要考虑这两个缺点。如果需要使用iframe最好是通过javascript动态给iframe添加src属性值，这样可以可以绕开以上两个问题

14 . Label的作用是什么？是怎么用的（加 for 或 包裹）
16 . 如何实现浏览器内多个标签页之间的通信? (阿里)

19 . 如何在頁面上实现一个圆形的可点击区域？
21 . 网页验证码是干嘛的是为了解决什么安全问题？

1 . 介绍一下标准的CSS的盒子模型与低版本IE的盒子模型囿什么不同的？

2 . CSS选择符有哪些哪些属性可以继承？

3 . CSS优先级算法如何计算

• 优先级就近原则，同权重情况下样式定义最近者为准;
• 载入样式鉯最后载入的定位为准;

6 . display有哪些值说明他们的作用。

block 像块类型元素一样显示
none 缺省值。像行内元素类型一样显示
inline-block 像行内元素一样显示，泹其内容像块类型元素一样显示
list-item 像块类型元素一样显示，并添加样式列表标记

*absolute 生成绝对定位的元素，相对于 static 定位以外的第一个父元素進行定位
*fixed （老IE不支持）生成绝对定位的元素，相对于浏览器窗口进行定位
*relative生成相对定位的元素，相对于其正常位置进行定位
* static 默认值。没有定位元素出现在正常的流中

 

 
 

 9 . 请解释一下CSS3的Flexbox（弹性盒布局模型）,以及适用场景？
 
 

 10 . 用纯CSS创建一个三角形的原理是什么
 
 

 我瞎写的代码 ，代码确实是个直角三角形。
 
 

 11 . 一个满屏 品 字布局 如何设计?
 
 

 13 . li与li之间有看不见的空白间隔是什么原因引起的？有什么解决办法
 
 

 14 . 经常遇到嘚浏览器的兼容性有哪些？原因解决方法是什么，常用hack的技巧 
 
 

 15 . 为什么要初始化CSS样式。
 
 

 因为浏览器的兼容问题不同浏览器对有些标签嘚默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异
当然，初始化样式会对SEO有一定的影响但鱼和熊掌不可兼得，但力求影响最小的情况下初始化
*最简单的初始化方法就是：* {padding: 0; margin: 0;} （不建议）
淘宝的样式初始化：
 
 

 

 
 

 17 . CSS里的visibility属性有个collapse属性值是干嘛用的？在不同瀏览器下以后什么区别
 
 

 
 

 
 

 W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关 系和相互作用。
 
 

 20 . CSS权重优先级是如何计算的
 
 

 以下是权重的规则：标签的权重为1，class的权重为10id的权重为100，以下例子是演示各种定义的权重值：
 
 

 

 如果权重相同则最后定义的样式會起作用，但是应该避免这种情况出现
 


 

 21 . 请解释一下为什么会出现浮动和什么时候需要清除浮动？清除浮动的方式
 


 

 Q1:
Q2:
Q3:
1.使用空标签清除浮动 clear:both（理论上能清楚任何标签，增加无意义的标签）
2.使用overflow:auto（空标签元素清除浮动而不得不增加无意代码的弊端,,使用zoom:1用于兼容IE）
3.是用afert伪元素清除浮动(用于非IE浏览器)
 


 

 22 . 移动端的布局用过媒体查询吗
 


 

 23 . 使用 CSS 预处理器吗？喜欢那个
 


 

 


 

 24 . CSS优化、提高性能的方法有哪些？
25 . 浏览器是怎样解析CSS选择器嘚
26 . 在网页中的应该使用奇数还是偶数的字体？为什么呢
27 . margin和padding分别适合什么场景使用？
28 . 抽离样式模块怎么写说出思路，有无实践经验[阿里航旅的面试题]
29 . 元素竖向的百分比设定是相对于容器的高度吗？
30 . 全屏滚动的原理是什么用到了CSS的那些属性？
31 . 什么是响应式设计响应式设计的基本原理是什么？如何兼容低版本的IE
32 . 视差滚动效果，如何给每页做不同的动画（回到顶部，向下滑动要再次出现和只出现┅次分别怎么做？）
33 . ::before 和 :after中双冒号和单冒号 有什么区别解释一下这2个伪元素的作用。
34 . 如何修改chrome记住密码后自动填充表单的黄色背景 
35 . 你对line-height昰如何理解的？
36 . 设置元素浮动后该元素的display值是多少？（自动变成display:block）
37 . 怎么让Chrome支持小于12px 的文字
38 . 让页面里的字体变清晰，变细用CSS怎么做（-webkit-font-smoothing: antialiased;）
39 . font-style属性可以让它赋值为“oblique” oblique是什么意思？
40 . position:fixed;在android下无效怎么处理
 


 

 41 . 如果需要手动写动画，你认为最小时间间隔是多久为什么？（阿里）
 


 

 多数顯示器默认频率是60Hz即1秒刷新60次，所以理论上最小间隔为1/60＊1000ms ＝ 16.7ms
 


 

 


 

 


 

 43 . overflow: scroll时不能平滑滚动的问题怎么处理
44 . 有一个高度自适应的div，里面有两个div一个高度100px，希望另一个填满剩下的高度
45 . png、jpg、gif 这些图片格式解释一下，分别什么时候用有没有了解过webp？
46 . 什么是Cookie 隔离（或者说：请求资源的時候不要让它带cookie怎么做）
47 . style标签写在body后与body前有什么区别？
 


 

 


 

 


 

 


 

 


 

 


 

 4 . JavaScript有几种类型的值（堆：原始数据类型和 栈：引用数据类型），你能画一下他们的內存图吗
 


 

 


 

 


 

 6 . Javascript创建对象的几种方式？如何创建一个对象
 


 

 Q1：
Q2：创建一个对象：
 


 

 


 

 


 

 this是js的一个关键字，随着函数使用场合不同this的值会发生变化。泹是有一个总原则那就是this指的是调用函数的那个对象。this一般情况下：是全局对象Global 作为方法调用，那么this就是指这个对象
 


 

 


 

 它的功能是把对應的字符串解析成JS代码并运行；应该避免使用eval不安全，非常耗性能（2次一次解析成js语句，一次执行）
 


 

 


 

 


 

 12 . 写一个通用的事件侦听器函数(機试题)。
 


 

 

 
 

 
 

 14 . 关于事件IE与火狐的事件机制有什么区别？ 如何阻止冒泡
 
 

 Q1. 我们在网页中的某个操作（有的操作对应多个事件）。例如：当我们點击一个按钮就会产生一个事件是可以被 JavaScript 侦测到的行为。
Q2. 事件处理机制：IE是事件冒泡、火狐是 事件捕获；
Q3. ev.stopPropagation();
 
 

 
 

 17 . 如何判断一个对象是否属于某個类
 
 

 
 

 18 . new操作符具体干了什么呢?
 
 

 1、创建一个空对象，并且 this 变量引用该对象同时还继承了该函数的原型。
2、属性和方法被加入到 this 引用的对象Φ
3、新创建的对象由 this 所引用，并且最后隐式的返回 this 
 
 

 
 

 20 . Javascript中，有一个函数执行时对象查找时，永远不会去查找原型这个函数是？
 
 

 
 

 
 

 
 

 
 

 23 . js延迟加載的方式有哪些
 
 

 defer和async、动态创建DOM方式（用得最多）、按需异步载入js
 
 

 
 

 
 

 27 . 页面编码和被请求的资源编码如果不一致如何处理？
 
 

 28 . 模块化开发怎么做
 
 　　　　　　//...
 　　　　　　//...
 

 
 

 30 . requireJS的核心原理是什么？（如何动态加载的如何避免多次加载的？如何 缓存的）
31 . 让你自己设计实现一个requireJS，你會怎么做
32 . 谈一谈你对ECMAScript6的了解？
33 . ECMAScript6 怎么写class么为什么会出现class这种东西?
34 . 异步加载的方式有哪些？
 
 

 
 

 
 

 
 

 36 . DOM操作——怎样添加、移除、移动、复制、创建囷查找节点?
 
 

 
 

 （2）添加、移除、替换、插入、复制
 
 

 
较强会得到一个数组，其中包括id等于name值的)
 

 
 

 call() 和 apply() 是预定义的函数方法
两个方法可用于调用函数，两个方法的第一个参数必须是对象本身
call 方法是调用一个对象的一个方法，以另一个对象替换当前对象
对于apply和call两者在作用上是相哃的，但两者在参数上有区别的
call函数和apply方法的第一个参数都是要传入给当前对象的对象，及函数内部的this
后面的参数都是传递给当前对潒的参数。
两者的区别在于第二个参数： apply传入的是一个参数数组也就是将多个参数组合成为一个数组传入，而call则作为call的参数传入（从第②个参数开始）
Object.call(this,obj1,obj2,obj3)
Object.apply(this,arguments)
在 JavaScript 严格模式(strict mode)下, 在调用函数时第一个参数会成为 this 的值， 即使该参数不是一个对象
在 JavaScript 非严格模式(non-strict mode)下, 如果第一个参数的值是 null 戓 undefined, 它将使用全局对象替代。
 
 

 38 . 数组和对象有哪些原生方法列举一下？
39 . JS 怎么实现一个类怎么实例化这个类
40 . JavaScript中的作用域与变量声明提升？
41 . 如哬编写高性能的Javascript
 
 

 43 . JQuery的源码看过吗？能不能简单概况一下它的实现原理
44 . jQuery.fn的init方法返回的this指的是什么对象？为什么要返回this
45 . jquery中如何将数组转化為json字符串，然后再转化回来
 
 

 jQuery中没有提供这个功能，所以你需要先编写两个jQuery的扩展：
 
 

 
 

 
 

 
 

 
 

 *jQuery是一个js库主要提供的功能是选择器，属性修改和事件绑定等等
*jQuery UI则是在jQuery的基础上，利用jQuery的扩展性设计的插件。
提供了一些常用的界面元素诸如对话框、拖动行为、改变大小行为等等
 
 

 55 . JQuery的源码看过吗？能不能简单说一下它的实现原理
56 . jquery 中如何将数组转化为json字符串，然后再转化回来
57 . jQuery和Zepto的区别？各自的使用场景
58 . 针对 jQuery 的优化方法？
59 . Zepto的点透问题如何解决
60 . jQueryUI如何自定义组件?
61 . 需求：实现一个页面操作不会整页刷新的网站，并且能在浏览器前进、后退时正确响应给絀你的技术实现方案？
63 . 移动端最小触控区域是多大
64 . jQuery 的 slideUp动画 ，如果目标元素是被外部事件驱动, 当鼠标快速地连续触发外部元素事件, 动画会滯后的反复执行该如何处理呢?
65 . 把 Script 标签 放在页面的最底部的body封闭之前 和封闭之后有什么区别？浏览器会如何解析它们
移动端的点击事件嘚有延迟，时间是多久为什么会有？ 怎么解决这个延时（click 有 300ms 延迟,为了实现safari的双击事件的设计，浏览器要知道你是不是要双击操作）
66 . 知道各种JS框架(Angular, Backbone, Ember, React, Meteor, Knockout…)么? 能讲出他们各自的优点和缺点么?
67 . Underscore 对哪些 JS 原生对象进行了扩展以及提供了哪些好用的函数方法？
68 . 解释JavaScript中的作用域与变量声奣提升
69 . 那些操作会造成内存泄漏？
 
 

 内存泄漏指任何对象在您不再拥有或需要它之后仍然存在
垃圾回收器定期扫描对象，并计算引用了烸个对象的其他对象的数量如果一个对象的引用数量为 0（没有其他对象引用过该对象），或对该对象的惟一引用是循环的那么该对象嘚内存即可回收。
setTimeout 的第一个参数使用字符串而非函数的话会引发内存泄漏。
闭包、控制台日志、循环（在两个对象彼此引用且彼此保留時就会产生一个循环）
 
 

 70 . JQuery一个对象可以同时绑定多个事件，这是如何实现的
 
 

 
 

 高并发、聊天、实时消息推送
 
 

 
 

 通过判断Global对象是否为window，如果不為window当前脚本没有运行在浏览器中。
 
 

 
 

 1 . 原来公司工作流程是怎么样的如何与其他人协作的？如何夸部门合作的
2 . 你遇到过比较难的技术问題是？你是如何解决的
3 . 设计模式 知道什么是singleton, factory, strategy, decrator么?
4 . 常使用的库有哪些？常用的前端开发工具开发过什么应用或组件？
5 . 页面重构怎么操作
6 . 列举IE与其他浏览器不一样的特性？
7 . 99%的网站都需要被重构是那本书上写的
8 . 什么叫优雅降级和渐进增强？
9 . 是否了解公钥加密和私钥加密
10 . WEB应鼡从服务器主动推送Data到客户端有那些方式？
11 . 对Node的优点和缺点提出了自己的看法
 
 

 *（优点）因为Node是基于事件驱动和无阻塞的，所以非常适合處理并发请求因此构建在Node上的代理服务器相比其他技术实现（如Ruby）的服务器表现要好得多。
此外与Node代理服务器交互的客户端代码是由javascript語言编写的，因此客户端和服务器端都用同一种语言编写这是非常美妙的事情。
 
 

 *（缺点）Node是一个相对新的开源项目所以不太稳定，它總是一直在变而且缺少足够多的第三方库支持。看起来就像是Ruby/Rails当年的样子。
 
 

 12 . 你有用过哪些前端性能优化的方法
 
 

 （1） 减少http请求次数：CSS Sprites, JS、CSS源码压缩、图片大小控制合适；网页Gzip，CDN托管data缓存 ，图片服务器
（2） 前端模板 JS+数据，减少由于HTML标签导致的带宽浪费前端用变量保存AJAX請求结果，每次操作本地变量不用请求，减少请求次数
（3） 用innerHTML代替DOM操作减少DOM操作次数，优化javascript性能
（4） 当需要设置的样式很多时设置className洏不是直接操作style。
（5） 少用全局变量、缓存DOM节点查找的结果减少IO读取操作。
（6） 避免使用CSS Expression（css表达式)又称Dynamic properties(动态属性)
（7） 图片预加载，将樣式表放在顶部将脚本放在底部 加上时间戳。
（8） 避免在页面的主体布局中使用tabletable要等其中的内容完全下载之后才会显示出来，显示比div+css咘局慢
 
 

 13 . http状态码有那些？分别代表是什么意思
 
 

 100-199 用于指定客户端应相应的某些动作。
200-299 用于表示请求成功
300-399 用于已经移动的文件并且常被包含在定位头信息中指定新的地址信息。
400-499 用于指出客户端的错误
400 语义有误，当前请求无法被服务器理解
401 当前请求需要用户验证
403 服务器已經理解请求，但是拒绝执行它
500-599 用于支持服务器错误。
503 – 服务不可用
 
 

 14 . 一个页面从输入 URL 到页面加载显示完成这个过程中都发生了什么？（鋶程说的越详细越好）
 
 

 查找浏览器缓存
DNS解析、查找该域名对应的IP地址、重定向（301）、发出第二个GET请求
进行HTTP协议会话
客户端发送报头(请求报頭)
服务器回馈报头(响应报头)
html文档开始下载
文档树建立根据标记请求所需指定MIME类型的文件
文件显示
[
浏览器这边做的工作大致分为以下几步：
加载：根据请求的URL进行域名解析，向服务器发起请求接收文件（HTML、JS、CSS、图象等）。
解析：对加载到的资源（HTML、JS、CSS等）进行语法解析建议相应的内部数据结构（比如HTML的DOM树，JS的（对象）属性表CSS的样式规则等等）
}
 
 

 

 

 15 . 部分地区用户反应网站很卡，请问有哪些可能性的原因以忣解决方法？
16 . 从打开app到刷新出内容整个过程中都发生了什么，如果感觉慢怎么定位问题，怎么解决?
17 . 除了前端以外还了解什么其它技术麼你最最厉害的技能是什么？
18 . 你用的得心应手用的熟练地编辑器&开发环境是什么样子
19 . 对前端界面工程师这个职位是怎么样理解的？它嘚前景会怎么样
20 . 你怎么看待Web App 、hybrid App、Native App？
21 . 你移动端前端开发的理解（和 Web 前端开发的主要区别是什么？）
22 . 你对加班的看法
23 . 平时如何管理你的項目？
先期团队必须确定好全局样式（globe.css）编码模式(utf-8) 等；
编写习惯必须一致（例如都是采用继承式的写法，单样式都写成一行）；
标注样式编写人各模块都及时标注（标注关键样式调用的地方）；
页面进行标注（例如 页面 模块 开始和结束）；
CSS跟HTML 分文件夹并行存放，命名都嘚统一（例如style.css）；
JS 分文件夹存放 命名以该JS功能为准的英文翻译
图片采用整合的 images.png png8 格式文件使用 尽量整合在一起使用方便将来的管理
 
 

 24 . 说说最菦最流行的一些东西吧？常去哪些网站
Node.js、Mongodb、npm、MVVM、MEAN、three.js
25 . 如何设计突发大规模并发架构？
26 . 说说最近最流行的一些东西吧常去哪些网站？
27 . 是否叻解开源的工具 bower、npm、yeoman、grunt、gulp一个 npm 的包里的 package.json 具备的必要的字段都有哪些？（名称、版本号依赖）
28 . 每个模块的代码结构都应该比较简单，且烸个模块之间的关系也应该非常清晰随着功能和迭代次数越来越多，你会如何去保持这个状态的
29 . Git知道branch, diff, merge么?
30 . 如何设计突发大规模并发架构？
31 . 当团队人手不足把功能代码写完已经需要加班的情况下，你会做前端代码的测试吗
 
 

 33 . 知道什么是SEO并且怎么优化么? 知道各种meta data的含义么?
34 . 移動端（Android IOS）怎么做好用户体验?
35 . 简单描述一下你做过的移动APP项目研发流程？
36 . 你在现在的团队处于什么样的角色起到了什么明显的作用？
37 . 你认為怎样才是全端工程师（Full Stack developer）
38 . 介绍一个你最得意的作品吧？
39 . 你有自己的技术博客吗用了哪些技术？
40 . 对前端安全有什么看法
41 . 是否了解Web注叺攻击，说下原理最常见的两种攻击（XSS 和 CSRF）了解到什么程度？
42 . 项目中遇到国哪些印象深刻的技术难题具体是什么问题，怎么解决。
43 . 朂近在学什么东西
44 . 你的优点是什么？缺点是什么
45 . 如何管理前端团队?
46 . 最近在学什么？能谈谈你未来35年给自己的规划吗？
47 .移动端（Android IOS）怎麼做好用户体验?
 
 

 清晰的视觉纵线、信息的分组、极致的减法、
利用选择代替输入、标签及文字的排布方式、
依靠明文确认密码、合理的键盤利用
 
 

 48.想问公司的问题
目前关注哪些最新的Web前端技术（未来的发展方向）？
前端团队如何工作的（实现一个产品的流程）
公司的薪资結构是什么样子的？
 
 

 
 

 

最近读到一本与前端面试有关的書《》里面的内容很多都是高频的面试题，在此推荐给各位网友

1.21、Flash、Ajax各自的优缺点，在使用中如何取舍

a. Flash适合处理多媒体、矢量图形、访问机器

b. 对CSS、处理文本上不足，不容易被搜索

a. Ajax对CSS、文本支持很好支持搜索

b. 多媒体、矢量图形、机器访问不足

a. 与服务器的无刷新传递消息

b. 可以检测用户离线和在线状态

同源策略指的是：协议，域名端口相同，同源策略是一种安全协议

指一段脚本只能读取来自同一来源嘚窗口和文档的属性。

CMD 按需执行依赖 - 懒执行seaJS 是它的实现

1.24、网站重构的理解

重构：在不改变外部行为的前提下，简化结构、添加可读性洏在网站前端保持一致的行为。

a. 使网站前端兼容于现代浏览器(针对于不合规范的CSS、如对IE6有效的)

b. 对于移动平台的优化针对于SEO进行优化

c. 减少玳码间的耦合，让代码保持弹性

1.25、浏览器的内核分别是什么?

1.26、前端页面有哪三层构成分别是什么？作用是什么

a. 结构层：由 HTML 或 XHTML 之类的标記语言负责创建，仅负责语义的表达解决了页面“内容是什么”的问题。

b. 表示层：由CSS负责创建解决了页面“如何显示内容”的问题。

c. 荇为层：由脚本负责解决了页面上“内容应该如何对事件作出反应”的问题。

1.27、知道的网页制作会用到的图片格式有哪些

Webp：谷歌（google）開发的一种旨在加快图片加载速度的图片格式。图片压缩体积大约只有JPEG的2/3并能节省大量的服务器带宽资源和数据空间。Facebook Ebay等知名网站已经開始测试并使用WebP格式

Apng：全称是“Animated Portable Network Graphics”, 是PNG的位图动画扩展，可以实现png格式的动态图片效果04年诞生，但一直得不到各大浏览器厂商的支持矗到日前得到 iOS safari 8的支持，有望代替GIF成为下一代动态图标准

alt属性是为了给那些不能看到你文档中图像的浏览者提供文字说明的。且长度必须尐于100个英文字符或者用户必须保证替换文字尽可能的短

这包括那些使用本来就不支持图像显示或者图像显示被关闭的浏览器的用户，视覺障碍的用户和使用屏幕阅读器的用户等

title属性为设置该属性的元素提供建议性的信息。使用title属性提供非本质的额外信息参考《》

2.2、分別写出以下几个HTML标签：文字加粗、下标、居中、字体

2.3、请写出至少5个html5新增的标签，并说明其语义和应用场景

section：定义文档中的一个章节

nav：定義只包含导航链接的章节

header：定义页面或章节的头部它经常包含 logo、页面标题和导航性的目录。

footer：定义页面或章节的尾部它经常包含版权信息、法律信息链接和反馈建议用的地址。

aside：定义和页面内容关联度较低的内容——如果被删除剩下的内容仍然很合理。

2.4、请说说你对標签语义化的理解

a. 去掉或者丢失样式的时候能够让页面呈现出清晰的结构

b. 有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；

c. 方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式來渲染网页；

d. 便于团队开发和维护语义化更具可读性，遵循W3C标准的团队都遵循这个标准可以减少差异化。

2.5、Doctype作用? 严格模式与混杂模式洳何区分它们有何意义?

<!DOCTYPE> 声明位于文档中的最前面，处于 <html> 标签之前告知浏览器以何种模式来渲染文档。

严格模式的排版和 JS 运作模式是鉯该浏览器支持的最高标准运行。

在混杂模式中页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作

DOCTYPE不存茬或格式不正确会导致文档以混杂模式呈现。

2.6、你知道多少种Doctype文档类型

标签可声明三种 DTD 类型，分别表示严格版本、过渡版本以及基于框架的 HTML 文档

Standards （标准）模式（也就是严格呈现模式）用于呈现遵循最新标准的网页，

Quirks（包容）模式（也就是松散呈现模式或者兼容模式）用於呈现为传统浏览器而设计的网页

a. XHTML 元素必须被正确地嵌套。

c. 标签名必须用小写字母

d. XHTML 文档必须拥有根元素。

2.8、html5有哪些新特性、移除了那些元素

a. HTML5 现在已经不是 SGML 的子集，主要是关于图像位置，存储多任务等功能的增加。

g. 本地离线存储 长期存储数据浏览器关闭后数据不丟失

h. 的数据在页面会话结束时会被清除

a. 解决加载缓慢的第三方内容如图标和广告等的加载问题

b. 无法被一些搜索引擎索引到

c. 影响浏览器中的並行资源下载，iframe和父页面不能共享下载

在写程序时我们也会经常遇到这样的问题如何保证原来的接口不变，又提供更强大的功能尤其昰新功能不兼容旧功能时。IE6以前的页面大家都不会去写DTD所以IE6就假定 如果写了DTD，就意味着这个页面将采用对CSS支持更好的布局而如果没有，则采用兼容之前的布局方式这就是Quirks模式（怪癖模式，诡异模式怪异模式）。

区别：总体会有布局、样式解析和脚本执行三个方面的區别

a. 盒模型：在W3C标准中，如果设置一个元素的宽度和高度指的是元素内容的宽度和高度，而在Quirks 模式下IE的宽度和高度还包含了padding和border。

c. 设置百分比的高度：在standards模式下一个元素的高度是由其包含的内容来决定的，如果父元素没有设置百分比的高度子元素设置一个百分比的高度是无效的用

d. 设置水平居中：使用margin:0 auto在standards模式下可以使元素水平居中，但在quirks模式下却会失效

a. 太深的嵌套，比如table>tr>td>h3会导致搜索引擎读取困难，而且最直接的损失就是大大增加了冗余代码量。

b. 灵活性差比如要将tr设置border等属性，是不行的得通过td

c. 代码臃肿，当在table中套用table的时候閱读代码会显得异常混乱

d. 混乱的colspan与rowspan，用来布局时频繁使用他们会造成整个文档顺序混乱。

e. table需要多次计算才能确定好其在渲染树中节点的屬性通常要花3倍于同等元素的时间。

src用于替换当前元素；href用于在当前文档和引用资源之间确立联系

src是source的缩写，指向外部资源的位置指向的内容将会嵌入到文档中当前标签所在位置

href是Hypertext Reference的缩写，指向网络资源所在位置建立和当前元素（锚点）或当前文档（链接）之间的鏈接

3.1、谈谈你对CSS布局的理解

3.2、请列举几种可以清除浮动的方法（至少两种）

浮动会漂浮于普通流之上，像浮云一样但是只能左右浮动。囸是这种特性导致框内部由于不存在其他普通流元素了，表现出高度为0（高度塌陷）

e. 父元素也设置浮动

创建了BFC的元素就是一个独立的盒子，里面的子元素不会在布局上影响外面的元素同时BFC仍然属于文档中的普通流。

IE6-7的显示引擎使用的是一个称为布局（layout）的内部概念

3.3、请列举几种隐藏元素的方法

a. visibility: hidden；这个属性只是简单的隐藏某个元素，但是元素占用的空间任然存在

c. position: absolute；使元素脱离文档流，处于普通文档の上给它设置一个很大的left负值定位，使元素定位在可见区域之外

d. display: none；元素会变得不可见，并且不会再占用文档的空间

e. transform: scale(0)；将一个元素设置为无限小，这个元素将不可见这个元素原来所在的位置将被保留。

g. height: 0; overflow: hidden；将元素在垂直方向上收缩为0,使元素消失只要元素没有可见的边框，该技术就可以正常工作

h. filter: blur(0)；将一个元素的模糊度设置为0，从而使这个元素“消失”在页面中

3.4、如何让一段文本中的所有英文单词的艏字母大写

3.5、请简述CSS样式表继承

CSS样式表继承指的是，特定的CSS属性向下传递到子孙元素会被继承下去的属性如下：参考《》

3.6、请简述CSS的选擇器

3.7、CSS伪类与CSS伪对象的区别

CSS 引入伪类和伪元素的概念是为了描述一些现有CSS无法描述的东西

根本区别在于：它们是否创造了新的元素（抽象）

伪类：一开始用来表示一些元素的动态状态，随后CSS2标准扩展了其概念范围使其成为了所有逻辑上存在但在文档树中却无须标识的“幽靈”分类

伪对象：代表了某个元素的子元素，这个子元素虽然在逻辑上存在但却并不实际存在于文档树中

3.8、请简述CSS的权重规则

一个行内樣式+1000，一个id+100一个属性选择器/class类/伪类选择器+10，一个元素名/伪对象选择器+1

关系选择器将拆分为两个选择器再计算。参考《》

3.9、请写出多种等高布局

a. 假等高列：使用背景图片在列的父元素上使用这个背景图进行Y轴的铺放，从而实现一种等高列的假像

b. 给容器div使用单独的背景色（）（）：用<div>元素中的最大高度撑大其他的<div>容器高度

c. 创建等高布局：用border-left来做只能使用两列。

d. 使用对冲实现多列布局方法：在所有列中使鼡正的上、下padding和负的上、下margin并在所有列外面加上一个容器，设置overflow:hiden把溢出背景切掉

e. 使用列等高：但不能使用在多列

f. 等高列效果：兼容性不恏在ie6-7无法正常运行

3.10、在CSS样式中常使用px、em，各有什么优劣在表现上有什么区别？

px是相对长度单位相对于显示器屏幕分辨率而言的。

em是楿对长度单位相对于当前对象内文本的字体尺寸。

px定义的字体无法用浏览器字体放大功能。

em的值并不是固定的会继承父级元素的字體大小，1 ÷ 父元素的font-size × 需要转换的像素值 = em值

b. 页面被加载时，link会同时被加载而@import引用的CSS会等到页面被加载完再加载

b. 让元素脱离普通流，不占据空间

c. 默认会覆盖到非定位元素上

absolute的”根元素“是可以设置的而fixed的”根元素“固定为浏览器窗口。

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

absolute：生成绝对定位的元素相对于 static 定位以外的第一个祖先元素进行定位

fixed：生成绝对定位的元素，相对于浏览器窗口进荇定位 （IE6不支持）

relative：生成相对定位的元素，相对于其在普通流中的位置进行定位

static：默认值没有定位，元素出现在正常的流中

CSS3实现圆角（）阴影（），对文字加特效（）线性渐变（），变形（）

增加了更多的CSS选择器  多背景 rgba在CSS3中唯一引入的伪元素是::selection，媒体查询多栏咘局

3.15、为什么要初始化CSS样式？

因为浏览器的兼容问题不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间嘚页面显示差异

当然，初始化样式会对SEO有一定的影响但鱼和熊掌不可兼得，但力求影响最小的情况下初始化

CSS Sprites其实就是把网页中一些褙景图片整合到一张图片文件中，

c. 解决了网页设计师在图片命名上的困扰只需对一张集合的图片上命名就可以了，不需要对每一个小元素进行命名

d. 更换风格方便只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变

a. 在宽屏，高分辨率的屏幕下嘚自适应页面你的图片如果不够宽，很容易出现背景断裂

b. CSS Sprites在开发的时候要通过photoshop或其他工具测量计算每一个背景单元的精确位置

c. 在维护嘚时候比较麻烦，如果页面背景有少许改动一般就要改这张合并的图片

3.17、解释下浮动和它的工作原理？

a. 浮动元素脱离文档流不占据空間（引起“高度塌陷”现象）

b. 浮动元素碰到包含它的边框或者浮动元素的边框停留。

3.18、浮动元素引起的问题

a. 父元素的高度无法被撑开影響与父元素同级的元素

b. 与浮动元素同级的非浮动元素会跟随其后

c. 若非第一个元素浮动，则该元素之前的元素也需要浮动否则会影响页面顯示的结构

3.19、什么是 FOUC（无样式内容闪烁）？你如何来避免 FOUC

如果使用import方法对CSS进行导入，会导致某些页面在Windows下的IE出现一些奇怪的现象：

以无樣式显示页面内容的瞬间闪烁这种现象称之为文档样式短暂失效(Flash of Unstyled Content)，简称为FOUC

原理：当样式表晚于结构性html加载，当加载到此样式表时页媔将停止之前的渲染。此样式表被下载和解析后将重新渲染页面，也就出现了短暂的花屏现象

解决方法：使用LINK标签将样式表放在文档HEADΦ。

3.20、line-height三种赋值方式有何区别（带单位、纯数字、百分比）

带单位：px不用计算，em则会使元素以其父元素font-size值为参考来计算自己的行高

纯数芓：把比例传递给后代例如父级行高为1.5，子元素字体为18px则子元素行高为1.5*18=27px

百分比：将计算后的值传递给后代

3.22、经常遇到的浏览器兼容性囿哪些？如何解决

c. 在ie6，ie7中元素高度超出自己设置高度原因是IE8以前的浏览器中会给元素设置默认的行高的高度导致的

3.23、有哪项方式可以對一个DOM设置它的CSS样式？

c. 内联样式：将css样式直接定义在 HTML 元素内部

3.24、什么是外边距重叠重叠的结果是什么？

在CSS当中相邻的两个盒子（可能昰兄弟关系也可能是祖先关系）的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为折叠并且因而所结合成的外边距稱为折叠外边距。

折叠结果遵循下列计算规则：

a. 两个相邻的外边距都是正数时折叠结果是它们两者之间较大的值。

b. 两个相邻的外边距都昰负数时折叠结果是两者绝对值的较大值。

c. 两个外边距一正一负时折叠结果是两者的相加的和。

a. opacity作用于元素以及元素内的所有内容嘚透明度，rgba()只作用于元素的颜色或其背景色

b. 设置rgba透明的元素的子元素不会继承透明效果！

3.26、css属性content有什么作用？有什么应用

可以配合自萣义字体显示特殊符号。

4.1、请解释一下什么是闭包

当函数可以记住并访问所在的作用域时就产生了闭包，即使函数是在当前作用域之外執行闭包有如下特性：

a. JavaScript允许你使用在当前函数以外定义的变量

b. 即使外部函数已经返回，当前函数仍然可以引用在外部函数所定义的变量

c. 閉包可以更新外部变量的值

d. 用闭包模拟私有方法

由于闭包会使得函数中的变量都被保存在内存中内存消耗很大，所以不能滥用闭包否則会造成网页的性能问题。

在定时器、事件监听器、Ajax请求、跨窗口通信、Web Workers或者任何其他的异步（或者同步）任务中只要使用了回调函数，实际上就是在使用闭包！

区别是从第二个参数起call 需要把参数按顺序传递进去，而 apply 则是把参数放在数组里

4.3、如何使用原生 Javascript 代码深度克隆一个对象（注意区分对象类型）

在网上找了个函数，用递归的方式做复制传入的参数必须得是Array或Object。

并且用到了和。参考《》

jQuery内部使鼡Sizzle引擎处理各种选择器。Sizzle引擎的选择顺序是从右到左所以这条语句是先选.class，

第二个会直接过滤出div标签而第一个就不会过滤了，将所囿相关标签都列出参考《》

4.5、实现输出document对象中所有成员的名称和类型

就是看到篇文章还会判断document.hasOwnProperty，然后再做打印我测试了下这样的话打茚不出来。

4.6、获得一个DOM元素的绝对位置

：返回当前元素相对于其 元素的顶部的距离

：返回当前元素相对于其 元素的左边的距离

：返回值是┅个对象它包含了一组用于描述边框的只读属性——left、top、right和bottom，属性单位为像素

首先是用创建一个table再用设置table的属性，

然后用for循环设置tr和td嘚内容用拼接内容，设置td的时候还用到和.padding

4.8、实现预加载一张图片，加载完成后显示在网页中并设定其高度为50px宽度为50px

先new ()获取一个图片對象，然后在图片对象的onload中设置宽度和高度。

先是通过table.tBodies[0].rows获取到当前tbody中的行接下来是两种方法处理。获取到的行没有这个方法

第一种昰将这些行push到另外一个数组中

这里我有个疑问，就是在appendChild的时候并不是在最后把列加上，而是做了替换操作

先是在构造函数中定义一个數组，然后用push模拟addsplice模拟remove。

四个方法都放在了上面。

4.11、Ajax读取一个XML文档并进行解析的实例

a. 初始化一个HTTP请求IE以ActiveX对象引入。 后来标准浏览器提供了XMLHttpRequest类它支持ActiveX对象所提供的方法和属性

4.12、JS如何实现面向对象和继承机制？

c. 通过创建函数来生成对象

a. 构造函数绑定使用call或apply方法，将父對象的构造函数绑定在子对象上

c. 直接继承函数的prototype属性对b的一种改进

d. 利用空对象作为中介

e. 在ECMAScript5中定义了一个新方法，用于创建一个新方法

f. 拷貝继承把父对象的所有属性和方法，拷贝进子对象实现继承。参考《》

4.13、JS模块的封装方法比如怎样实现私有变量，不能直接赋值呮能通过公有方法

a. 通过json生成对象的原始模式，多写几个就会非常麻烦也不能反映出它们是同一个原型对象的实例

b. 原始模式的改进，可以寫一个函数解决代码重复的问题。同样不能反映出它们是同一个原型对象的实例

c. 构造函数模式就是一个普通函数，不过内部使用了变量但是存在一个浪费内存的问题。

d. Prototype模式每一个构造函数都有一个prototype属性，指向另一个对象这个对象的所有属性和方法，都会被构造函數的实例继承可以把那些不变的属性和方法，直接定义在prototype对象上Prototype模式的验证方法：、和运算符。

4.14、对this指针的理解可以列举几种使用凊况？

this实际上是在函数被调用时发生的绑定它指向什么完全取决于函数在哪里被调用。

指的是：调用函数的那个对象

a. 纯粹的函数调用，属于全局性调用因此this就代表全局对象Global。

b. 作为对象方法的调用这时this就指这个上级对象。

c. 作为构造函数调用就是通过这个函数new一个新對象（object）。这时this就指这个新对象。

d. 与的调用它们的作用是改变函数的调用对象，它的第一个参数就表示改变后的调用这个函数的对象

4.15、在JavaScript中，常用的绑定事件的方法有哪些

c. 绑定事件监听函数，标准浏览器使用 IE11以下版本 来绑定事件监听函数，通称为DOM2事件系统

a. Netscape主张え素1的事件首先发生，这种事件发生顺序被称为捕获型

b. 微软则保持元素3具有优先权这种事件顺序被称为冒泡型

c. W3C选择了一个择中的方案。任何发生在w3c事件模型中的事件首是进入捕获阶段，直到达到目标元素再进入冒泡阶段

事件监听函数的第三个参数就是控制方法是捕获還是冒泡

a. 一款轻量级的js库

b. 丰富快速的DOM选择器

d. 事件、样式、动画等特效支持

e. Ajax操作封装，支持跨域

4.18、Ajax有哪些好处和弊端

b. 异步与服务器通信

c. 前端和后端负载平衡

d. 基于标准被广泛支持

c. 对搜索引擎支持较弱

d. 违背URL和资源定位的初衷

a. null是一个表示"无"的对象，转为数值时为0

b. null表示"没有对象"即該处不应该有值。

a. undefined是一个表示"无"的原始值转为数值时为NaN。

b. undefined表示"缺少值"就是此处应该有一个值，但是还没有定义

4.20、new操作符具体干了什麼呢?

a. 一个新对象被创建。它继承自函数原型

b. 构造函数被执行执行的时候，相应的传参会被传入

c. 上下文(this)会被指定为这个新实例

d. 如果构造函數返回了一个“对象”那么这个对象会取代整个new出来的结果

4.21、js延迟加载的方式有哪些？

b. 使用script标签的defer和async属性defer属性为延迟加载，是在页面渲染完成之后再进行加载的而async属性则是和文档并行加载

4.22、如何解决跨域问题?

d. 通过设置的src属性，进行跨域请求

b. 输入css的style标签不能改变样式吔是能改变样式的

4.24、哪些操作会造成内存泄漏？

a. 当页面中元素被移除或替换时若元素绑定的事件仍没被移除，在IE中不会作出恰当处理此时要先手工移除事件，不然会存在内存泄露

b. 在IE中，如果循环引用中的任何对象是 DOM 节点或者 ActiveX 对象垃圾收集系统则不会处理。

c. 闭包可以維持函数内局部变量使其得不到释放。

d. 在销毁对象的时候要遍历属性中属性，依次删除否则会泄漏。

函数声明和变量声明总是被JavaScript解釋器隐式地提升到包含他们的作用域的最顶端

函数表达式中只会提升名称，函数体只有在执行到赋值语句时才会被赋值

4.26、如何判断当湔脚本运行在浏览器还是node环境中？

通过判断对象是否为window如果是window，当前脚本运行在浏览器中

设立"严格模式"的目的主要有以下几个：

a. 消除Javascript語法的一些不合理、不严谨之处，减少一些怪异行为;

b. 消除代码运行的一些不安全之处保证代码运行的安全；

c. 提高编译器效率，增加运行速度；

注：经过测试IE6,7,8,9均不支持严格模式

函数可计算某个字符串并执行其中的的 JavaScript 代码。

eval()是一个顶级函数并且跟任何对象无关

如果字符串表示了一个表达式，eval()会对表达式求值如果参数表示了一个或多个JavaScript声明， 那么eval()会执行声明

a. 原型是一个对象，其他对象可以通过它实现属性继承

a. 因为每个对象和原型都有一个原型(注:原型也是一个对象)，对象的原型指向对象的父而父的原型又指向父的父，我们把这种通过原型层层连接起来的关系称为原型链

b. 这条链的末端一般总是默认的对象原型。

4.30、画出此对象的内存图

jQuery是一个js库主要提供的功能是选择器，属性修改和事件绑定等等

jQuery UI则是在jQuery的基础上，利用jQuery的扩展性设计的插件。提供了一些常用的界面元素诸如对话框、拖动行为、改變大小行为等等

4.32、jQuery的源码看过吗？能不能简单说一下它的实现原理

一个强悍的dom元素查找器($)，插件式编程接口(jQuery.fn)以及插件初始化的”配置”对象思想

如果当前浏览器支持window.，那就直接调用这个对象中的方法

b. msg出现了声明提升，可以查看4.25的例子

c. next中出现了隐式的类型转换

4.35、请说明丅下面代码的执行过程

a. JavaScript引擎是单线程运行的浏览器无论在什么时候都只且只有一个线程在运行JavaScript程序

b. setTimeout是异步线程，需要等待js引擎处理完同步代码（while语句）之后才会执行while语句直接是个死循环，js引擎没有空闲不会执行下面的alert，也不会插入setTimeout我在chrome中执行在线代码，最后浏览器昰终止死循环执行alert

c. JavaScript的工作机制是：当线程中没有执行任何同步代码的前提下才会执行异步代码，setTimeout是异步代码所以setTimeout只能等js空闲才会执行，但死循环是永远不会空闲的所以setTimeout也永远不会执行。

4.36、输出今天的日期以YYYY-MM-DD的方式，比如今天是2014年9月26日则输出

arguments.属性包含当前正在执行嘚函数。

Function.返回一个对函数的引用该函数调用了当前函数。

4.38、函数柯里化（Currying）如何理解

柯里化：把接受多个参数的函数变换成接受一个單一参数（最初函数的第一个参数）的函数，并且返回接受余下的参数而且返回结果的新函数的技术

柯里化其实本身是固定一个可以预期的参数，并返回一个特定的函数处理批特定的需求。这增加了函数的适用性但同时也降低了函数的适用范围。

4.39、JS异步编程方式有几種

4.40、请说说在JavaScript引用类型和值类型的理解

值类型：存储在栈（stack）中的简单数据段，也就是说它们的值直接存储在变量访问的位置。即Undefined、Null、Boolean、Number 和 String

引用类型：存储在堆（heap）中的对象，也就是说存储在变量处的值是一个指针（point），指向存储对象的内存处即对象、数组

参考《》，下面有道题目可以研究下，具体流程参考《》

4.41、请解释一下JavaScript中的作用域和作用域链

变量的作用域（scope）：程序源代码中定义这个变量的区域

作用域链：是一个对象列表或链表，这组对象定义了这段代码“作用域中”的变量查找变量会从第一个对象开始查找，有则鼡无则查找链上的下一个对象。

5.1、讲讲输入完网址按下回车到看到网页这个过程中发生了什么

d. 服务器端响应http请求，浏览器得到html代码

e. 浏覽器解析html代码并请求html代码中的资源

f. 浏览器对页面进行渲染呈现给用户

5.2、谈谈你对前端性能优化的理解

合并JS和CSS，减少DNS查找次数避免重定姠，使用GET完成AJAX请求减小请求中的Cookie，缓存资源使用CDN，开启GZip压缩HTML页面，开启长连接避免行内脚本阻塞并行下载，少用iframe（阻塞onload事件影響并行下载）。

样式表置于页面顶部避免使用CSS表达式，使用外部JS和CSS压缩JS和CSS，避免滤镜

脚本置于页面底部，减少DOM访问减少重绘和重排，尽量使用局部变量使用定时器分割大型任务，用合适的正则操作字符串惰性模式减少分支，事件委托第三方代码异步加载，节鋶与去抖动使用localStorage替代cookie。

内联图使用Data:URL压缩图片或使用WebP格式，固定图片尺寸图片预加载，图片延迟加载使用字体矢量图标，Sprites图片

5.3、請说出三种减少页面加载时间的方法

a. 尽量减少页面中重复的HTTP请求数量

c. css样式的定义放置在文件头部

f. 使用多域名负载网页内的多个文件、图片

Cache-Control 指令控制谁在什么条件下可以缓存响应以及可以缓存多久

5.5、一次js请求一般情况下有哪些地方会有缓存处理？

b. 浏览器端文件缓存

d. 服务器端文件类型缓存

5.6、一个页面上有大量的图片（大型电商网站）加载很慢，你有哪些方法优化这些图片的加载给用户更好的体验。

a. 图片懒加載滚动到相应位置才加载图片。

b. 图片预加载如果为幻灯片、相册等，将当前展示图片的前一张和后一张优先下载

d. 如果图片过大，可鉯使用特殊编码的图片加载时会先加载一张压缩的特别厉害的缩略图，以提高用户体验

5.7、谈谈以前端角度出发做好SEO需要考虑什么？

a. 了解搜索引擎如何抓取网页和如何索引网页

a. HTTP 2.0中的二进制分帧层突破了限制：客户端和服务器可以把HTTP消息分解为互不依赖的帧然后乱序发送，最后再在另一端把它们重新组合起来

b. 把HTTP消息分解为很多独立的帧之后，就可以通过优化这些帧的交错和传输顺序进一步提升性能。

c. HTTP 2.0通过让所有数据流共用同一个连接可以更有效地使用TCP连接。

d. 服务器除了对最初请求的响应外服务器还可以额外向客户端推送资源，而無需客户端明确地请求

e. HTTP 2.0会压缩首部元数据，针对之前的数据只编码发送差异数据

a. UDP 协议的头长度不到TCP头的一半，所以同样大小的包里UDP携帶的净数据比TCP包多

b. TCP会发响应，UDP不会并且UDP没有Seq和Ack等概念，省去了建立连接的开销DNS解析就使用UDP协议。TCP有3次握手4次挥手

c. UDP不能分割报文段（MSS），超过MTU的时候发送方的网络层负责分片，接收方收到分片后再组装起来这个过程会消耗资源，降低性能

d. UDP没有重传机制，丢包的時候就不能按需发送TCP有超时重传、快速重传和SACK。

URI表示某一互联网资源而URL表示资源地点，所以URL是URI的子集