前端开发

页面重构基础

包含了HTML以及CSS的基本知识。

知识点

• HTML常用元素。
• HTML元素间嵌套关系。
• HTML元素语义性。
• CSS常用属性。
• CSS选择器。
• CSS选择器优先级。
• 两类盒模型的概念。
• 常见布局的实现。

常见问题

• h1~h6的区别是什么？ul、ol的区别呢？
• 有用过dl、dt、dd这三个元素吗？其表达的语义是什么？
• 如何实现定宽、自适应的两列、三列布局？
• float属性的的作用是什么？如何清除浮动？
• position属性的取值有哪些？各值的效果如何？
• display属性的取值有哪些？各值的效果如何？
• display:inline-block的特点？
• form元素的常用属性有哪些？
• input元素不给定type属性的情况下，会是什么样的？
• input type="image"元素的作用是什么？
• 标准盒模型是怎么样的？怪异盒模型呢？
• 如何控制浏览器进入怪异模式或者标准模式？
• 有使用过哪些CSS选择器？

兼容

考察包括Internet Explorer 6-8、Firefox 3.5+、Chrome 6+在内的各浏览器在HTML以及CSS方面的兼容性知识。

知识点

• HTML部分元素（如ul）在不同浏览器下的默认样式的差异。
• 部分HTML元素的使用上存在的差异，如引入flash的方式。
• 旧浏览器（如Internet Explorer 6）对部分CSS属性（如display:inline-block）支持程度。
• 部分CSS属性产生的问题（如双倍边距、3px边距等），以及如何修复。
• 旧浏览器不支持部分CSS属性（如position:fixed）的修复方案。
• 各浏览器使用的CSS Hack形式。

常见问题

• 有使用或制作过reset.css吗？请问该css中要包含哪些内容？
• 谈谈项目中遇到过的布局相关的兼容性问题，以及通过什么方式解决的？
• 浅谈一下IE中的hasLayout属性的作用，以及如何触发该属性。
• display:inline-block是一个非常好用的样式，但是IE6对其支持有限，能谈谈IE6是如何理解该样式的吗？如何在IE6下模拟出该样式的效果呢？
• 谈谈width和height样式在IE6下与其他浏览器的区别？
• 谈谈IE6对!imoprtant的样式声明的解析规则？
• 对于IE6不支持alpha透明的png的问题，是如何解决的？使用AlphaImageLoader会产生哪些问题？有没有解决的方法呢？
• 如何全浏览器兼容地设置某个元素的透明度为30%？

性能

考察页面重构的知识中与性能有关的各知识点，其考察以点状知识为主。

性能不仅仅是浏览器执行、解析的相关数值，也包括如何让用户更快地看到内容等方面的考量。

知识点

• CSS选择器的优化。
• HTML元素层面的优化。
• 流式布局与table布局之间的区别。

常见问题

• HTML元素到CSS选择器的匹配过程是如何进行的？
• 能否谈谈在制作CSS选择器时，要注意一些什么问题，保证性能的最优化？
• 为什么现在倡导流式布局，而不使用table布局？两者在性能方面是否有区别？

实践1

实现一个二级的菜单，其中一级菜单横向排列，当鼠标移动到一级菜单的某个菜单项上时，显示出该项关联的二级菜单。要求写出相关的HTML和CSS，并解释具体原理，并遵循以下规定：

• 不考虑浏览器兼容性问题，以现有最新标准为基础。
• 不得使用任何javascript或其他脚本，仅使用HTML和CSS。
• 二级菜单的展开方式使用动画可获得额外的认同。

实践2

实现一个3列布局，要求使用以下给出的HTML结构：

<div id="main"><!-- 内容 --></div><divid="nav"><!-- 内容 --></div><divid="sidebar"><!-- 内容--></div><div id="footer"><!-- 内容 --></div>

并符合如下要求：

• body元素的padding和margin为0。
• #nav在左边，#main在中间，#sidebar在右边。
• #footer独立在下方，占满整行，其中内容居中。
• #nav宽度为15%，#sidebar宽度为20%，#main占用剩余空间。
• #main中的内容与#nav和#sidebar间隔10px。该条不要求兼容IE6。
• 不要求所有浏览器完全相同，但必须达到可用的程度。

javascript及BOM、DOM基础

考核javascript语言相关的基础知识、ECMA262标准相关知识，以及浏览器提供的BOM模型的知识，和w3标准下的DOM相关知识。

知识点

