前端工程师面试题

前端工程师面试题（精选6篇）

篇1：前端工程师面试题

HTML+CSS

1.对WEB标准以及W3C的理解与认识

标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外链css和js脚本、结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更广泛的设备所访问、更少的代码和组件，容易维护、改版方便，不需要变动页面内容、提供打印版本而不需要复制内容、提高网站易用性;

2.xhtml和html有什么区别

HTML是一种基本的WEB网页设计语言，XHTML是一个基于XML的置标语言

最主要的不同：

XHTML 元素必须被正确地嵌套。

XHTML 元素必须被关闭。

标签名必须用小写字母。

XHTML 文档必须拥有根元素。

3.Doctype? 严格模式与混杂模式-如何触发这两种模式，区分它们有何意义?

用于声明文档使用那种规范(html/Xhtml)一般为 严格 过度 基于框架的html文档

加入XMl声明可触发，解析方式更改为IE5.5 拥有IE5.5的bug

4.行内元素有哪些?块级元素有哪些?CSS的盒模型?

块级元素：div p h1 h2 h3 h4 form ul

行内元素: a b br i span input select

Css盒模型:内容，border ,margin，padding

5.CSS引入的方式有哪些? link和@import的区别是?

内联 内嵌 外链 导入

区别 ：同时加载

前者无兼容性，后者CSS2.1以下浏览器不支持

Link 支持使用javascript改变样式，后者不可

6.CSS选择符有哪些?哪些属性可以继承?优先级算法如何计算?内联和important哪个优先级高?

标签选择符 类选择符 id选择符

继承不如指定 Id>class>标签选择

后者优先级高

7.前端页面有哪三层构成，分别是什么?作用是什么?

结构层 Html 表示层 CSS 行为层 js

8.css的基本语句构成是?

选择器{属性1:值1;属性2:值2;……}

9.你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么?

Ie(Ie内核) 火狐(Gecko) 谷歌(webkit) opear(Presto)

10.写出几种IE6 BUG的解决方法

1.双边距BUG float引起的 使用display

2.3像素问题 使用float引起的 使用dislpay:inline -3px

3.超链接hover 点击后失效 使用正确的书写顺序 link visited hover active

4.Ie z-index问题 给父级添加position:relative

5.Png 透明 使用js代码 改

6.Min-height 最小高度 !Important 解决’

7.select 在ie6下遮盖 使用iframe嵌套

8.为什么没有办法定义1px左右的宽度容器(IE6默认的行高造成的，使用over:hidden,zoom:0.08 line-height:1px)

11.

标签上title与alt属性的区别是什么?

Alt 当图片不显示是 用文字代表。

Title 为该属性提供信息

12.描述css reset的作用和用途。

Reset重置浏览器的css默认属性 浏览器的品种不同，样式不同，然后重置，让他们统一

13.解释css sprites，如何使用。

Css 精灵 把一堆小的图片整合到一张大的图片上，减轻服务器对图片的请求数量

14.浏览器标准模式和怪异模式之间的区别是什么?

盒子模型 渲染模式的不同

使用 window.top.document.compatMode 可显示为什么模式

15.你如何对网站的文件和资源进行优化?期待的解决方案包括：

文件合并

文件最小化/文件压缩

使用CDN托管

缓存的使用

16.什么是语义化的HTML?

直观的认识标签 对于搜索引擎的抓取有好处

17.清除浮动的几种方式，各自的优缺点

1.使用空标签清除浮动 clear:both(理论上能清楚任何标签，，，增加无意义的标签)

2.使用overflow:auto(空标签元素清除浮动而不得不增加无意代码的弊端,,使用zoom:1用于兼容IE)

3.是用afert伪元素清除浮动(用于非IE浏览器)

Javascript

1.javascript的typeof返回哪些数据类型

Object number function boolean underfind

2.例举3种强制类型转换和2种隐式类型转换?

强制(parseInt,parseFloat,number)

隐式(== - ===)

3.split join() 的区别

前者是切割成数组的形式，后者是将数组转换成字符串

4.数组方法pop() push() unshift() shift()

Push()尾部添加 pop()尾部删除

Unshift()头部添加 shift()头部删除

5.事件绑定和普通事件有什么区别

6.IE和DOM事件流的区别

1.执行顺序不一样、

2.参数不一样

3.事件加不加on

4.this指向问题

7.IE和标准下有哪些兼容性的写法

Var ev = ev || window.event

document.documentElement.clientWidth || document.body.clientWidth

Var target = ev.srcElement||ev.target

8.ajax请求的时候get 和post方式的区别

一个在url后面 一个放在虚拟载体里面

有大小限制

安全问题

应用不同 一个是论坛等只需要请求的，一个是类似修改密码的

