前端面试题汇总笔试题

最新推荐文章于 2025-12-02 15:14:45 发布

原创

最新推荐文章于 2025-12-02 15:14:45 发布 · 5.1w 阅读

754 ·

CC 4.0 BY-SA版权

文章标签：

#前端面试题 #前端笔试题 #前端笔试题汇总 #前端面试题汇总 #前端常见面试题

前端面试题目

1. div和span的区别？

div是块级标签，span是行级标签

2. 在html中，position取值有哪几种，默认值是什么？

取值：static、relative、fixed、absolute

默认值：static

3. 前端页面由哪三层构成，分别是什么？作用是什么？

前端页面构成：结构层、表示层、行为层

结构层（structural layer）

由 HTML 或 XHTML之类的标记语言负责创建。标签，也就是那些出现在尖括号里的单词，对网页内容的语义含义做出了描述，但这些标签不包含任何关于如何显示有关内容的信息。例如，P标签表达了这样一种语义：“这是一个文本段。”

表示层（presentation layer）

由 CSS 负责创建。 CSS对“如何显示有关内容”的问题做出了回答。

行为层（behaviorlayer）

负责回答“内容应该如何对事件做出反应”这一问题。这是 Javascript 语言和 DOM主宰的领域。

4. 如何居中一个浮动元素？

方式1:设置容器的浮动方式为相对定位，然后确定容器的宽高比如宽500 高 300 的层，然后设置层的外边距。

<!DOCTYPEHTML>

<html>

<head>

<styletype="text/css">

div{

width: 500px;

height: 300px;

margin: -150px 0 0 -250px;

position: absolute;

left: 50%;

top: 50%;

background-color: yellow;

}

</style>

</head>

<body>

<div>

元素居中

</div>

</body>

</html>

方式2：需要position:absolute;绝对定位。而层的定位点，使用外补丁margin负值的方法。负值的大小为层自身宽度高度除以二。

<styletype="text/css">

<!--

div {

position:absolute;

top:50%;

left:50%;

margin:-150px 0 0 -200px;

width:400px;

height:300px;

border:1px solid #008800;

}

-->

</style>

<div>让层垂直居中于浏览器窗口</div>

5. 请简述HTML和XHTML最重要的4点不同？

不同：

                   XHTML要求正确嵌套
                   XHTML 所有元素必须关闭
                   XHTML 区分大小写
                   XHTML 属性值要用双引号
                   XHTML 用 id 属性代替 name 属性
                   XHTML 特殊字符的处理

6. 页面布局中常听说的“结构与表现”分离，“结构”是指？“表现”是指？

“结构”：HTML

“表现”：CSS

7. 怎么样从web前端方面优化性能？至少列举5点？

1) HTML部分

u 语义化HTML：好处在于可以使代码简洁清晰，支持不同设备，利于搜索引擎，便于团队开发；

u 减少DOM节点：加速页面渲染；

u 给图片加上正确的宽高值：这可以减少页面重绘，同时防止图片缩放；

u 防止src属性和link的href属性为空：当值为空时，浏览器很可能会把当前页面当成其属性值加载；

u 正确的闭合标签：如避免使用<div/>，浏览器会多一个将它解析成<div\></div\>的过程；

u 链接为目录或首页的地址后面加”/”，如http://www.5icool.org/；

u 用LINK而不用@import方式导入样式；

u 样式放在页头，JS放在页尾；

u 缩小favicon.ico并缓存；

2) CSS部分

u 避免使用CSS Expressions(CSS表达式)：如background-color: expression( (newDate()).getHours()%2 ? “#B8D4FF” : “#F08A00″ ) ;

u 避免使用CSS Filter（CSS滤镜）；

u 使用CSS缩写，减少代码量；

u 通过CSSSprites把同类图片合成一张，减少图片请求；

u 减少查询层级：如.header .logo要好过.header .top .logo；

u 减少查询范围：如.header>li要好过.header li；

u 避免TAG标签与CLASS或ID并存：如a.top、button#submit；

u 删除重复的CSS；

3) Javscript部分

u 尽量少用全局变量；

u 使用事件代理绑定事件，如将事件绑定在body上进行代理；

u 避免频繁操作DOM节点；

u 不使用EVAL；

u 减少对象查找，如a.b.c.d这种查找方式非常耗性能，尽可能把它定义在变量里；

u 类型转换：把数字转换成字符串使用”” + 1，浮点数转换成整型使用Math.floor()或者Math.round()；

u 对字符串进行循环操作，譬如替换、查找，应使用正则表达式；

u 删除重复的JS；

4) 服务器部分

u 尽量合并CSS、JS文件，或将其直接写在页面上，减少HTTP请求；

u 压缩CSS、JS文件，缩短文件传输时间；

u 避免404错误：特别要避免给404指定一个停摆页面，否则所有404错误都将会加载一次页面；

