前端笔试题

前端笔试题

1. 前端和计算机相关知识

1. 你能描述一下渐进增强和优雅降级之间的不同吗

2. 浏览器兼容问题

3. 如何对网站的文件和资源进行优化?

4. 怎么学习前端?怎么接触前端新知识?

5. 关于前后端分离

6. 关于浏览器内核(渲染引擎)

7. 浏览器加载文件顺序以及repaint/reflow

8. 为什么使用多个域名来存储网络资源会更有效？

9. 进程和线程的区别

10. 前端开发的优化问题

11. Flash，Ajax各自的优缺点，使用中如何取舍？

2. CSS

1. CSS3

2. css居中的方式

3. 请写一个简单的幻灯效果页面

4. 什么是无样式内容闪烁?如何避免?

5. display:none和visibility:hidden的区别

6. 解释浮动和工作原理

7. 清除浮动

8. 解释CSS Sprits,以及你要如何使用?

9. 你最喜欢的图片替换方法是什么?你将如何使用?

10. 讨论CSS hacks, 条件引用或其他

11. 如何为有功能限制的浏览器提供网页

12. 在书写高效CSS时会有哪些问题需要考虑?

13. 如何优化网页的打印样式?

14. 描述下你曾经使用过的CSS 预处理的优缺点

15. 如果设计中使用了非标准的字体, 你将如何实现?

16.

17.

解释下浏览器是如何判断元素是否匹配某个 CSS 选择器？

解释一下你对盒模型的理解，以及如何在 CSS 中告诉浏览器使用不同的盒模型来渲染你的布局。

18.

19.

20.

伪类的用法：

描述下"reset"css文件的作用和使用它的好处

请解释一下 * { box-sizing: border-box; } 的作用, 并且说明使用它有什么好处？

21. block, inline和inline-block的区别

22.

23.

css动画和js动画的优缺点

你用过媒体查询，或针对移动端的布局/CSS 吗？

24. 有哪些隐藏内容的方法(同时还要保证屏幕阅读器可用)

25. CSS选择器级别

26. alt和title的区别

27. 知道bfc吗?

28. 行内元素，块级元素，空元素各有哪些？

3. html

1. h5的改进:

2. 什么是语义化的html?

3. 从前端角度出发谈谈做好seo应该注意什么?

4. 文档类型(DOCTYPE)

5. 使用XHTML的局限有哪些?

6. 如果网页内容需要多语言,要怎么做?

7. data-*属性的作用

8. 如果把 HTML5 看作做一个开放平台，那它的构建模块有哪些？

9. 请描述一下 cookies，sessionStorage 和 localStorage 的区别？

10.

11.

12.

浏览器本地存储与服务器端存储之间的区别

sessionStorage和页面js数据对象的区别

canvas和svg的区别?

13. href和src的区别

4. js

1. ajax, 跨域, jsonp

2. apply和call的用法和区别:

3. bind函数的兼容性

4. 解释下事件代理

5. 解释下js中this是怎么工作的?

6. 继承

7. AMD vs. CommonJS？

8. 什么是哈希表?

9. 什么是闭包? 闭包有什么作用?

10.

11.

12.

13.

伪数组:

undefined和null的区别, 还有undeclared:

事件冒泡机制:

解释下为什么接下来这段代码不是 IIFE(立即调用的函数表达式)：function foo(){ }();?

14.

15.

别。

16.

17.

18.

19.

20.

21.

22.

23.

24.

什么是use strict? 其好处坏处分别是什么?

浏览器端的js包括哪几个部分?

DOM包括哪些对象?

js有哪些基本类型?

基本类型与引用类型有什么区别?

关于js的垃圾收集例程

ES5中, 除了函数,什么能够产生作用域?

js有几种函数调用方式?

描述事件模型?IE的事件模型是怎样的？事件代理是什么？事件代"attribute" 和 "property" 的区别是什么？

请指出 document load 和 document ready 两个事件的区理中怎么定位实际事件产生的目标？

25. js动画有哪些实现方法?

26.

27.

28.

29.

30.

31.

32.

33.

34.

35.

还有什么实现动画的方法?

面向对象有哪几个特点?

如何判断属性来自自身对象还是原型链?

ES6新特性

如何获取某个DOM节点，节点遍历方式

用LESS如何给某些属性加浏览器前缀？

js异步模式如何实现？

事件机制，如何绑定事件处理函数

图片预加载

如果在同一个元素上绑定了两个click事件, 一个在捕获阶段执行,

一个在冒泡阶段执行. 那么当触发click条件时, 会执行几个事件? 执行顺序是什么?

36.

37.

js中怎么实现块级作用域?

构造函数里定义function和使用的区别？

38. js实现对象的深克隆

5. jquery问题

6. 一些编程题

1. 匿名函数变量

2. this指向

3. 定时

4. 点击一个ul的五个li元素，分别弹出他们的序号，怎么做？

7. js算法题

1. js实现数组去重怎么实现?

2.

一、前端编程

1. 你能描述一下渐进增强和优雅降级之间的不同吗?

答:

•

定义:

•