• javascript中的原生类型、内置类型。
• javascript提供的基本类型的相关函数。
• javascript中的对象类型的判定方式。
• prototype的作用、类型创建、继承。
• ECMA基本语法，如分号插入规则、逗号运算符、括号的多义性等。
• BOM模型提供的对象，如location对象的组成、top/self/window/parent/opener的关系和区别等。
• DOM模型的相关函数、对象。
• DOM元素的创建、修改、删除等操作。
• 常用框架的熟悉程度。
• AJAX的运作过程。

常见问题

• javascript有哪些原生类型、哪些内置类型？null和undefined有什么区别？
• 当访问一个没有用var关键字定义过的对象时，会发生什么？
• Object、Array、RegExp的字面表达方式分别是什么？
• 如何判定一个对象是字符串？判断中的每一个分支在什么情况下成立？
• 在javascript中，通过什么方法能创建一个“类”，以及创建一个“类”的“子类”呢？
• eval('var a = 3;');和(0, eval)('var a = 3;');有什么区别？
• document.defaultView是什么？
• 谈谈Node和Element的区别？Node有哪几种？
• 有哪些函数可以用来获取一个或多个DOM元素？
• 有用过jQuery吗？能说说jQuery的选择器有哪些吗？请问#section~ul>li:gt(0):not(:empty)这个选择器表示什么？

兼容

考察各浏览器中脚本编写时的兼容性处理，主要在于DOM相关属性的兼容性等。

知识点

• DOM元素各属性设置时的兼容性问题。
• DOM元素事件的兼容性。
• 事件注册、注销、触发，事件对象的兼容性。
• 原生数据类型的部分兼容问题，如for...in循环输出的顺序。

常见问题

• 请问如何给一个元素设置float:left样式？
• 如何取得一个元素的内联style属性的字符串，如'color:red;font-size:16px;'？
• 各浏览器是怎么注册、注销、触发事件的？addEventListener的第三个参数有什么作用？捕获和冒泡的概念？
• 事件Event对象在各浏览器下有哪些兼容性的问题，如何处理？
• delete关键字有什么作用？在各浏览器之下有什么差别吗？
• 如何判断浏览器是处在标准模式的呢？
• 有遇上过position:fixed的需求吗？你是如何检测一个浏览器是否支持该定位方式的？对于不支持的浏览器，有什么好的修复方案吗？
• 是否遇上过IE6下背景图片频繁闪烁的问题？能说说原因以及解决方案吗？
• 能谈谈UA检测和特性检测的概念吗？你是如何在两者之间进行取舍的？
• 如何让AJAX请求可以使用“后退”和“前进”按钮？

性能

考察在DOM操作等方面的性能测量、优化等知识，重在考察一个分析的过程，教条主义的结论并不适用。

知识点

• DOM操作的基本优化原则。
• reflow和repaint的概念，如何减少这两个操作。
• Sizzle等框架的选择器的优化。

常见问题

• 请问我们经常听到的“javascript”执行很慢通常是因为什么引起的？如何能进行针对性的优化？
• 能谈谈reflow和repaint这两个概念吗？
• 在编写javascript的时候，有什么关于性能方面需要注意的问题吗？
• 往往为了性能，会损失代码的优雅性和规范性，那么在这方面，你是怎么取舍的呢？
• 有用过Google Closure Compiler吗？对它的高级模式有没有什么研究？
• 如果让你设计一个类似Google Closure Compiler的编译工具，你认为可以对javascript进行怎么样的优化呢？

实践1

使用原生的javascript，实现一个ajax请求的函数：

function ajax(options){ };

要求options中含有以下内容：

url 请求的地址。method请求用的HTTP Method。data可选参数，发送请求时的数据。success可选参数，请求成功时的回调函数，形式：function(xhr) {}。error可选参数，请求失败时的回调函数，形式：function(xhr) {}。codeXxx可选参数，Xxx为一个数字，当响应中的HTTP状态码为Xxx时触发，形式：function(xhr){}。实践2

使用原生的javascript，实现一个函数：

function unique(array) { }

并符合以下要求：

• 当函数只有一个参数时，该参数为数组。
• 当函数有多个参数时，所有的参数合起来为一个数组。
• 函数去除数组中的重复元素，并返回一个仅包含相互不重复的元素的新的数组。
• 使用严格等于来判定两个元素是否重复。
• 考虑时间复杂度。

实践3

使用原生的javascript，实现一个获取某个名字的cookie值的函数：

function getCookie(name) { }

要求不存在名字为name的cookie项时，返回空字符串。

实践4

使用原生的javascript，实现一个jsonp函数：

function jsonp(url, callback) { }

仅要求处理服务器正确返回的情况，在服务器正确返回时，可调用callback函数。

同时，与服务器约定，url中可添加callback=xxx作为回调函数名称，服务器会根据此query值生成脚本。