Frontend Knowlodge Chart

页面重构

基础

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

知识点

常见问题

兼容

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

知识点

常见问题

性能

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

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

知识点

常见问题

实践1

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

实践2

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

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

并符合如下要求:

javascript及BOM、DOM

基础

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

知识点

常见问题

兼容

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

知识点

常见问题

性能

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

知识点

常见问题

实践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值生成脚本。

其他部分

HTTP协议

考查HTTP协议的认知程度和基本知识。

知识点

常见问题

安全相关

考查前端及系统安全方面的知识,需要对各种攻击手段和防范措施有基本的了解。

知识点

常见问题

新技术

考核对HTML5及CSS3、Javascript 1.6的相关知识的吸收程度,借以考察对前端技术的关注度及兴趣。

知识点

常见问题

实践1

现有一个页面的代码如下:

<!DOCTYPE html>
<html>
    <head>
        <!-- head内容 -->
    </head>
    <body>
        <p id="message"><%= Request.QueryString["errorMessage"] %></p>
    </body>
</html>

该系统使用Session存放登录用户的信息,使用cookie中的session_id项来对应服务器的Session。

请设计一个攻击方案,使攻击者可以在不使用社会工程学的前提下,获得用户的帐号并成功登录到系统中。

实践2

现有一个简单的购物系统,有以下数据结构:

有以下的功能需求:

请根据上面的信息,请设计以下功能的url结构以及相应的HTTP Method,url中的参数使用{xxx}的形式表示:

功能 Method URL
用户登录界面
用户登录提交地址
根据category查看Product列表
查看Product详细信息
购买Product
用户查看自己的BuyRecord

要求尽可能使每个URL语义化,便于用户的记忆和分享。