《WEB前端开发面试题集锦》由会员分享，可在线阅读，更多相关《WEB前端开发面试题集锦（21页珍藏版）》请在金锄头文库上搜索。
1、 端面试题整理20111:201、列举你工作中遇到的 谈解决方案。3、如何用 别单独定义 、8 的 性。所有浏览器 通用100用_100用*100用*+100用100、哪些属性可以同父元素继承。继承：(X)素可以从其父元素那里继承部分 性，即使当前元素并没有定义该属性、你如何理解 构的语意化。身是没有表现的，我们看到例如是粗体，字体大小 2粗；是加粗的，不要认为这是 表现，这些其实 认的 式在起作用，所以去掉或样式丢失的时候能让页面呈现清晰的结构不是语义化的 构的优点，但是浏览器都有有默认样式，默认样式的目的也是为了更好的表达 语义，可以说浏览器的默认样式和语义化的 构是不可分割的。果访客有视
2、障）会完全根据你的标记来“读”果你使用的含语义的标记,屏幕阅读器就会“逐个拼出”你的单词,机等设备可能无法像普通电脑的浏览器一样来渲染网页（通常是因为这些设备对 支持较弱）想情况下,省去了你自己去考虑所有可能的显示情况（包括现有的或者将来新的设备）客”,索引擎将无法索引你的网站,为爬虫很大程度上会忽略用于表现的标记,果页面文件的标题被标记,而不是,义标记有利于正确使用 为其本身提供了许多“钩钩”要还是靠你网站的内容和外部链接的。(转载请注明出处： 端开发 )我们定了一个很好的标准，在团队中大家都遵循这个标准，可以减少很多差异化的东西，方便开发和维护，提高开发效率，甚至实现模块化开发。6、谈谈以
3、前端角度出发做好 要考虑什么。1、了解搜索引擎如何抓取网页和如何索引网页你需要知道一些搜索引擎的基本工作原理，各个搜索引擎之间的区别，搜索机器人（SE 叫 何进行工作，搜索引擎如何对搜索结果进行排序等等。2、签优化主要包括主题（网站描述(和关键词（还有一些其它的隐藏文字比如 者），录），码语种）等。3、如何选取关键词并在网页中放置关键词搜索就得用关键词。关键词分析和选择是 重要的工作之一。首先要给网站确定主关键词（一般在 5 个上下），然后针对这些关键词进行优化，包括关键词密度（相关度（突出性（等。4、了解主要的搜索引擎虽然搜索引擎有很多，但是对网站流量起决定作用的就那么几个。比如英文的主要有
4、 ；中文的有百度，搜狗，有道等。不同的搜索引擎对页面的抓取和索引、排序的规则都不一样。还要了解各搜索门户和搜索引擎之间的关系，比如 页搜索用的是 搜索技术，的是 技术。5、主要的互联网目录身不是搜索引擎，而是一个大型的网站目录，他和搜索引擎的主要区别是网站内容的收集方式不同。目录是人工编辑的，主要收录网站主页；搜索引擎是自动收集的，除了主页外还抓取大量的内容页面。6、按点击付费的搜索引擎搜索引擎也需要生存，随着互联网商务的越来越成熟，收费的搜索引擎也开始大行其道。最典型的有 百度，当然也包括 广告项目 来越多的人通过搜索引擎的点击广告来定位商业网站，这里面也大有优化和排名的学问，你得学会用最少
5、的广告投入获得最多的点击。7、搜索引擎登录网站做完了以后，别躺在那里等着客人从天而降。要让别人找到你，最简单的办法就是将网站提交（搜索引擎。如果你的是商业网站，主要的搜索引擎和目录都会要求你付费来获得收录（比如 299 美元），但是好消息是（至少到目前为止）最大的搜索引擎 前还是免费，而且它主宰着 60以上的搜索市场。8、链接交换和链接广泛度（页内容都是以超文本（方式来互相链接的，网站之间也是如此。除了搜索引擎以外，人们也每天通过不同网站之间的链接来 冲浪”）。其它网站到你的网站的链接越多，你也就会获得更多的访问量。更重要的是，你的网站的外部链接数越多，会被搜索引擎认为它的重要性越大，从而给你
6、更高的排名。9、标签的合理使用7、我们知道可以以外链的方式引入 件，请谈谈外链引入 哪些方式，这些方式的性能有区别吗。要说出 引入方式，没有什么难度，但要说到为什么使用不同的引入方式，就有些学问在里面了。引入方式最常用的有三种，第一：在 分加入,引入外部的 件。这种方法可以说是现在占统治地位的引入方法。如同 浏览器。这也是最能体现 点的方法；最能体现 的内容与显示分离的思想，也最易改版维护，代码看起来也是最美观的一种。第二：在 分加入 0;0;px 这种方法的使用情况要少的多，最长见得就是访问量大的门户网站。或者访问量较大的企业网站的首页。与第一种方法比起来，优点突出，弊端也明显。优点：速度快
7、，所有的 制都是针对本页面标签的，没有多余的命令；再者不用外链文件。直接在文档中读取样式。缺点就是改版麻烦些，单个页面显得臃肿，不能被其他引用造成代码量相对较多，维护也麻烦些。但是采用这种方法的公司大多有钱，对他们来说用户量是关键，他们不缺人进行复杂的维护工作。第三：直接在页面的标签里加测试信息这种方法现在用的很少，很多公司不了解前端技术的领导还对这种写法很痛恨。认为里不能出现命令。其实有时候使用下也没有什么大不了。比如通用性差，效果特殊，使用命令较少，并且不常改动的地方，使用这种方法反而是很好的选择。除了这三种常用的引入方式，还有种很多人都没有见过的引入方式这就是第四种引入方式。在工作的时候
8、，只能使用一种 架，就是。而的 用，就是采用了方式。这种情况非常少，主要用在 件数量庞大的负责的系统中。另外 身是一个 令，是放在 件里的，这个跟 签有很大的区别。8、什么，谈谈这个技术的优缺点。 国 内 很 多 人 叫 灵 ， 是 一 种 网 页 图 片 应 用 处 理 方 式 。 它 允 许 你 将 一 个 页 面 涉 及 到 的 所 有 零 星 图 片 都 包 含 到 一 张 大 图 中去 ， 这 样 一 来 ， 当 访 问 该 页 面 时 ， 载 入 的 图 片 就 不 会 像 以 前 那 样 一 幅 一 幅 地 慢 慢 显 示 出 来 了 。 对 于 当 前 网 络 流 行 的 速
9、度 而 言 ， 不 高 于200 单 张 图 片 的 所 需 载 入 时 间 基 本 是 差 不 多 的 ， 所 以 无 需 顾 忌 这 个 问 题 。 加 速 的 关 键 ， 不 是 降 低 重 量 ， 而 是 减 少 个 数 。 传 统 切 图 讲 究 精 细 ， 图 片 规 格 越 小 越 好 ， 重 量 越 小 越 好 ， 其 实 规 格 大 小 无 所 谓 ， 计 算机 统 一 都 按 算 。 客 户 端 每 显 示 一 张 图 片 都 会 向 服 务 器 发 送 请 求 。 所 以 ， 图 片 越 多 请 求 次 数 越 多 ， 造 成 延 迟 的 可 能 性 也 就 越 大 。
10、缺 点利 用 很 好 地 减 少 了 网 页 的 求 ， 从 而 大 大 的 提 高 了 页 面 的 性 能 ， 这 也 是 大的 优 点 ， 也 是 其 被 广 泛 传 播 和 应 用 的 主 要 原 因 ； 减 少 图 片 的 字 节 ， 曾 经 比 较 过 多 次 3 张 图 片 合 并 成 1 张 图 片 的 字 节 总 是 小 于 这 3 张 图 片 的 字 节 总和 。 解 决 了 网 页 设 计 师 在 图 片 命 名 上 的 困 扰 ， 只 需 对 一 张 集 合 的 图 片 上 命 名 就 可 以 了 ， 不 需 要 对 每 一 个 小 元 素 进 行 命 名 ，从 而 提
11、高 了 网 页 的 制 作 效 率 。 更 换 风 格 方 便 ， 只 需 要 在 一 张 或 少 张 图 片 上 修 改 图 片 的 颜 色 或 样 式 ， 整 个 网 页 的 风 格 就 可 以 改 变 。 维 护 起 来 更 加 方便 。 诚 然 如 此 的 强 大 ， 但 是 也 存 在 一 些 不 可 忽 视 的 缺 点 ， 如 下 ： 在 图 片 合 并 的 时 候 ， 你 要 把 多 张 图 片 有 序 的 合 理 的 合 并 成 一 张 图 片 ， 还 要 留 好 足 够 的 空 间 ， 防 止 板 块 内 不 会 出 现 不必 要 的 背 景 ； 这 些 还 好 ， 最 痛
12、苦 的 是 在 宽 屏 ， 高 分 辨 率 的 屏 幕 下 的 自 适 应 页 面 ， 你 的 图 片 如 果 不 够 宽 ， 很 容 易 出 现 背 景断 裂 ； 开 发 的 时 候 比 较 麻 烦 ， 你 要 通 过 其 他 工 具 测 量 计 算 每 一 个 背 景 单 元 的 精 确 位 置 ， 这是 针 线 活 ， 没 什 么 难 度 ， 但 是 很 繁 琐 ； 幸 好 腾 讯 的 鬼 哥 用 发 了 一 个 式 生 成 工 具 ， 虽 然 还 有 一些 使 用 上 的 不 灵 活 ， 但 是 已 经 比 量 来 的 方 便 多 了 ， 而 且 样 式 直 接 生 成 ， 复 制 ，
13、 拷 贝 就 维 护 的 时 候 比 较 麻 烦 ， 如 果 页 面 背 景 有 少 许 改 动 ， 一 般 就 要 改 这 张 合 并 的 图 片 ， 无 需 改 的 地 方 最 好不 要 动 ， 这 样 避 免 改 动 更 多 的 如 果 在 原 来 的 地 方 放 不 下 ， 又 只 能 （ 最 好 ） 往 下 加 图 片 ， 这 样 图 片 的 字 节 就 增 加 了 ，还 要 改 动 常 值 得 学 习 和 应 用 ， 特 别 是 页 面 有 一 堆 图 标 ） 。 总 之 很 多 时 候 大 家 要 权 衡 一 下 利 弊 ， 再决 定 是 不 是 应 用 、以 准定义一个 核浏览
14、器识别的圆角（尺寸随意）1010010、有这么一段 挑毛病：哥写的不是 寂寞。 我说：不要迷恋哥，哥只是一个传说缺少 p 标记的结束标记。=1. 严格模式与混杂模式分它们有何意义? 明位于文档中的最前面的位置，处于标签之前。此标签可告知浏览器文档使用哪种 范。该标签可声明三种 型，分别表示严格版本、过渡版本以及基于框架的 档。当浏览器厂商开始创建与标准兼容的浏览器时，他们希望确保向后兼容性。为了实现这一点，他们创建了两种呈现模式：标准模式和混杂模式（在标准模式中，浏览器根据规范呈现页面；在混杂模式中，页面以一种比较宽松的向后兼容的方式显示。混杂模式通常模拟老式浏览器（比如 E 4 和）的行为以
15、防止老站点无法工作。浏览器根据 否存在以及使用的哪种 选择要使用的呈现方法。如果 档包含形式完整的 么它一般以标准模式呈现。对于 档，包含严格 常导致页面以标准模式呈现。包含过渡 导致页面以标准模式呈现，但是有过渡没有 导致页面以混杂模式呈现。 存在或形式不正确会导致 档以混杂模式呈现。2：行内元素有哪些？块级元素有哪些？盒模型？行内元素有：a b ul ol dt dd h1 h2 h3 h4入的方式有哪些? 区别是?1. 使用 样式文件中，再以标签引入。2. 使用入跟 法很像，但必须放在. 中3. 使用 签将样式规则写在. 标签之中。4. 使用 性将 性直接加在个别的元件标签里，载顺序的差
16、别。当一个页面被加载的时候，用的 同时被加载，而用的 等到页面全部被下载完再被加载。以在 再次引入其他样式表，比如可以创建一个主样式表，在主样式表中再引入其他的样式表，如：-这样做有一个缺点，会对网站服务器产生过多的 求，以前是一个文件，而现在却是两个或更多文件了，服务器的压力增大，浏览量大的网站还是谨慎使用。择符有哪些？哪些属性可以继承？优先级算法如何计算？内联和 个优先级高？5:前端页面有哪三层构成，分别是什么？作用是什么？网页分成三个层次，即：结构层、表示层、行为层。网页的结构层（由 类的标记语言负责创建。标签，也就是那些出现在尖括号里的单词，对网页内容的语义含义做出了描述，但这些标签不
17、包含任何关于如何显示有关内容的信息。例如，P 标签表达了这样一种语义：“这是一个文本段。”网页的表示层（由 责创建。“如何显示有关内容”的问题做出了回答。网页的行为层（责回答“内容应该如何对事件做出反应”这一问题。这是 言和 宰的领域。6:基本语句构成是？8：你做的页面在哪些流览器测试过？这些浏览器的内核分别是什么?经常遇到的浏览器的兼容性有哪些？怎么会出现？解决方法是什么？置容器的浮动方式为相对定位，然后确定容器的宽高，比如宽 500 高 300 的层，然后设置层的外边距。00px;00 00%;0%; 有请简单说一些您对它们的了解情况！签的改变：, , , , 等上开始支持现圆角，阴影，对
18、文字加特效，增加了更多的 择器。要讲述思路 （效果图省略）13:如果让你来制作一个访问量很高的大型网站，你会如何来管理所有 件、图片？14：你对前端界面工程师这个职位是怎么样理解的？它的前景会怎么样？：什么， 开发如何结合？除、移动、复制、E 和 b 怎么继承 结果是什么b(x, y, a) = 10; a); b(1, 2, 3);如果函数体改成下面，结果又会是什么？a = 10; );数 的用途是把 数解析为一个对象 / 输出 什么? 交互模型? 同步和异步的区别? 如何解决跨域问题?面这个 何点击每一列的时候 这是第一条这是第二条这是第三条 文章是？用的前端开发工具？开发过什么应用或组件
19、？以详细一点)=继承 择符有哪些？哪些属性可以继承？优先级算法如何计算？内联和 个优先级高？ 回答： 类 A 标签可以继承 列表 D 继承 优先级就近原则，样式定义最近者为准 载入样式以最后载入的定位为准 优先级为 ! 内联优先级高 5:前端页面有哪三层构成，分别是什么？作用是什么？ 回答：结构层，表现层，定义层； 6:基本语句构成是？ 回答：选择器、属性和属性值。 8：你做的页面在哪些流览器测试过？这些浏览器的内核分别是什么?经常遇到的浏览器的兼容性有哪些？怎么会出现？解决方法是什么？ 回答：涉及到效率一般就在 件上测试模拟 核是 浏览器 式背景图透明 错，浏览器本身的兼容问题有些电脑 正常
20、，有些提示错误 回答：设置容器的浮动方式为相对定位 然后确定容器的宽高比如宽 500 高 300 的层 然后设置层的外边距 00 00 0 0%; 0%; 有请简单说一些您对它们的了解情况！ 回答：有关注 关注 比如对多背景图圆角投影等样式的关注 13:如果让你来制作一个访问量很高的大型网站，你会如何来管理所有 件、图片？ 回答：涉及到人手、分工、同步； 先期团队必须确定好全局样式（编码模式(等 编写习惯必须一致（例如都是采用继承式的写法，单样式都写成一行）； 标注样式编写人，各模块都及时标注（标注关键样式调用的地方）； 页面进行标注（例如页面模块开始和结束）； 文件夹并行存放，命名都得统一（
21、例如 文件夹存放命民以该 能为准英文翻译； 图片采用整合的 式文件使用尽量整合在一起使用方便将来的管理 14：你对前端界面工程师这个职位是怎么样理解的？它的前景会怎么样？ 是策划 计需要转换成程序可实施中的必须的中间环节，这个环节直接关系到页面的正确高效稳定还原策划和 计的效果，同时为程序套接做好程序表现基础载体。这个工作的前景，只能是深造技术流的，模块化管理，新的技术不断更新，对于向后兼容思维的逐步放弃，比如真的淘汰掉 ，向前的空间还是有的。前端开发工程师的前景是非常不错的。现在各大 业都在招聘这方面的人才。普及会更加促进本行业本工种的繁荣。 =一、填空题（40 分）1、目前常用的 准静态页
22、面语言是_ _。（4 分）变元素的外边距用_，改变元素的内填充用_。（6 分） ，_，_。（6 分）行列4、如果给一行两列的表格（义高度样式，在_标签中定义最合理，最能减少代码的臃肿。（5 分）式也有说 ul 样式设成无，应该是用什么属性_。（6 分）、在新窗口打开链接的方法是_。（4 分）666666;可缩写为_。（2 分）6668、合理的页面布局中常听过结构与表现分离，那么结构是_，表现是_。（9 分）择题（20 分）11、 列举常用的浏览器类型以及他们使用的内核还有对应的调试工具 常用的有 ,7,8,9,10,FF, 用的调试工具有 认有安装) 家估计用的最多。核 自带的有 发的内置调试
23、工具。 三者内核各不相同。 其它还有 游，世界之窗等； 核跑的比较快，安全。调试是最棒的。4、 什么新特性 化了 页的表现性能，如:，语义化更强 特性有阴影特效，圆角处理等，都是非常不错的效果；5、说出其他浏览器和 览器在页面元素引用有什么区别？ 这个和内核有关系，及是否 定制，不同浏览器渲染结果不同。 目前国内还有大部份使用 常 制作的时候碰到兼容性的问题： 如： 盒子模型比较多。还有不同的字间距等产生的问题； 常用解决的方法： 等处理不 其它不同浏览器间的差异；4、请选择对 解有误的： ( )A. 网景公司开发的一种基于事件和驱动网页脚本语言B. 在大量兼容性问题的主要原因在于他们对 术一
24、定要使用 术 5、在 下面哪一个是用来追加到指定元素的末尾的？( )A、 B、 C、 D 、6、在 定义变量 a=”35”, b=”7” 运算 a % b 的结果为（ ）A、357 B、57 C、0 D、57、下面哪种不属于 筛选？（ ）A、过滤 B、自动 C、查找 D、串联8、 有这样一个表单元素，想要找到这个 素，下面哪个是正确的？( )A、 D 、面哪个属于 布尔型（ ）A、 “C、件是 事件，但是在 指定事件处理程序的时候，我们是把它写在（ ）标记中的。A、 B、 C、 D、11、请选择结果为真的表达式：（ ）A、B、= C、= = 列哪个对象是用来代表特定的窗口 息（ ）A、 B、
25、C、 D、（ ）是一个可以执行的 码段。A、对象 B、方法 C、事件 D、函数14、在 口对象中， （ ）使焦点从窗口移走，窗口变为 “非活动窗口”。A、) B、) C、 D、15、下面哪个属于 字符型（ ）A、B、你好 C、 “123” D、列运算方式不属于逻辑运算的是（ ）A、!a B、a&b C、a b D、a于变量的声明，下列选项阐述不正确的是（ ）A、变量声明时，所有类型均由小写 明，如 张勇” 女生”B、可以以字母、下划线或者数字开头 C、变量名区分大小写 D、变量名不能是保留字18、 （ ）指浏览器的浏览历史对象A、 B、 C、 D、一种基于（ ）的安全脚本语言。A、对象 B、方
26、法 C、事件 D、对象和事件驱动1. 议的状态消息都有哪些?(如 200、302 对应的描述)2. 什么? 交互模型( 流程 )? 域的解决办法?3. 同步和异步的区别?4. 简述 装。5. 承有哪两种形式形式，进行描述。6. 什么是闭包?以下代码点击 会输出什么?为什么? 能大概说明白的话继续问能想出几种解决办法。闭包演示 p p); i=0; i 产品 0 产品 1 产品 2 产品 3 产品 4 7. 在 键字的使用场合和用法(如在构造函数中、等) 。8. 简述下 操作，还有 属性都知道哪些。9. 容性都知道哪些。10. 作 - 怎样添加、移除、移动、复制、创建和查找节点( 这个问题真心是
27、基础题，一般不会问)。关1. 码是否尝试去读过?说说基本的架构或者 都做了哪些判断。2. 都知道哪些不好的 写方式。3. 否有读过?其它相关的加分项：1. 都使用和了解过哪些编辑器?都使用和了解过哪些日常工具 ?2. 都知道有哪些浏览器内核?开发过的项目都兼容哪些浏览器 ?3. 国内外的 人都知道哪些?4. 瀑布流布局或者流式布局是否有了解4. 正则表达式有系统学习过吗 (看书或网上教程)?有的话就问问简单点的邮箱验证、证， 或者问问 贪婪匹配与懒惰匹配 的理论知识。5. 否有过尝试?到什么程度?说说个人理解的看法?6. 有哪些新的 . 前端优化知识都知道哪些?8. 基础算法题(如快速排序，能
28、否一两句说说重要的核心原理或者数组消重等)。9. 是否有接触过或者了解过重构。一、 1、数据类型不包括 （ a ）A. 汉字型 B. 数值型 C. 对象型 D. 布尔型2、以下哪条语句不能创建对象：（ ） (); ; ; /;3、单行注释方式（ c ）A. B. C. / D. /* * * * */20、关于下列运算符与表达式叙述不正确的是（ ）A、用来删除对象、属性、数组、变量，删除成功返回 除失败返回用来判断操作数类型C、表当前对象，因此在不同的地方就有不同的结果D、用来声明变量，并给变量赋值21、写 的正确 法是（ ）A、( B、C、 D、22、如何在警告框中写入 （ ）A、 B、 C
29、、D、23、如何创建函数（ ）A、 B、 C、 24、如何调用名为 的函数( )A、 B、 C、 25、如何编写当 i 等于 5 时执行一些语句的条件语句？（ ）A、i=5) B、if i=5 C、if i=5 D、if i=5 如果需要匹配包含文本的元素，用下面哪种来实现？( )A、 B、 C、 D、7、在 ，有多少种不同类型的循环( )A、两种。环和 环。 B、三种。 环、循环、C、一种。环。 28、环如何开始 ( )A、i != 5) B、i 指定。、 C、（ ）事件发生在窗口得到焦点的时候。2. ）是在当前文档中写入3. （ ） 发生在窗口失去焦点的时候。4. （ ）发生在用户把鼠标放
30、在对象上鼠标键被按下的情况下，放开鼠标键的时候。5. 在数组对象中（ ）属性可以获取数组元素的个数。6. 字符串对象中（ ）方法可以获取字符串在字符串中出是否出现。7. 正则表达式中（ ） 方法检查在字符串中是否存在这个模式，如果存在则返回 则就返回 8. 象中的（ ）方法，用以指定在一段特定的时间后重复执行某段程序。9. 给图片设置路径 值为 法为( )10. ( ） 发生在对象被单击的时候。11. 根据变量的作用域，可以将变量分为（ ）和（ ） 。12. 日期对象中 方法获取的取值范围是（ ） 。13. （ ）发生在用户把鼠标放在对象上按下鼠标键的时候。14. 可以用（ ）来创建一个新的对象，并指定对象的类型。15. 可以用（ ）方法触发事件16. ， （ ）方法可以得到该元素的下一个兄弟节点17. jQu