u 一般要求减少DNS查询次数，如同一个页面的请求资源尽量少的使用不同的主机名，这可以减少网站并行下载的数量，但很多网站为了加速下载资源其实是特意用了多个主机名，这里要做一个权衡；

u 使用CDN加速，使用户从离自己最近的服务器下载文件；

u 减少Cookie的大小，使用无cookie的域，客户端请求静态文件的时候，减少 Cookie 的反复传输对主域名的影响；

u 为文件头指定Expires，使内容具有缓存性；

u 使用gzip压缩内容；

8. JavaScript中哪些方法获取元素?

getElementById

getElementsByClassName

getElementsByTagName

getElementsByName

9. 描述CSS hack技巧?

条件注释：仅适用于IE

特定符号：适用于能识别特定符号的浏览器

内核符号：针对不同浏览器内核

10.用JS截取字符串，asdfgh，要fgh;?

方式1： ‘asdfgh’.substr(3,3)

方式2： ’asdfgh’.substring(3,5) 或者 ‘asdfgh’.substring(3)

11.IE6的双倍边距BUG指的是什么？怎么解决？

双边距：当块级元素有浮动样式的时候，给元素添加margin-left和margin-right样式，在ie6下就会出现双倍边距。

解决方案：给当前元素添加样式，使当前元素不为块，如：display:inline;display:list-item

12. 如果制作一个访问量很大的网站，对css，js和图片应该怎么处理?

方法1：资源文件按模块进行放置，有利于团队开发

方法2：图片尽量采取聚合技术

方法3：精简压缩css和js文件，减少文件大小

方法4：类库、媒体使用CDN加速，减轻服务器压力

13.述ajax原理，什么是同步异步(主观题，答案不唯一)?

Ajax的工作原理：相当于在用户和服务器之间加了—个中间层，使用户操作与服务器响应异步化。这样把以前的一些服务器负担的工作转嫁到客户端，利于客户端闲置的处理能力来处理，减轻服务器和带宽的负担，从而达到节约ISP的空间及带宽租用成本的目的。

同步异步：

14. 平时有没有使用xml和json，在ajax交互中，哪一种更易于开发和维护，js中怎么序列化JSON字符串?

有，json相比xml可读性和可扩张性好、编码及解码难度较低、在数据交互中带宽占用少，并且在当下是最流行的数据交互格式。

序列化JSON字符串：eval() 或者 JSON.parse()

15. JS怎么创建一个类?

方式1 : var obj = new Object();

方式2 : var obj = {};

16.JS的typeof返回哪些数据类型?

string、number、object、boolean、function、undefined

17. HTTP请求有哪几种？

post、get

18. 完成下面布局（兼容IE6-10以及FF、谷歌、苹果浏览器）?

<!DOCTYPEhtml>

<htmllang="en">

<head>

<metahttp-equiv="Content-Type" content="text/html;charset=utf-8"/>

<style>

body {

margin: 0;

padding: 0;

}

#body {

background-color: #0099CB;

width: 100%;

float: left;

}

#header {

height: 60px;

background-color: #999999;

}

#content {

background-color: #006766;

margin-left: 180px;

}

#sidebar {

width: 180px;

float: left;

}

#footer {

clear: both;

height: 60px;

background-color: #999999;

}

</style>

</head>

<body>

<divid="header"></div>

<divid="body">

<divid="sidebar"></div>

<divid="content"></div>

</div>

<divid="footer"></div>

</body>

</html>

19.闭包是什么？有什么特性？请简单书写一个简单事例？

必包：闭包是指可以包含自由（未绑定到特定对象）变量的代码块；这些变量不是在这个代码块内或者任何全局上下文中定义的，而是在定义代码块的环境中定义（局部变量）

特性：闭包是能够读取其他函数内部变量的函数，即在外面可以调用函数中的函数的变量，其实他就是将函数内外部连接起来的桥梁

事例：

<scripttype=’text/javascript’>

function a(){

var i = 99;

iAdd = function(){

i++;

}

function b(){

alert(i);

}

return b;

}

var result = a();

result();//结果为99

iAdd();

result();//结果为100

</script>

20. 解释jsonp的原理，以及为什么不是真正的ajax（主观题）？

JSONP是一种非正式传输协议，该协议的一个要点就是允许用户传递一个callback参数给服务端，然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据，这样客户端就可以随意定制自己的函数来自动处理返回数据了。

21. js延迟加载的方式有哪些？

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

22. 对WEB标准以及W3C的理解与认识？
标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外链css和js脚本、结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更广泛的设备所访问、更少的代码和组件，容易维护、改版方便，不需要变动页面内容、提供打印版本而不需要复制内容、提高网站易用性；

23. xhtml和html有什么区别？
HTML是一种基本的WEB网页设计语言，XHTML是一个基于XML的置标语言
最主要的不同：
XHTML 元素必须被正确地嵌套。
XHTML 元素必须被关闭。
标签名必须用小写字母。
XHTML 文档必须拥有根元素。

