前端开发面试题
来源：互联网 发布：女友说分手知乎 编辑：程序博客网 时间：2024/04/29 12:53
1、列举你工作中遇到的IE6 BUG，谈谈解决方案。
例如：当给父元素内第一个浮动元素设置margin-left或margin-right的时候，margin属性会加倍，此时需要添加属性display:inline.
这样能避免双倍边距
b.发生在一个元素浮动，然后一个不浮动的元素自然上浮与之靠近会出现的
3px的bug。只有采用“暴力破解法”,人为地调整3px。
c.当子元素浮动未知高度时，使父容器适应子元素的高度bug
overflow:auto;-------让父容器自适应子元素的高度
_zoom:1;---------为了兼容IE6而使用的CSS Hack
d.外部相对定位div的奇数宽高bug
比如：可以将外部相对定位div的宽高为奇数时，会产生1px的边距，可以将外部相对定位的div的宽高改为偶数
e. 图片下方有空隙产生
给img元素添加属性：display:block;
f.ie6下的空标签高度bug
一个空div，如果设置高度为0到19px,会默认始终为19px,此时可以在空标签中添加一些html注释标签<!-->
2、如何用CSS分别单独定义IE6、7、8的width属性。
所有浏览器 通用
height: 100px;
IE6 专用
_height: 100px;
IE6 专用
*height: 100px;
IE7 专用
*+height: 100px;
IE7、FF 共用
height: 100px !important;
3、CSS中哪些属性可以从父元素继承。
有些属性是不能继承的，例如border（边框）、margin（边距）、padding（补白）和背景
4、你如何理解HTML结构的语意化。
1.HTML结构是页面的骨架, 一个页面就好像一幢房子, HTML结构就是钢筋混泥土的墙，一幢房子如果没有钢筋混泥土的墙那就是一堆费砖头, 不能住人，不能办公。css是装饰材料, css如果没有html结构那就是一堆木板，一同油漆，没有了实际使用价值。当我们提到“语义标记”的时候，我们所说的HTML应该是完全脱离表现信息的，其中的标签应该都是语义化地定义了文档的结构。
意义：1。这样有利于读取设备将根据自身条件合适地显示页面2.搜索引擎的爬虫也根据语义化的结构进行搜索3.便于团队开发和维护
5、做好SEO需要考虑什么。
SEO就是搜索引擎的优化
1、了解搜索引擎如何抓取网页和如何索引网页
你需要知道一些搜索引擎的基本工作原理，各个搜索引擎之间的区别
2、Meta标签优化
主要包括主题（Title)，网站描述(Description)，和关键词（Keywords）。还有一些其它的隐藏文字比如Author（作者），Category（目录），Language（编码语种）等。
3、如何选取关键词并在网页中放置关键词
搜索就得用关键词。关键词分析和选择是SEO最重要的工作之一。首先要给网站确定主关键词（一般在5个上下），然后针对这些关键词进行优化，包括关键词密度（Density），相关度（Relavancy），突出性（Prominency）等等。
4、了解主要的搜索引擎
虽然搜索引擎有很多，但是对网站流量起决定作用的就那么几个。比如英文的主要有Google，Yahoo，Bing等；中文的有百度，搜狗，有道等。不同的搜索引擎对页面的抓取和索引、排序的规则都不一样。还要了解各搜索门户和搜索引擎之间的关系，比如AOL网页搜索用的是Google的搜索技术，MSN用的是Bing的技术。
5、主要的互联网目录
6、你得学会用最少的广告投入获得最多的点击。
7、搜索引擎提交
8、链接交换和链接广泛度（Link Popularity）
跟获取你的访问量有很大的关系
9、标签的合理使用
比如尽量少用iframe，搜索引擎不会抓取到iframe里的内容，重要内容不要放在框架中。
不可使用display:none;的方法让文字隐藏，因为搜索引擎会过滤掉display:none;里边的内容，就不会被蜘蛛检索了。可以设置text-indent为负数，偏离浏览器之外，然后再利用overflow:hidden属性进行隐藏
6、我们知道可以以外链的方式引入CSS文件，请谈谈外链引入CSS有哪些方式，这些方式的性能有区别吗。
a.行内样式
缺点：通用性差，效果特殊，优点：使用在ＣＳＳ命令较少，并且不常改动的地方，使用这种方法反而是很好的选择。
b.内嵌样式：css写在head标签里面
优点：直接在ＨＴＭＬ文档中，运用这样式比较快。缺点：代码臃肿，不利于维护
c.链接样式：引入外部的css文件
比较易于维护和美观的一种方式
d.导入样式
优点：一次性导入多个css文件。用于css文件数量庞大的系统中
7、CSS Sprite是什么，谈谈这个技术的优缺点。
CSS Sprite其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行定位
CSS Sprites能减少图片的字节，加快网页的加载速度。缺点是开发和维护都是比较麻烦的。
8、以CSS3标准定义一个webkit内核浏览器识别的圆角（尺寸随意）
border:30px;border-radius:40px;。
9、有这么一段HTML，请挑毛病：
<P>
===========================================================================================
1.如何触发这Doctype的标准模式和混杂模式？区分它们有何意义?
在标准模式中，浏览器根据规范呈现页面。在混杂模式中，页面以一种比较宽松的向后兼容的方式显示。
触发混乱模式： IE6的触发DOCTYPE前加入XML声明<?xml version="1.0" encoding="utf-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
各个浏览器的混杂模式，基本就是各个浏览器的私有模式，不相互兼容。所以，除非是为了兼容的问题，才采用混杂模式
2：行内元素有哪些？块级元素有哪些？CSS的盒模型？
行内元素有：a b span I
块级元素有：div ul ol lidl dt dd
盒模型：margin border padding width
3.CSS选择符有哪些？哪些属性可以继承？优先级算法如何计算？
标记选择器，类选择器，ID选择器。优先级就近原则
载入样式以最后载入的定位为准。
5:前端页面有哪三层构成，分别是什么？作用是什么？
网页分成三个层次，即：结构层、表示层、行为层。
网页的结构层：由HTML 或XHTML 之类的标记语言负责创建，即HTML的语义化。，说白了就是一些标签
网页的表示层：说白了就是CSS
网页的行为层：说白了就是Javascript 语言和DOM 主宰的领域。
6:css的基本语句构成是？
层叠样式表
（自定义的样式名称）｛
7：你做的页面在哪些流览器测试过？这些浏览器的内核分别是什么?经常遇到的浏览器的兼容性有哪些？怎么会出现？解决方法是什么？
1，使用Trident的是internet explorer，国产的绝大部分浏览器。Trident是就是ie内核2，使用Gecko的是Mozilla Firefox，使用 Gecko 内核的浏览器也有不少，如 Netscape MozillaSuite/SeaMonkey 等3，使用Presto的是opera，这是目前公认网页浏览速度最快的浏览器内核4，使用WebKit的有苹果的safari，谷歌的chrome，还有国产的大部分双核浏览器其中一核就是WebKit
9.如何居中一个浮动元素?
设置容器的浮动方式为相对定位，然后确定容器的宽高，比如宽500 高 300 的层，然后设置层的外边距。
div{Width:500px;height:300px;Margin: -150px 0 0-250px;position:relative;left:50%;top:50%;}
10.有没有关注HTML5和CSS3?如有请简单说一些您对它们的了解情况！
IE9以上开始支持
HTML5标签的改变：<header>,<footer>, <dialog>, <aside>, <figure>, <section> 等
CSS3实现圆角，阴影（text-showdow）对文字加特效(text-overflow,word-wrap,font-size-adjust)，增加了更多的CSS选择器(全局选择器，组合选择器，继承选择器，伪类选择器等)
11:如果让你来制作一个访问量很高的大型网站，你会如何来管理所有CSS文件、JS与图片？
1.css文件，以及js文件尽量分别都放在一个文件里，减少客户端请求服务器的次数
2.背景图片尽量采用CSS sprites技术
3.css和JS的命名尽量采用英文有意义的缩写
14：你对前端界面工程师这个职位是怎么样理解的？它的前景会怎么样？
[Javascript]
1：js是什么，js和html 的开发如何结合？
2.怎样添加、移除、移动、复制、创建和查找节点
创建新节点：
document_createTextNode();//创建一个文本节点
document_createElement_x_x();//创建一个具体的元素
添加：
a();
移除
removeChild();
替换
replaceChild();
复制：
.clone();
移动：
insertBefore();
查找节点：
getElementsByTagName_r();//通过标签名称
getElementsByName();//通过元素的Name属性的值
getElementById();//通过元素Id，唯一性
3.怎样使用事件以及IE和DOM事件模型之间存在哪些主要差别
普及：有两种触发方式，一种叫做Bubbling(冒泡)，另外一种叫做Capturing(捕获)。由上图可以看出来，冒泡的方式效果就是当一个DOM元素的某事件例如click事件被触发时，依次它的父元素的click事件也被触发，一直传递到最顶层的body元素为止。而捕获的触发方式正好相反，当某个元素的click事件被触发时，先从最顶层的body元素click事件被触发开始，一直传递到真正被触发的元素为止。
怎样使用事件：
1.直接在DOM元素上绑定事件处理器
2.FF等浏览器遵循W3C标准来制定浏览器事件模型，使用addEventListener和removeEventListener两个函数
3.IE自己的事件模型，但主要是通过attachEvent和detachEvent两个函数来实现的。
主要差别：
直接在DOM元素上绑定事件处理器：它是一种通用方式,并且Event处理函数内部的this变量都指向被绑定的DOM元素。至于它的缺点也很明显，就是传统方式只支持Bubbling，而不支持Capturing，并且一次只能绑定一个事件处理器在DOM元素上最后就是function参数中的event参数只对非IE浏览器有效果。
FF等浏览器遵循W3C标准来制定浏览器事件模型：addEventListener带有三个参数，第一个参数是去掉on的事件类型，第二个参数是处理函数，可以直接给函数字面量或者函数名，第三个参数是boolean值，表示事件是否支持Capturing。
W3C的事件模型优点是Bubbling和Capturing都支持，并且可以在一个DOM元素上绑定多个事件处理函数，并且在处理函数内部，this关键字仍然指向被绑定的DOM元素。
至于它的缺点，很不幸的就只有在市场份额最大的IE浏览器下不可使用这一点。
IE自己的事件模型：可以发现它跟W3C的区别是没有第三个参数，而且第一个表示事件类型的参数也必须把’on’给加上。这种方式的优点就是能绑定多个事件处理函数在同一个DOM元素上。
首先IE浏览器本身只支持Bubbling不支持Capturing；而且在处理函数内部this关键字也无法使用，因为this永远都只向window object这个全局对象。要想得到event对象必须通过window.event方式，最后一点，在别的浏览器中，它显然是无法工作的。
4.面向对象编程:b怎么继承a
function A{
this.name=name?name:'小刚';
this.age=age?age:30;
this.say=function{
alert(this.name+"今年"+this.age+"岁了")；
}
}
function B{
}
B.prototype=new A();
Var C= new B();
C.say();
5.看看下面alert的结果是什么
function b(x, y, a) {
arguments[2] = 10;
alert(a);
}
b(1, 2, 3);
如果函数体改成下面，结果又会是什么？
a = 10;
alert(arguments[2] );
答案：都弹出10
6.请编写一个JavaScript函数 parseQueryString，它的用途是把URL参数解析为一个对象
7.ajax是什么?
ajax:Ajax是多种技术组合起来的一种浏览器和服务器交互技术，基本思想是允许一个互联网浏览器向一个远程页面/服务做异步的http调用，并且用收到的数据来更新一个当前web页面而不必刷新整个页面。该技术能够改进客户端的体验
交互模式：交互模型就是Ajax在浏览器端引入一个执行引擎，它一边应付user的请求，一边把某些必须交给服务器处理的东西传送给服务器，同时把结果准备好，展现给user的技术模式
同步：脚本会停留并等待服务器发送回复然后再继续
异步：脚本不停留并处理可能的回复
解决跨域问题：
a.通过后台程序作为ajax的中间桥梁
b.通过<script>标签来解决,此js文件的主要功能就是传递数据，不做处理用。
c.两个完全不同域名下的互访，可以利用iframe的hash属性来调用
8.什么是闭包？下面这个ul，如何点击每一列的时候alert其index?
闭包：一个封闭的function，它可以访问其他外部声明的变量，使外部访问不了它内部声明的变量，除非它愿意提供一个句柄。
<ul id=”test”>
<li>这是第一条</li><li>这是第二条</li><li>这是第三条</li>
</ul>
9.最近看的一篇Javascript的文章是？
防止盗链，所谓盗链就是超链接的目标网页并不是放在自己的服务器上，放在别人服务器上的一种行为。通常一些小网站通过盗链，将知名度高的网站的图片，文章等放在自己的网站中，骗取访问量。
document.url获得当前网页的url，documentf.reffer获得上一个网页的url.如果上一个网页的url为空或者上一个网页的域名和当前网页的域名一致，则不存在盗链问题。
10.常使用的库有哪些？常用的前端开发工具？开发过什么应用或组件？
11.说说YSlow(可以详细一点)
（这个没用过）
一、填空题（40分）
1、目前常用的WEB标准静态页面语言是__ ______。（4分）html
2、改变元素的外边距用________，改变元素的内填充用________。（6分）margin
3、在Table中，TR是________，TD是________。（6分）
4、如果给一行两列的表格（table）定义高度样式，在________标签中定义最合理，最能减少代码的臃肿。（5分）tr
5、对ul li的样式设成无，应该是用什么属性________。（6分）list-styl-type：none；
6、在新窗口打开链接的方法是________。（4分）target=_blank
7、Color:#666666;可缩写为________。（2分）color：#666
8、合理的页面布局中常听过结构与表现分离，那么结构是________，表现是________。（9分）html标签 css
--------------------------------------------------------------------------------------------------------------------------------------------
1、
常用的有IE(6,7,8,9,10,FF,chrome )
IE常用的调试工具有 IEWebDeveloper (IE9默认有安装)
Firefox大家估计用的最多。firebug
chrome(内核webkit) 自带的有google 开发的内置调试工具。
chrome内核跑的比较快，安全。Firefox做调试是最棒的。
5、说出其他浏览器和IE浏览器在页面元素引用有什么区别？
这个和内核有关系，及是否w3c来定制，不同浏览器渲染结果不同。
目前国内还有大部份使用IE6，常常web在制作的时候碰到兼容性的问题：
如：
display-block, padding, margin 等盒子模型比较多。还有不同的字间距等产生的问题；
常用解决的方法：
IE6：_xxx:{}
IE7：*
等处理不IE和其它不同浏览器间的差异；
------------------------------------------------------------------------------------------------------------------------------------------
二、选择题（20分）
4、请选择对javascript理解有误的：( ABCD)
A. javascript是网景公司开发的一种基于事件和驱动网页脚本语言
B. JScript是javascript的简称
C.FireFox和IE存在大量兼容性问题的主要原因在于他们对javascript的支持不同上
D.AJAX技术一定要使用javascript技术
5、在Jquery中下面哪一个是用来追加到指定元素的末尾的？(
A、insertAfter() B、append() C、appendTo() D、after()
exp:
A.after(B) 是在A后面插入B，
B.insertAfter(A)是把B插入A后面
6、在javascript中定义变量 var a=”35”, var b=”7” 运算 a %
A、357
7、下面哪种不属于jquery的筛选？（
A、过滤 B、自动 C、查找 D、串联
8、
A、visible B、hidden C、visible() D、overflow
9、下面哪个属于javascript的布尔型（
A、1.2 B、“true” C、false D、null
10、onload事件是 window 的事件，但是在 HTML 中指定事件处理程序的时候，我们是把它写在（
A、<body>
11、请选择结果为真的表达式：（
A、null instanceof Object
D、NaN == NaN
exp:1、对于string,number等基础类型，==和===是有区别的
1）不同类型间比较，==之比较“转化成同一类型后的值”看“值”是否相等，===如果类型不同，其结果就是不等
2）同类型比较，直接进行“值”比较，两者结果一样
2、对于Array,Object等高级类型，==和===是没有区别的
1）对于==，将高级转化为基础类型，进行“值”比较
12、下列哪个对象是用来代表特定的窗口URL信息（
A、location
13、（
A、对象
14、在window 窗口对象中，（
A、focus( ) B、blur( )
15、下面哪个属于javascript的字符型（
A、false B、你好C、“123” D、null
16、下列运算方式不属于逻辑运算的是（
A、!a
17、关于变量的声明，下列选项阐述不正确的是（
A、变量声明时，所有类型均由小写var声明，如 var
B、可以以字母、下划线或者数字开头
18、（
A、history
19、JavaScript是一种基于（
A、对象 B、方法 C、事件 D、对象和事件驱动
1. HTTP协议的状态消息都有哪些?(如200、302对应的描述)
200 : OK（成功） 一切正常
404:未找到
304 ：未修改
4. 简述JavaScript封装。
将一些命令写在一起组合成一个类，可以new一个使用
5. JavaScript继承有哪两种形式形式，进行描述。
1.对象冒充
当构造对象B的时候，调用temp相当于启动A的构造函数，上下文环境中的this对象是B的实例，所以在执行A构造函数脚本时，所有A的变量和方法都会赋值给this所指的对象，即B的实例，这样子就达到B继承了A的属性方法的目的。之后删除临时引用temp，是防止维护B中对A的类对象（注意不是实例对象）的引用更改，因为更改temp会直接导致类A（注意不是类A的对象）结构的变化。
增加了call和apply函数
2.原型方式
将父类所有属性和方法连接到子类的prototype域上，这样子类就继承了父类所有的属性和方法
6. 什么是闭包?以下代码点击<p> 会输出什么?为什么?能大概说明白的话继续问能想出几种解决办法。
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8" /> <title>闭包演示</title> <style type="text/css">
8. 简述下cookie的操作，还有cookie的属性都知道哪些。
操作：创建cookie
document.cookie="name=value";
获取cookie:
var cookies=document.cookie;
再加上String对象的一些方法，比如indexof等。
cookie的属性：
cookie的编码
cookie的生存期
cookie的路径
cookie的domain解决不同域下的cookie访问问题
9. IE与FF的JS兼容性都知道哪些。
1.document.formName.item("itemName")在IE下能使用，但是在ff下不行，得改成document.formName.elements["elementName"]
2.现有代码中许多集合类对象取用时使用 ()，IE 能接受，MF 不能。
3.window.event 在FF下无法运行
4.在 IE 中，HTML 对象的 ID 可以作为 document 的下属对象变量名直接使用。(document.out或者 document['out']
)在 MF 中不能。解决方法：用 getElementById("idName") 代替 idName 作为对象变量使用。
jQuery相关
1. jQuery源码是否尝试去读过?说说基本的架构或者 jQuery.fn.init 中都做了哪些判断。
2. 都知道哪些不好的jQuery书写方式。
3. Sizzle是否有读过?
其它相关的加分项：
2. 都知道有哪些浏览器内核?开发过的项目都兼容哪些浏览器?
trident内核的有IE。
4. 瀑布流布局或者流式布局是否有了解
1.传统多列浮动：float:left属性（之前用的比较多）
2.通过CSS3定义：通过定义容器的高，宽，列数等
4. 正则表达式有系统学习过吗(看书或网上教程)?有的话就问问简单点的邮箱验证、URL验证， 或者问问 贪婪匹配与懒惰匹配 的理论知识。
5. Node.js是否有过尝试?到什么程度?说说个人理解的看法?
6. HTML5都有哪些新的JS API?
1.document.querySelector("selector");
2.document.querySelectorAll("selector");
3.document.getElementsByClassName("selector");
7. 前端优化知识都知道哪些?
8. 基础算法题(如快速排序，能否一两句说说重要的核心原理或者数组消重等)。
9. 是否有接触过或者了解过重构。
一、
1、javascript的数据类型不包括 （
A. 汉字型
2、以下哪条语句不能创建对象：（
A.var obj = ();
3、javascript的单行注释方式（
A. {}
20、关于下列运算符与表达式叙述不正确的是（
A、delete是用来删除对象、属性、数组、变量，删除成功返回true，删除失败返回false
B、typeof是用来判断操作数类型
C、this代表当前对象，因此在不同的地方就有不同的结果
D、new能用来声明变量，并给变量赋值
21、写 "Hello World" 的正确 Javascript 语法是（
A、("Hello World")
D、document.write("Hello World")
22、如何在警告框中写入 "Hello World"？（
A、alertBox="Hello World"
D、alertBox("Hello World”)
23、如何创建函数（
A、function:myFunction()
24、如何调用名为 "myFunction" 的函数(
A、call function myFunction
25、如何编写当 i 等于 5 时执行一些语句的条件语句？（ a
A、if (i==5)
26、jQuery中如果需要匹配包含文本的元素，用下面哪种来实现？(
A、text() B、contains() C、input() D、attr(name)
27、在 JavaScript 中，有多少种不同类型的循环(
A、两种。for 循环和 while 循环。
B、三种。for 循环、while 循环、do...while 。
C、一种。for 循环。
28、for 循环如何开始(
A、if (i != 5)
29、定义 JavaScript 数组的正确方法是 (
A、var txt = new Array="George","John","Thomas"
B、var txt = new Array(1:"George",2:"John",3:"Thomas")
C、var txt = new Array("George","John","Thomas")
D、var txt = new Array:1=("George")2=("John")3=("Thomas")
30、如何把 7.25 四舍五入为最接近的整数(
A、round(7.25)
31、 如何求得 2 和 4 中最大的数？(
A、Math.ceil(2,4)
32、在jquey中，如果想要从DOM中删除所有匹配的元素，下面哪一个是正确的？（ c
A、delete() B、empty() C、remove() D、removeAll()
33、如何在浏览器的状态栏放入一条消息( B
A、statusbar = "put your message here"
B、window.status = "put your message here"
C、window.status("put your message here")
D、status("put your message here")
34如何获得客户端浏览器的名称(
A、client.navName
D、status("put your message here")
35、在JQUERY中以下方法，哪一个可以直接设置高度收缩展开：（
A、show()和hide()
D、animate()
36、jQuery中使用cookie插件设置cookie的正确写法是（
A、$(“cookieName”)
C、$.cookie(“name”, path:”/”,expires:10})
37、在jquery中，想要给第一个指定的元素添加样式，下面哪一个是正确的？（
A、first B、eq(1) C、css(name) D、css(name,value)型
38、在一个表单中，如果将所有的div元素都设置为绿色，实现功能是（
A $(“div”).css(“color”,”green”)
C $(“div”).addCss(“color”,”green”) D $(“div”).css(”green”)
39、 下列方法可以来回切换点击事件的是（
A toggle()
40、（