优雅降级（graceful degradation): 一开始就构建站点的完整功能，然后针对浏览器测试和修复

•

渐进增强（progressive enhancement): 一开始只构建站点的最少特性，然后不断针对各浏览器追加功能。

•

•

都关注于同一网站在不同设备里不同浏览器下的表现程度

区别:

•

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

•

“渐进增强”观点则认为应关注于内容本身。请注意其中的差别：我甚至连“浏览器”三个字都没提。

•

理解:

•

"优雅降级"就是首先完整地实现整个网站,包括其中的功能和效果. 然后再为那些无法支持所有功能的浏览器增加候选方案, 使之在旧式浏览器上以某种形式降级体验却不至于完全失效.

•

"渐进增强"则是从浏览器支持的基本功能开始, 首先为所有设备准备好清晰且语义化的html及完整内容, 然后再以无侵入的方法向页面增加无害于基础浏览器的额外样式和功能. 当浏览器升级时, 它们会自动呈现并发挥作用.

参考自: 渐进增强、优雅降级 渐进增强和优雅降级

2. 浏览器兼容问题:

•

问题1 不同浏览器的标签默认的外补丁和内补丁不同.

•

即随便写几个标签, 在不加样式控制的情况下, 各自的margin和padding差异较大.

•

•

解决方法: CCS里: *{margin:0; padding:0}

问题2 块属性标签float后，又有横行的margin情况下，在IE6显示margin比设置的大

•

•

会使得ie6后面的一块被顶到下一行.

解决方案: 在float的标签样式中加入 display: inline; 将其转化为行内属性

•

问题3 设置较小高度标签（一般小于10px），在IE6，IE7，遨游中高度超出自己设置高度

•

•

IE6、7和遨游里这个标签的高度不受控制，超出自己设置的高度

解决方案: 给超出高度的标签设置overflow:hidden;或者设置行高line-height 小于你设置的高度

•

原因: ie8之前的浏览器都会给标签一个最小默认的行高的高度. 即使标签是空的,这个标签的高度还是会达到默认的行高.

•

问题4 行内属性标签，设置display:block后采用float布局，又有横行的margin的情况，IE6间距bug

•

解决: 在display:block;后面加入display:inline;display:table;

•

问题5 图片默认有间距

•

几个img标签放在一起的时候，有些浏览器会有默认的间距，加了问题一中提到的通配符也不起作用。

•

•

解决: 使用float属性为img布局

问题6 标签最低高度设置min-height不兼容

•

因为min-height本身就是一个不兼容的CSS属性，所以设置min-height时不能很好的被各个浏览器兼容

•

如果我们要设置一个标签的最小高度200px，需要进行的设置为：{min-height:200px; height:auto !important; height:200px;

overflow:visible;}

•

问题7 透明度的兼容CSS设置

•

使用hacker

•

•

IE6认识的hacker是下划线_和*

IE7,遨游认识的hacker是*

•

问题8 IE ol的序号全为1, 不递增

•

解决: li设置样式{display: list-item}

问题9

ie6,7不支持display:inline-block

•

•

解决方法: 设置inline并触法haslayout

display:inline-block; *display:inline; *zoom:1

参考自: 常见浏览器兼容性问题与解决方案

3. 如何对网站的文件和资源进行优化?

答:

•

文件合并（同上题“假若你有5个不同的 CSS 文件, 加载进页面的最好方式是？”）

•

减少调用其他页面、文件的数量。一般我们为了让页面生动活泼会大量使用background来加载背景图，而每个 background的图像都会产生1次HTTP请求，要改善这个状况，可以采用css的1个有用的background-position属

性来加载背景图，我们将需要频繁加载的多个图片合成为1个单独的图片，需要加载时可以采用：background:url(....) no-repeat x-offset y-offset;的形式加载即可将这部分图片加载的HTTP请求缩减为1个。

•

每个http请求都会产生一次从你的浏览器到服务器端网络往返过程，并且导致推迟到达服务器端和返回浏览器端的时间，我们称之为延迟。

•

文件最小化/文件压缩

•

即将需要传输的内容压缩后传输到客户端再解压，这样在网络上传输的 数据量就会大幅减小。通常在服务器上的Apache、Nginx可以直接开启这个设置，也可以从代码角度直接设置传输文件头，增加gzip的设置，也可以 从 负载均衡设备直接设置。不过需要留意的是，这个设置会略微增加服务器的负担。建议服务器性能不是很好的网站，要慎重考虑。

•

js和css文件在百度上搜一个压缩网站就能压缩，但是在实际开发的项目中，使用gulp、webpack等工具可以打包出合并压缩后的文件，小图片可以在打包时转换成base64方式引入，大图片可以被压缩，html文件也是可以被压缩的

•

使用 CDN 托管

•

CDN的全称是Content Delivery Network，即内容分发网络。其基本思路是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节，使内容传输的更快、更稳定。其目的是使用户可就近取得所需内容，解决 Internet网络拥挤的状况，提高用户访问网站的响应速度。

•

缓存的使用

•

Ajax调用都采用缓存调用方式，一般采用附加特征参数方式实现，注意其中的