9.call和apply的区别

Object.call(this,obj1,obj2,obj3)

Object.apply(this,arguments)

10.ajax请求时，如何解释json数据

使用eval parse 鉴于安全性考虑 使用parse更靠谱

11.b继承a的方法

12.写一个获取非行间样式的函数

function getStyle(obj,attr,value)

{

if(!value)

{

if(obj.currentStyle)

{

return obj.currentStyle(attr)

}

else

{

obj.getComputedStyle(attr,false)

}

}

else

{

obj.style[attr]=value

}

}

复制代码

13.事件委托是什么

让利用事件冒泡的原理，让自己的所触发的事件，让他的父元素代替执行!

14.闭包是什么，有什么特性，对页面有什么影响

闭包就是能够读取其他函数内部变量的函数。

blog.csdn.net/gaoshanwudi/article/details/7355794 此链接可查看(问这个问题的不是一个公司)

15.如何阻止事件冒泡和默认事件

canceBubble return false

16.添加 删除 替换 插入到某个接点的方法

obj.appendChidl()

obj.innersetBefore

obj.replaceChild

obj.removeChild

17.解释jsonp的原理，以及为什么不是真正的ajax

动态创建script标签，回调函数

Ajax是页面无刷新请求数据操作

18.javascript的本地对象，内置对象和宿主对象

本地对象为array obj regexp等可以new实例化

内置对象为gload Math 等不可以实例化的

宿主为浏览器自带的document,window 等

19.document load 和document ready的区别

Document.onload 是在结构和样式加载完才执行js

Document.ready原生种没有这个方法，jquery中有 $().ready(function)

20.”==”和“===”的不同

前者会自动转换类型

后者不会

21.javascript的同源策略

一段脚本只能读取来自于同一来源的窗口和文档的属性，这里的同一来源指的是主机名、协议和端口号的组合

22.编写一个数组去重的方法

function oSort(arr)

