前端开发

最新推荐文章于 2023-03-14 14:00:24 发布

webstalker

最新推荐文章于 2023-03-14 14:00:24 发布

阅读量430

点赞数 1

分类专栏： css

本文链接：https://blog.csdn.net/webstalker/article/details/45242567

版权

css 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

页面重构基础

包含了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结构：

并符合如下要求：

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) { }

并符合以下要求：