24. Doctype? 严格模式与混杂模式-如何触发这两种模式，区分它们有何意义?
用于声明文档使用那种规范（html/Xhtml）一般为严格过度基于框架的html文档
加入XMl声明可触发，解析方式更改为IE5.5 拥有IE5.5的bug

25. 行内元素有哪些？块级元素有哪些？CSS的盒模型？

块级元素：div p h1 h2 h3 h4 form ul
行内元素: a b br i span input select
Css盒模型:内容，border ,margin，padding

26.CSS引入的方式有哪些?link和@import的区别是?
内联内嵌外链导入
区别：同时加载
前者无兼容性，后者CSS2.1以下浏览器不支持
Link 支持使用javascript改变样式，后者不可

27.CSS选择符有哪些？哪些属性可以继承？优先级算法如何计算？内联和important哪个优先级高？
标签选择符类选择符 id选择符
继承不如指定 Id>class>标签选择
后者优先级高

28.前端页面有哪三层构成，分别是什么？作用是什么？
结构层 Html 表示层 CSS 行为层 js

29.css的基本语句构成是？
选择器{ 属性1:值1;属性2:值2;……}

30.你做的页面在哪些流览器测试过？这些浏览器的内核分别是什么?
Ie(Ie内核)火狐（Gecko）谷歌（webkit） opear(Presto)

31.写出几种IE6 BUG的解决方法？
1.双边距BUG float引起的使用display
2.3像素问题使用float引起的使用dislpay:inline-3px
3.超链接hover 点击后失效使用正确的书写顺序link visited hover active
4.Ie z-index问题给父级添加position:relative
5.Png 透明使用js代码改
6.Min-height 最小高度！Important解决’
7.select 在ie6下遮盖使用iframe嵌套
8.为什么没有办法定义1px左右的宽度容器（IE6默认的行高造成的，使用over:hidden,zoom:0.08 line-height:1px）

32.<img>标签上title与alt属性的区别是什么？
Alt 当图片不显示是用文字代表。
Title 为该属性提供信息

33.描述css reset的作用和用途？
Reset重置浏览器的css默认属性浏览器的品种不同，样式不同，然后重置，让他们统一

34.解释css sprites，如何使用？
Css 精灵把一堆小的图片整合到一张大的图片上，减轻服务器对图片的请求数量

35.浏览器标准模式和怪异模式之间的区别是什么？
盒子模型渲染模式的不同
使用 window.top.document.compatMode 可显示为什么模式

36.你如何对网站的文件和资源进行优化？期待的解决方案包括：
文件合并
文件最小化/文件压缩
使用CDN托管
缓存的使用

37.什么是语义化的HTML？
直观的认识标签对于搜索引擎的抓取有好处

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

39.javascript的typeof返回哪些数据类型？
Object number function boolean underfind

40.例举3种强制类型转换和2种隐式类型转换？
强制（parseInt,parseFloat,number）
隐式（== – ===）

41.split() join() 的区别？
前者是切割成数组的形式，后者是将数组转换成字符串

42.数组方法pop() push() unshift() shift()？
Push()尾部添加 pop()尾部删除
Unshift()头部添加 shift()头部删除

43.14.JS中的call()和apply()方法的区别？

例子中用 add 来替换 sub，add.call(sub,3,1) == add(3,1) ，所以运行结果为：alert(4);

注意：js 中的函数其实是对象，函数名是对 Function 对象的引用。

function add(a,b)

{

alert(a+b);

}

function sub(a,b)

{

alert(a-b);

}

add.call(sub,3,1);

44.IE和DOM事件流的区别？
1.执行顺序不一样、
2.参数不一样
3.事件加不加on
4.this指向问题

45.IE和标准下有哪些兼容性的写法？
Var ev = ev || window.event
document.documentElement.clientWidth || document.body.clientWidth
Var target = ev.srcElement||ev.target

46.ajax请求的时候get 和post方式的区别？
一个在url后面一个放在虚拟载体里面
有大小限制
安全问题
应用不同一个是论坛等只需要请求的，一个是类似修改密码的

47.call和apply的区别？
Object.call(this,obj1,obj2,obj3)
Object.apply(this,arguments)

48.ajax请求时，如何解释json数据？
使用eval parse 鉴于安全性考虑使用parse更靠谱

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

1、创建一个空对象，并且 this 变量引用该对象，同时还继承了该函数的原型。

2、属性和方法被加入到 this 引用的对象中。

3、新创建的对象由 this 所引用，并且最后隐式的返回 this 。

var obj = {};

obj.__proto__ = Base.prototype;

Base.call(obj);

50.写一个获取非行间样式的函数？

functiongetStyle(obj,attr,value)
{
if(!value)
{
if(obj.currentStyle)
{
return obj.currentStyle(attr)
}
else
{
obj.getComputedStyle(attr,false)
}
}
else
{
obj.style[attr]=value
}
}