{

var result ={};

var newArr=[];

for(var i=0;i

{

if(!result[arr[i]])

{

newArr.push(arr[i])

result[arr[i]]=1

}

}

return newArr

}

复制代码

23.排序算法

快速排序function oSort(arr)

{

if(arr.length<=1)

{

return arr

}

var left=[];

var right=[];

var oNum = Math.floor(arr.length/2);

var oNumVode = arr.splice(oNum,1);

for(var i=0;i

{

if(arr[i]

{

left.push(arr[i])

}

else

{

right.push(arr[i])

}

}

return oSort(left).concat([oNumVode],oSort(right))

}

冒泡排序 var array = [5, 4, 3, 2, 1];

var temp = 0;

for (var i = 0; i < array.length; i++)

{

for (var j = 0; j < array.length - i; j++)

{

if (array[j] >array[j + 1])

{

temp = array[j + 1];

array[j + 1] = array[j];

array[j] = temp;

}

}

}

复制代码

[前端工程师面试题]

篇2：前端工程师面试题

Doctype作用?严格模式与混杂模式如何区分?它们有何意义?

HTML5 为什么只需要写 ?

行内元素有哪些?块级元素有哪些? 空(void)元素有那些?

页面导入样式时，使用link和@import有什么区别?

介绍一下你对浏览器内核的理解?

常见的浏览器内核有哪些?

html5有哪些新特性、移除了那些元素?如何处理HTML5新标签的浏览器兼容问题?如何区分 HTML 和 HTML5?

简述一下你对HTML语义化的理解?

HTML5的离线储存怎么使用，工作原理能不能解释一下?

浏览器是怎么对HTML5的离线储存资源进行管理和加载的呢?

请描述一下 cookies，sessionStorage 和 localStorage 的区别?

iframe有那些缺点?

Label的作用是什么?是怎么用的?(加 for 或 包裹)

HTML5的form如何关闭自动完成功能?

如何实现浏览器内多个标签页之间的通信? (阿里)

webSocket如何兼容低浏览器?(阿里)

页面可见性(Page Visibility)API 可以有哪些用途?

如何在页面上实现一个圆形的可点击区域?

实现不使用 border 画出1px高的线，在不同浏览器的Quirksmode和CSSCompat模式下都能保持同一效果。

网页验证码是干嘛的，是为了解决什么安全问题?

tite与h1的区别、b与strong的区别、i与em的区别?

CSS

介绍一下标准的CSS的盒子模型?与低版本IE的盒子模型有什么不同的?

CSS选择符有哪些?哪些属性可以继承?

CSS优先级算法如何计算?

CSS3新增伪类有那些?

如何居中div?如何居中一个浮动元素?如何让绝对定位的div居中?

display有哪些值?说明他们的作用。

position的值relative和absolute定位原点是?

CSS3有哪些新特性?

请解释一下CSS3的Flexbox(弹性盒布局模型),以及适用场景?

用纯CSS创建一个三角形的原理是什么?

一个满屏 品 字布局 如何设计?

常见兼容性问题?

li与li之间有看不见的空白间隔是什么原因引起的?有什么解决办法?

经常遇到的浏览器的兼容性有哪些?原因，解决方法是什么，常用hack的技巧 ?

为什么要初始化CSS样式。

absolute的containing block计算方式跟正常流有什么不同?

CSS里的visibility属性有个collapse属性值是干嘛用的?在不同浏览器下以后什么区别?

position跟display、margin collapse、overflow、float这些特性相互叠加后会怎么样?

对BFC规范(块级格式化上下文：block formatting context)的理解?

CSS权重优先级是如何计算的?

请解释一下为什么会出现浮动和什么时候需要清除浮动?清除浮动的方式

移动端的布局用过媒体查询吗?

使用 CSS 预处理器吗?喜欢那个?

CSS优化、提高性能的方法有哪些?

浏览器是怎样解析CSS选择器的?

在网页中的应该使用奇数还是偶数的字体?为什么呢?

margin和padding分别适合什么场景使用?

抽离样式模块怎么写，说出思路，有无实践经验?[阿里航旅的面试题]

元素竖向的百分比设定是相对于容器的高度吗?

全屏滚动的原理是什么?用到了CSS的那些属性?

什么是响应式设计?响应式设计的基本原理是什么?如何兼容低版本的IE?

视差滚动效果，如何给每页做不同的动画?(回到顶部，向下滑动要再次出现，和只出现一次分别怎么做?)

::before 和 :after中双冒号和单冒号 有什么区别?解释一下这2个伪元素的作用。

如何修改chrome记住密码后自动填充表单的黄色背景 ?

你对line-height是如何理解的?

设置元素浮动后，该元素的display值是多少?(自动变成display:block)

怎么让Chrome支持小于12px 的文字?

让页面里的字体变清晰，变细用CSS怎么做?(-webkit-font-smoothing: antialiased;)

font-style属性可以让它赋值为“oblique” oblique是什么意思?

position:fixed;在android下无效怎么处理?

如果需要手动写动画，你认为最小时间间隔是多久，为什么?(阿里)

display:inline-block 什么时候会显示间隙?(携程)

overflow: scroll时不能平滑滚动的问题怎么处理?

有一个高度自适应的div，里面有两个div，一个高度100px，希望另一个填满剩下的高度。

png、jpg、gif 这些图片格式解释一下，分别什么时候用。有没有了解过webp?

什么是Cookie 隔离?(或者说：请求资源的时候不要让它带cookie怎么做)

style标签写在body后与body前有什么区别?

JavaScript

介绍JavaScript的基本数据类型。

说说写JavaScript的基本规范?

JavaScript原型，原型链 ? 有什么特点?

JavaScript有几种类型的值?(堆：原始数据类型和 栈：引用数据类型)，你能画一下他们的内存图吗?

Javascript如何实现继承?

Javascript创建对象的几种方式?

Javascript作用链域?

谈谈This对象的理解。

eval是做什么的?

什么是window对象? 什么是document对象?

null，undefined的区别?

写一个通用的事件侦听器函数(机试题)。

[“1”, “2”, “3”].map(parseInt) 答案是多少?

关于事件，IE与火狐的事件机制有什么区别? 如何阻止冒泡?

什么是闭包(closure)，为什么要用它?

javascript 代码中的”use strict”;是什么意思 ? 使用它区别是什么?

如何判断一个对象是否属于某个类?

new操作符具体干了什么呢?

用原生JavaScript的实现过什么功能吗?

Javascript中，有一个函数，执行时对象查找时，永远不会去查找原型，这个函数是?

对JSON的了解?

[].forEach.call($$(“*”),function(a){ a.style.outline=“1px solid #”+(~~(Math.random()*(1<<24))).toString(16) }) 能解释一下这段代码的意思吗?

js延迟加载的方式有哪些?

Ajax 是什么? 如何创建一个Ajax?

同步和异步的区别?

如何解决跨域问题?

页面编码和被请求的资源编码如果不一致如何处理?

模块化开发怎么做?

AMD(Modules/Asynchronous-Definition)、CMD(Common Module Definition)规范区别?

requireJS的核心原理是什么?(如何动态加载的?如何避免多次加载的?如何 缓存的?)

让你自己设计实现一个requireJS，你会怎么做?

谈一谈你对ECMAScript6的了解?

ECMAScript6 怎么写class么，为什么会出现class这种东西?

异步加载的方式有哪些?

documen.write和 innerHTML的区别?

DOM操作怎样添加、移除、移动、复制、创建和查找节点?

.call() 和 .apply() 的含义和区别?

数组和对象有哪些原生方法，列举一下?

JS 怎么实现一个类。怎么实例化这个类

JavaScript中的作用域与变量声明提升?

如何编写高性能的Javascript?

那些操作会造成内存泄漏?

JQuery的源码看过吗?能不能简单概况一下它的实现原理?

jQuery.fn的init方法返回的this指的是什么对象?为什么要返回this?

jquery中如何将数组转化为json字符串，然后再转化回来?

jQuery 的属性拷贝(extend)的实现原理是什么，如何实现深拷贝?

jquery.extend 与 jquery.fn.extend的区别?

jQuery 的队列是如何实现的?队列可以用在哪些地方?

谈一下Jquery中的bind(),live(),delegate(),on()的区别?

JQuery一个对象可以同时绑定多个事件，这是如何实现的?

是否知道自定义事件。jQuery里的fire函数是什么意思，什么时候用?

jQuery 是通过哪个方法和 Sizzle 选择器结合的?(jQuery.fn.find()进入Sizzle)

针对 jQuery性能的优化方法?

Jquery与jQuery UI有啥区别?

JQuery的源码看过吗?能不能简单说一下它的实现原理?

jquery 中如何将数组转化为json字符串，然后再转化回来?

jQuery和Zepto的区别?各自的使用场景?

针对 jQuery 的优化方法?

Zepto的点透问题如何解决?

jQueryUI如何自定义组件?

需求：实现一个页面操作不会整页刷新的网站，并且能在浏览器前进、后退时正确响应。给出你的技术实现方案?

如何判断当前脚本运行在浏览器还是node环境中?(阿里)

移动端最小触控区域是多大?

jQuery 的 slideUp动画 ，如果目标元素是被外部事件驱动, 当鼠标快速地连续触发外部元素事件, 动画会滞后的反复执行，该如何处理呢?

把 Script 标签 放在页面的最底部的body封闭之前 和封闭之后有什么区别?浏览器会如何解析它们?

移动端的点击事件的有延迟，时间是多久，为什么会有? 怎么解决这个延时?(click 有 300ms 延迟,为了实现safari的双击事件的设计，浏览器要知道你是不是要双击操作。)

知道各种JS框架(Angular, Backbone, Ember, React, Meteor, Knockout…)么? 能讲出他们各自的优点和缺点么?

Underscore 对哪些 JS 原生对象进行了扩展以及提供了哪些好用的函数方法?

解释JavaScript中的作用域与变量声明提升?

那些操作会造成内存泄漏?

JQuery一个对象可以同时绑定多个事件，这是如何实现的?

Node.js的适用场景?

(如果会用node)知道route, middleware, cluster, nodemon, pm2, server-side rendering么?

解释一下 Backbone 的 MVC 实现方式?

什么是“前端路由”?什么时候适合使用“前端路由”? “前端路由”有哪些优点和缺点?

知道什么是webkit么? 知道怎么用浏览器的各种工具来调试和debug代码么?

如何测试前端代码么? 知道BDD, TDD, Unit Test么? 知道怎么测试你的前端工程么(mocha, sinon, jasmin, qUnit..)?

前端templating(Mustache, underscore, handlebars)是干嘛的, 怎么用?

简述一下 Handlebars 的基本用法?

简述一下 Handlerbars 的对模板的基本处理流程， 如何编译的?如何缓存的?

用js实现千位分隔符?(来源：前端农民工，提示：正则+replace)

检测浏览器版本版本有哪些方式?

篇3：前端工程师面试题

1 Web components标准及其发展

Web组件实际上是一种可被重用的构件, 它是由谷歌工程师开发, 在生产标准和W3C规范下, 可以在Web程序和文档中创建它。其核心目标就是将Web应用程序的开发进行革新, 使之以软件工程模式来进行组件开发。在该组件中可进行封装, 同时也能够对HTML元素进行操作。另外Firefox等浏览器则可以通过手工设置来对Web组件技术给予支持。而IE浏览器对Web组件技术的支持度方面则相对较低。Web组件的核心就是将有关UI元素进行组件封装, 也就是将JS、HTML以及CSS等进行封装。在应用时只需要调用这个组件对象就可以实现, 而不需要导出粘贴相应的源码。通常, 这个组件实际上就是一种模板, 所涉及到的元素包括了模板 (template) , Shadow DOM, 导入以及自定义元素。

2 目前前端工程的发展与问题

2.1 前端工程初期

1994年在PHP技术出现之后, 可以将数据转化成HTML模板, 并进行渲染。两年后, W3C组织正式推出CSS1.0规范。在此规范下, 可以支持开发者能够利用外联文件模式对之前的HTML样式进行修改, 而之前要进行修改, 需要在对应的HTML网页上进行修改, 这样维护就变得简单, 页面也会更加简洁, 此时HTML和CSS以及模板语言这三个技术的融合开始得到广泛应用。在技术的支持下, 一些后台也能够通过HTML来实现。之前的Web也从最初的展示工具蜕变成Web App, 此后利用脚本语言进行Web开发已经成为趋势。

2.2 Web2.0时期

2005年之后, 异步的Java Script与XML技术 (ajax) 的出现彻底改变了javascript的地位。在ajax出现之前, 前端后端之间的沟通需要提交表单, 并且网页需要跳转。ajax通过javascript就可以在浏览器内随时与后端进行连接, 用户基本上感觉不到页面的变化。不仅浏览器和服务器的交流大大降低, 客户端也可以更快速的响应并且返回数据。

2.3 工程化前端时期

在这个阶段, 前台和后台的功能开始变得十分明确, 它们之间的交互主要是基于相应的接口来实现, 只要对接口的规格进行规范, 就能够将前台和后台进行分离。在前台, 可以通过字段来研发相应的接口, 确保录入的数据具有正确性。当后台开发成功之后, 就能够进行统一测试。然而随着网络业务的丰富, 所需的功能也开始增多, 这种开发模式的优势就很难体现, 即使是一个单页面程序, 在复杂交互环境下, 代码也变得十分的庞大。为了改变这种境况, 在前台开始出现了基于MVC架构设计的前端框架, 在此框架的支持下, 前台的功能可以变得更加丰富, 代码规模也以几何倍数进行增长。于是对应的模块化概念开始出现, 当时AMD和CMD这两个模块化规范较为成熟, 它们的关键思想就在于在开发前台代码时, 引入模块化的设计思路。

3 基于Web components标准的前端工程组件化的改进

3.1 改进的组件化框架介绍

目前改进框架的方式有两种:

(1) 提前自定义组件命名规范, 然后再结合该规范进行开发。在框架渲染环节, 所匹配的标签也要根据之前定义的命名规范进行, 如果匹配成功就可以进行渲染。

(2) 不限制标签名称, 开发人员能够结合自身所需将标签名改成自己熟悉的样式, 比如分割线、驼峰等。不过这些标签需要有一个自定义环节, 也就是将其自定义成相应的组件。综合对比上述两种方式可知, 在自定义组件的优化方面, 这两种方式存在着各自的利弊, 都没有充分遵循W3C模式。这就意味着需要开发一套能够融合这两种方案优势的一种新框架。目前Web组件标准虽然能够提供相应的接口, 可在浏览器上支持用户自定义的一些元素, 然而依然存在着一定的兼容性问题。Polymer通过Polyfill技术对老旧浏览器进行的修补, 通过这些修补使之能够支持新浏览器的特性。而Polymer在运行时, 一旦涉及到element解析共组, 就会对整体性能产生负面影响, 另外对浏览器的支持, 尤其是手机的支持都存在很大缺陷, 在某些品牌的手机上, 甚至不能够使用。而本次通过对框架进行优化设计, 可为设计者提供一些自定义的元素, 从而更好的解决上述的一些兼容性问题。本文利用W3C所提供的标准规范, 以及使用JS算法在底层对该组件进行封装, 然后利用标签来引入框架并在容器中创建相应的Dom元素。

3.2 改进的组件化框架工作原理

此优化之后的框架实际上就是一种MVVC结构程序, 整个程序从最上层分为两部分:

(1) 全局设计。主要涉及到全局性接口以及默认参数等;

(2) 元素实例。涉及到实例的初始化和各种接口的设计。

如图1所示, 在实例化时, 其核心就是将模型和视图进行融合, 该思路显然和MVVC框架设计思路一致, 主要工作包括:第一, 对data进行监听, 可通过Obsever来实现, 能实施察觉数据项的变化。第二, 将Template进行解析处理, 使之成为Document Fragment, 接着在对directive进行解析, 并获取依赖它的一些数据项和更新策略。第三, 基于Watcher将上述两个环节进行融合, 就能够获得依赖Directive的数据项变化情况, 一旦有数据变化, 那么Observer就能侦测到, 然后触发视图更新, 进而实现关联性。

在此框架中涉及到的流程则是元素的加载、注册、更新和销毁。

(1) 加载:通过对class进行遍历, 查看相应的element元素, 然后调用create方法, 将子元素和标签类型等参数传入。

(2) 注册:执行create Element Class方法, 于是就能够产生element Class, 该元素可备用。

(3) 更新:当数据和模型产生变化时, 能够迅速的从视图中进行反馈, 此时可以对DOM进行操作, 而它的频繁操作也会对最终的性能产生负面影响。

(4) 销毁:只需要从根节点上切断需要删除的元素实例即可。

3.3 改进的组件化框架编译原理

框架并不可独立运行, 只有在编译之后, 形成相应的构造函数才能够运行。通过编译工具, 可以很好的提升前台程序的性能, 并能够很好的进行资源加载, 这里的加载内容涉及到同步、异步和预加载以及合并、内嵌等, 另外还包括规范的开发、代码的部署和模块化、自动化工具的开发等。在编译框架时, 首先要对html文件进行分析, 查看是否存在着自定义Element, 如果发现了存在着这些元素, 就需要从对应文件中提取template和style以及script等。然后对style部分进行封装处理, 或者进行less编译, 生成新的样式文件。对template文件进行分析, 查看它是否存在着依赖元素, 然后将其转换成js代码。而在Script环节, 则可以将之前模板中编译出来的function append文件进行装载。如果没有发现element, 那么该文件就是一个依赖link的文件, 并将其进行标记。

4 结论

本文从W3C的Web components标准入手, 设计了一种高性能, 敏捷开发, 易维护的开发方案。这个方案封装了Web components标准, 但不是单纯的封装, 而是将浏览器的兼容性以及虚拟DOM渲染的性能考虑在内, 实现了一种浏览器兼容性更强, 书写方式和代码结构更加标准, 数据绑定视图和模型的前端框架。

摘要：随着互联网的普及, 网速的提升, 浏览器性能的提高, 前端技术的迅速发展, 出现了各式各样的前端组件, 在这样的环境下, W3C提出了Web components标准。本文首先对W3C的Web components标准进行了阐述, 并对前端工程的组件化发展问题进行了分析, 最后应用Web components标准提出了一种新的前端工程组件化方案, 提高了前端的开发效率, 增强了Web应用的可维护性和扩展性。

关键词：Web components标准,前端工程组件化

参考文献

[1]王政.Web前端开发技术以及优化研究[J].电脑知识与技术, 2013 (22) .

[2]魏娜.Web前端开发技术研究[J].现代计算机 (专业版) , 2011 (29) .

篇4：数据集中工程前端系统设计及实现

关键词:数据集中工程 前端系统设计

1 数据集中工程前端系统的设计

数据集中工程的总体目标是将原来各省分行独自处理保存的业务数据上收到总行数据中心,从而实现帐务数据、核心业务的集中处理,以满足未来业务发展的需要。

按照数据集中工程的总体规划,建立总行数据中心(在北京、上海两地分别建立两个数据中心,并互联以满足业务的需要),各分行原有的帐务数据和核心业务系统功能全部上收至总行数据中心的DCC主机;为了将各省分行的交易包括总行统一的业务和各分行特色性业务接入到总行DCC主机,总行统一开发大前置系统部署于各个分行,前端系统通过大前置系统将各分行的交易发送到总行数据中心DCC主机。

前端软件系统按结构设计分为前端平台系统、前端核心系统和前端特色业务系统三部分。

1.1 前端平台系统:包括操作系统、数据库、中间件等平台软件。其配置标准为:

1.2 前端核心系统指在支行网点运行的,应用于柜员工作站的全行统一的业务系统。它通过网络系统与前置机进行数据交互,完成交易的处理功能。包括柜员工作站软件、授权/消息服务程序、通讯服务程序、前端数据库四大部分。

1.3 前端特色业务系统是指由前台实现的核心业务系统以外的业务功能。

2 数据集中工程前端系统的实现

数据集中工程前端系统的核心是前端核心系统,主要业务是由柜员工作站软件和授权/消息服务程序完成的。由于决大多数业务根据其特点可以分类,具有统一的模式,因此每一类业务可以采用统一的模板来分类处理,在不同的模板存储不同的参数,形成各种交易。前端应用系统的设计是通过使用两种类型的源代码文件(过程文件和资源文件),存储每个交易的具体交易参数为交易模板,构造交易驱动器来描述同一类的交易流程,突现流程概念,从交易模板获取具体交易参数,实现具体交易功能。

交易驱动器是一个前端交易流程控制程序,完成从交易初始化到交易结束之间各个功能模块的动态调用,大部分的交易可以由一个通用的交易驱动器实现,特殊交易可以编写特殊的交易驱动器前端应用系统需要实现的功能由交易驱动器、资源和过程以及其它手工编制的程序部件和功能函数配合完成。交易驱动器的主要功能是根据交易的信息,调度交易所需资源和过程实现一般交易的处理流程。

3 前端系统的安全模块和安全规范

数据集中工程(简称DCC)是一个三层结构(前端/渠道、前置系统、DCC主机)的分布式系统,在跨物理系统进行数据传输时,毫无疑问会涉及到数据保密的问题。如何合理、可靠、高效地实现数据传输的保密,是前端系统在和前置系统连接时必须考虑的重要问题。

前置系统在考虑和前端的安全问题时,是以三级密钥体系和动态交换工作密钥的安全机制为基础,并在其上进行了扩展增强,最终形成了数据集中下的前置系统和前端系统的安全规范。

3.1 三级密钥体系 密钥如何管理、分发等问题历来是分布式系统的安全体系下的重点和难点。DCC的安全体系在充分考虑加密的强度的同时,还需要考虑管理维护的简便性,以及和DCC主机的安全机制兼容等问题。经过充分对比论证,制定了目前的以masterkey作为基础密钥加密保护basekey和workkey,basekey用于身份认证和动态交换workkey,workkey用于加/解密和MAC校验保护交易数据的三级密钥体系结构。

在此密钥体系下,针对通讯节点而设置的masterkey和basekey都是通过非计算机网络的其它渠道(如密码信封)分发的,不存在因网络传输泄密的问题。masterkey在存储时是通过安全模块采用固定的密钥加密保护的,basekey则是通过明文的masterkey加密保护存储的;针对通讯节点而动态交换的workkey是由masterkey加密保护存放的。

3.2 身份认证和密钥同步 对于前置系统来说,如何鉴别某个和它连接的外部系统通讯节点是否合法呢?由于我们在前置系统上登记了所有合法的和它连接的通讯节点号(即前置系统的所有对等通讯节点号),以及和这些通讯节点中的每一个约定的basekey,而这些信息是通过非网络的方式约定的,可被我们认为是保密的,可靠的。因此,我们可以是此为依据来鉴别某个通讯节点的合法性。

一个通讯节点在和前置系统进行所有的交易前,必须首先向前置系统申请密钥同步(对workkey进行同步,后续的交易数据将以此密钥进行加密,MAC保护传输),在进行密钥同步的同时,前置系统可以对发起密钥同步的通讯节点的身份进行:双方按照约定的算法,申请密钥同步的通讯节点用basekey加密其通讯节点号,而前置系统则使用basekey解密,如果解得的通讯节点号与所用的basekey组合后得到的(通讯节点号、basekey)对在前置系统的安全数据库中能够找到匹配项,则说明该通讯节点合法,身份认证通过,前置系统通讯节点的密钥服务器为该通讯节点动态产生workkey,刷新安全环境(数据库和共享内存中的缓存)中的workkey,并将其用basekey加密后返回给该通讯节点。

申请密钥同步的通讯节点在接收到前置系统通讯节点的密钥服务器返回的workkey后,先使用basekey解密,得到workkey明文后,再用本通讯节点的masterkey加密并存放到安全环境(数据库和共享内存中的缓存)中。

身份认证和密钥同步可通过随安全模块发布的工具程序来进行,无需再做什么开发工作,仅需要对安全模块进行正确的配置即可。

3.3 安全API 安全API是安全模块把安全加/解密,MAC校验功能开放给其它需要安全通讯功能的应用程序使用的接口。它定义了应用程序的开发模型和编程接口。

3.4 安全模块的运转机制 安全模块主要由安全工具和安全API两部分构成,这两部分在建立安全通讯环境的过程中起到了不同作用。运行在不同的通讯节点上的安全工具程序密钥申请客户端applykey和密钥分发服务器keyserver互配合,来完成workkey密钥的同步功能;在此之前,还需要通过inst_node、setmkey工具来添加一个本地通讯节点和设置它的masterkey,通过addpeernode工具来设置该通讯节点的对等通讯节点的basekey,通过sec_init启动并初始化安全环境。

在sec_init初始化安全环境成功之后,使用安全API的应用程序就可以运行进行数据的加/解密了。但是只有在本地通讯节点和它的对等通讯节点的workkey正确同步之后,数据的加/解密才能正确进行,否则,将会导致数据加/解密错误。

安全工具程序和安全API是相辅相成,不可分割的。安全工具程序是构建安全子系统的基础,它创建和维护安全API得以运行的安全环境;安全API则为应用程序使用安全子系统的数据保护功能提供了标准编程接口。

4 结束语

篇5：前端面试题

2.简述HTML经常使用的标签和作用。

Div/a/p/span/li/ul/ol/table/tr/td

3.你认为最常遇到的兼容Bug有哪些?有哪些问题是你认为解决起来最麻烦的?

IE6 PNG

IE6 Fixed

4.块级元素和行内元素都有哪些? 行内元素有哪些特点?

5.介绍所知道的CSS hack技巧(如：_，*，+，9，!important 之类)

6.CSS定位方式有哪些?position属性的值有哪些?他们之间的区别是什么?

在CSS中关于定位的内容是：position:relative | absolute | static | fixed

 static 没有特别的设定，遵循基本的定位规定，不能通过z-index进行层次分级。 relative 不脱离文档流，参考自身静态位置通过 top,bottom,left,right 定位，并且可以通过z-index进行层次分级。

 absolute 脱离文档流，通过 top,bottom,left,right 定位。选53D6其最近的父级定位元素，当父级 position 为 static 时，absolute元素将以body坐标原点进行定位，可以通过z-index进行层次分级。

 fixed 固定定位，这里他所固定的对像是可视窗口而并非是body或是父级元素。可通过z-index进行层次分级。

7.函数的几种定义方法

function a(){},var a = function(){}

8.对象的定义方法

a = new Object(), a = {}

9.类的定义方法（prototype）（继承）

Var a = function(){}

a.prototype = {}

new a();

10.this 关键字的指向

obj.foo()== obj

foo()== window;

new obj.foo()== obj //方法调用模式,this指向obj //函数调用模式,this指向window //构造器调用模式, this指向新建立对象

foo.call(obj)== obj;//APPLY调用模式,this指向obj

11.DOM操作

在hello,将hello替换成“你好”

将Body的innerHTML重写和将的innerHTML重写有何区别

12.什么是闭包，及其作用

13.事件绑定的几种方法，事件冒泡

14.Ajax/json/json0070

15.异步ajax的优缺点

优点：

 相对于同步ajax：不会造成UI卡死，用户体验好。

 相对于刷新页面，省流量

缺点：

 后退按钮无效；

 多个请求同时触发时，由于回调时间不确定，会造成混乱，避免这种混乱需

要复杂的判断机制。

 搜索引擎不友好

 数据安全

16.常用JS框架，是否使用过jQuery，jQuery的优点。17.18.JS用了多久，介绍一下自己做过的JS项目，19.开发调试工具和方法（编辑器、浏览器

20.类、函数、对象（代码表达）

21.闭包（setTimeout）（产生两个首尾相连的计时器）（使用for循环产生10个计时器）||

22.Jquery Mobile

23.HTML5/CSS3

24.是否听说和理解webapp

1.应届

25.在行的语言，优缺点

26.介绍项目经验，合作开发、独立开发

27.编程的重要知识

28.开发过程中遇到困难，如何解决。

29.有没有个人/开源项目

30.前端开发（HTML/CSS/

篇6：前端工程师面试题

前端界新的行业标准, 框架, 库不断在更新和新增，正如赫门在深JS大会上《前端服务化之路》主题演讲中说的一句话：“每18至24个月，前端都会难一倍”，这些变化使前端的能力更加丰富、创造的应用也会更加完美，所以前端程序员们，继续学习吧。

在网上发现此题目很多的分支，但都是直接拷贝粘贴，连答案和格式都没去审查修改，实在无语。我也收到许多微博私信的鼓励和更正题目信息，我这么粗心大意的人也觉得应该更新一下题目和答案，希望能帮助到更多的前端开发者。

面试有几点需注意：

面试题目： 根据你的等级和职位变化，入门级到专家级：广度↑、深度↑。

题目类型： 技术视野、项目细节、理论知识，算法，开放性题，工作案例。

细节追问： 可以确保问到你开始不懂或面试官开始不懂为止，这样可以大大延展题目的区分度和深度，知道你的实际能力。因为这种关联知识是长时期的学习，绝对不是临时记得住的。

回答问题再棒，面试官(可能是你面试职位的直接领导)，会考虑我要不要这个人做我的同事?所以态度很重要。(感觉更像是相亲)

资深的工程师能把absolute和relative弄混，这样的人不要也罢，因为团队需要的是：你这个人具有可以依靠的才能(靠谱)。

前端开发面试知识点大纲：

作为一名前端工程师，无论工作年头长短都应该必须掌握的知识点：

备注：

HTML

Doctype作用? 严格模式与混杂模式如何区分?它们有何意义?

行内元素有哪些?块级元素有哪些? 空(void)元素有那些?

link 和@import 的区别是?

浏览器的内核分别是什么?

常见兼容性问题?

HTML5有哪些新特性、移除了那些元素?如何处理HTML5新标签的浏览器兼容问题?如何区分 HTML 和 HTML5?

语义化的理解?

HTML5的离线储存?

(写)描述一段语义的html代码吧。

iframe有那些缺点?

请描述一下 cookies，sessionStorage 和 localStorage 的区别?