注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

左岸

web前端

 
 
 

日志

 
 

前端开发知识结构图1 【转】  

2012-10-09 10:51:36|  分类: 随笔 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
页面重构基础

包含了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><div id="nav"><!-- 内容 --></div><div id="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值生成 脚本。

  评论这张
 
阅读(148)| 评论(2)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017