Web前端技术

Web前端技术（共9篇）

Web前端技术 篇1

1概述

2005年以后,互联网进入Web2.0时代,Web前端由此发生了翻天覆地的变化。和Web1.0时代相比,网站的主要内容不再只是静态的,网页也不再只是承载单一的文字和图片,各种富媒体让网页的内容更加生动,网页上软件化的交互形式为用户提供了更好的使用体验,这些都是基于前端技术实现的。

Web前端开发是从网页制作演变而来的,之前使用Photoshop和Dreamweaver就可以方便的制作网页。但如果要让网页的内容更加生动,提供更多交互形式的用户体验,以满足企业级别的需求。那么还需要掌握基本的Web前端开发技术,其中最基础的是HTML、CSS和JavaScript。html是内容,css是表现,javascript是行为。在此基础上则延伸了大量的插件、框架和模板,丰富了Web前端的交互内容,增加了Web的开发效率。

这里介绍Web前端开发所需要用到一些的重要技术。

2DIV+CSS、JavaScript 、HTML5和jQuery

2.1 DIV+CSS

DIV+CSS是WEB设计标准,它是一种网页的布局方法,而网页的布局不仅仅影响到网页的美观,也直接决定了网页重构的难度,因此在网页开发中占有重要的位置。与传统中通过表格(table)布局定位的方式不同,它可以实现网页页面内容与表现相分离。

相对与传统的table, 采用DIV+CSS技术的网页,对于搜索引擎的收录更加友好。样式的调整更加方便现在YAHOO,MSN等国际门户网站,网易,新浪等国内门户网站,和主流的WEB2.0网站,均采用DIV+CSS的框架模式。

对于同一个页面视觉效果,采用CSS+DIV重构的页面容量要比TABLE编码的页面文件容量小得多,代码更加简洁,前者一般只有后者的1/2大小。对于一个大型网站来说,可以节省大量带宽,并且支持浏览器的向后兼容。

2.2 HTML5

HTML5是2012年才开始推出的新的网页设计语言,和HTML相比,HTML5赋予网页更好的意义和结构。基于HTML5开发的网页APP拥有更短的启动时间,更快的联网速度,这些全得益于HTML5 APP Cache,以及本地存储功能。

HTML5具有以下的优点:

易用性:新的HTML标签像<header>, <footer>,<nav>,<section>,<aside>等等,使得阅读者更加容易去访问内容。

视频和音频支持:HTML5为视频和音频的播放提供了便利,视频和音频标记的使用,可以带来顺畅的回放。内置支持的标题和副标题,把视频和音频元素添加到一个网站,比使用flash要更加的容易。

更好的交互:HTML5的Canvas标记,可以创建交互和先前由flash完成的动画制作。并且,和HTML5辨识能力一起,带来了常见的平板电脑操作手势,像点击和滑动进行缩放等,甚至允许创建移动游戏。

2.3 JavaScript

JavaScript是一种脚本编写语言,它采用小程序段的方式实现编程,像其它脚本语言一样,JavaScript也是一种解释性语言,因为JavaScript的运行不需要专门的编辑器,因此JavaScript通常用在客户端。使用它的目的是与HTML超文本标识语言、Java脚本语言一起实现在一个网页中链接多个对象,与网络客户交互作用,从而可以开发客户端的应用程序。

JavaScript具有很多优点:

动态性:JavaScript是动态的,它可以直接对用户或客户输入做出响应,无须经过Web服务程序。它对用户的反映响应,是采用以事件驱动的方式进行的。

跨平台性:JavaScript是依赖于浏览器本身,与操作环境无关,只要能运行浏览器的计算机,并支持JavaScript的浏览器就可以正确执行。

减少交互时间:网页上一些常用的功能,比如在注册时检测用户名输入有效性、两次输入密码是否一致等,如果这些功能都交给服务器来判断,不仅增加了服务器的负担,也同时耗费了网络流量,也相应的提高了系统的响应时间,而使用JavaScript,就可以在客户端完成这些操作。

2.4 jQuery框架

jQuery是对js(javascript)底层Dom操作封装的一个框架,它是轻量级的js库,封装了大量常用的DOM操作,使开发者在编写Dom操作相关程序的时候能够得心应手。jQuery

没有大量的专有对象,多为提供函数进行Dom操作。它使用户能更方便地处理HTML、events、实现动画效果,并且方便地为网站提供AJAX交互,它不是偏重于富客户端的框架,而是侧重于Dom编程。

jQuery是现在最流行的js框架,它有几个突出的亮点:一是支持CSS3的大量选择符,想定位或选择一个html元素简直轻而易举。二是灵活便捷的Ajax请求和回调操作。三是事件绑定功能,内部封装了很多事件,想统一为一个页面上的一些元素添加事件很方便,这也提高了复用性和可维护性,避免了页面中出现大量的html属性。合理的编码可以使html与js, css分离开,便于维护。

3 Bootstrap

快速构建一个美观且高品质的网站是所有开发者梦寐以求的事,但是开发一个好的网页前端不仅掌握需要大量的技巧,还需要丰富的设计经验,而Bootstrap的出现,则很好的解决了许多初学者面临的问题。

Bootstrap是Twitter推出的一个用于前端开发的开源工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架。它提供了丰富的元素和组件,并使得形式和功能结合得很好。Bootstrap的强大之处在于它对常见的CSS布局小组件和JavaScript插件都进行了完整且完善的封装,即使代码不是很理解,也轻松使用。

Bootstrap主要具有以下的优点:

网格系统:使用了目前比较流行的网格系统,灵活的网格系统可以让开发工作变得更简单,不仅可以使用核心默认的网格类,也可以去创建自己的,新的网格系统允许根据设备大小通过变量来声明。比如,可以针对桌面环境设置4列布局,针对平板电脑设置2列布局,针对手机设置1列布局。这样,就可以很容易地控制你的页面的跨设备显示效果。

响应式设计:根据不同的屏幕分辨率与上网设备,Bootstrap的布局与组件会做出响应,自动缩放。

扁平化和整洁的UI:Bootstrap采用了时下最为流行的扁平化设计风格,而扁平化带来的好处包括优化网站加载速度、有利于SEO搜索引擎优化、采用FontAwesome等字体类矢量网页图标。

基于LESS:可以更有效,更快速的创建CSS代码,大大简化了CSS的编写,并且降低了CSS的维护成本,就像它的名称所说的那样,LESS可以让我们用更少的代码做更多的事情。

4小结

前端开发的学习曲线是先快后慢,每一步的提高都不是一件容易的事情。在学习的过程中,一定要保持良好的习惯。比如,注意多写代码、和命名规范,保持好的html的文档结构,尽量优化html,css和js代码,多去关注网站性能优化的方式。

Web前端学习时间的长短和编写的熟练程度,仅仅是精通语言表现的一个方面。更重要的是要掌握这个语言的适用范围,整体构架,语法规则、功能分类等基础理论方面的知识,并能利用这方面的知识,用最科学的方法去解决现实中各种项目的各个问题。

Web前端技术 篇2

Web前端代码规范

此项目用于记录规范的、高可维护性的前端代码，这是通过分析 Github 众多前端代码库，总结出来的前端代码书写规范。

前端普适性规范 黄金定律

永远遵循同一套编码规范，可以是这里列出的，也可以是你自己总结的。如果你发现本

规范中有任何错误，敬请指正。

不管有多少人共同参与同一项目，一定要确保每一行代码都像是同一个人编写的。

项目命名

项目名全部采用小写方式，以中划线分隔，禁止驼峰式命名。比如：my-project-name 文件命名

文件命名参照上一条规则，多个单词组成时，采用中划线连接方式，比如说: error-report.html 有复数结构时，要采用复数命名法，比如说： scripts, styles, images, data-models

龙图教育，全球游戏50强教育品牌

文件名中只可由小写英文字母a~z、排序数字0~9或间隔符-组成，禁止包含特殊符号，比如空格、$等

为更好的表达语义，文件名使用英文名词命名，或英文简写。

不允许命名带有广告等英文的单词，例如ad,adv,adver,advertising，防止该模块被浏览器当成垃圾广告过滤掉。任何文件的命名均如此。

 index.shtml 引导页&首页  main.shtml 首页

 download.shtml 下载页面  act.html 活动列表页面  video.html 视频  cdkey.html CDKEY页面  base.css 基本样式  layout.css 框架布局  module.css 模块样式  global.css 全局样式  font.css 字体样式  index.css 首页样式  link.css 链接样式  print.css 打印样式

龙图教育，全球游戏50强教育品牌

HTML 规范

语法

使用四个空格的缩进，这是保证代码在各种环境下显示一致的唯一方式。

嵌套的节点应该缩进（四个空格）。

在属性上，使用双引号，不要使用单引号。

不要在自动闭合标签结尾处使用斜线-HTML5 规范 指出他们是可选的。

浅析Web前端开发技术 篇3

1 Web前端技术概述

1.1 Web前端技术概念

Web前端技术包括三个主要的因素:HTTL、CSS、Java Script.这三者之间虽然相互存在一定的关联, 但是在实际的运用过程中都具有自身的特点, 对代码质量的要求也存在一定的差异性。HTTL技术可以对超文本的结构进行一定的探索, 使得超文本语言在结构上更加完整, 将一些过时的标记及时取消, 内容和形式分离, 进行技术结构的改进之后, 生成的网页更加易于管理, 可提升用户体验。CSS, 即层叠样式表技术是用于增强网页样式的控制, 为相关的信息和网页的分析提供一定的允许条件, 是一种标记性的语言。这项技术的发展可以促进网页速度的提升, 对板块的维护和改善也具有一定的促进作用。Java Script技术则介于Java技术和HTTL技术之间, 在web的页面起着一定的嵌入作用, 对页面中的对象和事件进行一定的编程。这种技术出现之后, 信息和用户之间的关系不仅仅是简单的显示和浏览的关系, 同时可以将实时、动态的数据进行一定的表达。Java Script可以和HTML技术进行结合, 通过其在文件中的嵌入, 将不需要进行整理的技术进行一定的响应, 使得网页可以更好的与客户进行分析, 而不需要经过web技术对客户进行交流, 减少服务器的压力。

1.2 web技术的开发现状

Web技术的入门较为容易, 门槛较低, 与计算机编程先难后易相反, 因此在实际的工作中, 技术人员可以通过自主学习掌握一定的知识, 从事Web技术的研发工作。因此, IT技术人员从这一方面入门具有一定的优越性, 但是这样的情况会造成技术人员停留在技术开发的初期阶段, 对于后续的各项系统的优化技术能力存在严重的不足, 造成Web技术的开发和使用不能很好的进行。同时, 因为新型技术不断的出现, 作为一种新型的技术, 一些规范和规定还处在不断的探索阶段, 总是有新型的技术和设备不断的涌现出来, 为Web技术的发展带来巨大的活力, 在这样的背景下, 对从业人员来讲也面临着巨大的挑战。怎样在进行技术开发中维护保持创新性, 在技术的研发工作中进行一定的创新是现阶段Web技术开发中需要面临的问题。在技术的革新和进步方面技术人员需要进行一定的自我完善。

2 Web技术开发注意事项

在进行Web技术的开发中, 需要对其的设计和服务更加完善的表现出来, 但是仅仅是网页的完善性还不能达到现阶段经济的发展要求。因此, 要采用一定的方式对技术进行优化。

2.1 减少HTTP的请求

在对Web技术进行优化的过程中, 这个策略是最有效的。一个完整的请求包括DNS的寻址、建立和服务器的连接。发送相关的数据以及进行服务器数据的等待。数据的接收和等待过程需要的时间较长。用户在等待的过程中对一些按钮进行点击就会使服务器发送请求, 这样就会造成存储空间的增加和后台程序的超负荷运作。而且浏览器在运行的过程中发送请求的限额是一定的, 如果用户持续的发送请求, 就会占用其他的宽带空间, 当浏览器发送的请求超出最大的限额时, 就需要分批的进行处理, 使用户等待的时间延长, 造成恶性循环, 将原本的请求覆盖掉。因此需要对请求进行减少, 主要的方法是进行合并文件的操作, 将CSS文件和Java Script文件进行合并, 节省空间。将图片进行分散处理, 将不同的图片进行不同的连接, 分散数据、将图像进行内部的关联, 让图像和文字同时进行显示, 节省请求的次数。

2.2 压缩文件

进行Web技术的开发, 需要对数据进行压缩, 包括对Java Script压缩和对CSS文件代码进行优化。进行数据的压缩可以将文件数据的传输速度进行加速, 同时还可以保证文件整体的安全性和稳定性, 尽量避免出现文件丢失的情况。

2.3 对样式表进行改善

在进行层叠样式的覆盖中, 后面的数据自动的覆盖到前面的数据中, 高级别的CSS可以对低级别的进行覆盖, 对浏览器进行渲染, 因此在进行使用的过程中需要将数据进行整体的控制, 尽量的在数据全部加载完成以后进行操作, 这样可以获得最新的数据, 并将数据进行合理的分析, 减少页面中一些空白页面的出现, 让用户可以看到准确完整的信息, 减少刷新的次数。

2.4 将script放在底部

在进行Web优化的过程中需要将script放在底部进行操作, 这样可以规避脚本执行中的问题, 防止脚本进行阻塞的下载, 从而提升页面组建的下载速度和页面的加载时间, 对于不能下载的页面直接不进行加载, 减少不必要的请求, 提升加载速度。

2.5 减少DNS查询

一次DNS的解析过程会消耗20-120毫秒的时间, 在DNS查询结束之前, 浏览器不会下载该域名下的任何东西。所以减少DNS查询的时间可以加快页面的加载速度。

2.6 避免重定向, 杜绝http 404错误

进行页面的重新加载需要一定的时间。在发生重定向的过程中需要耗费一定的时间, 发生重定向的因素较多, 每一次重定向的增加都会增加此Web请求, 因此在进行Web技术开发的过程中, 应该将重定向的的请求进行减少。

404错误是因为未找到文件引起的。HTTP请求会消耗很多时间, 所以用HTTP请求来获得一个无用的响应 (例如404未找到页面) 毫无必要, 只会降低用户体验。对页面链接的充分测试和对Web服务器error日志的不断跟踪可以有效减少404 错误。

3 Web前端开发技术优化

3.1 HTTP请求的优化措施

在进行请求优化的过程中, 需要技术开发人员对DNS信息寻找、浏览器的开发和服务器之间的连接以及数据的传输和数据的传输等方面进行分析, 因为每一条技术的实现都会占据一定的时间和空间, 如果占据的空间太多, 就会给网页的使用带来不便, 使得网页的反映速度和反映时间过长, 导致网页的使用效果大打折扣。因此进行Web技术革新的过程中需要将请求进行优化的管理, 通过一定的技术手段将文件和内容进行合并整理, 对于一个请求就能实现的数据搜索绝对不能让其通过几个请求完成。工程师对这一方面的技术要进行严格的控制, 尽量的将页面进行优化, 是页面完整有效饿的出现在客户的使用中而不是出现乱码或者是页面无法显示的现象, 造成用户请求的增加, 增加用户的负担。

3.2 对文件进行规模化的处理

在进行文件的规模化处理中, 需要对文件进行一定的归档和一定的梳理, 这一方面主要是对Java Script和CSS文件以及对应的代码展开优化。优化的过程是对不必要的html标签进行剔除优化, 以及避免内联式样式存在, 此外, 对于CSS代码优化同样也是这一方面工作的重点内容。

3.3 对内容进行优化

对于这一方面的工作来讲, 其主要是根据CSS自身具有的覆盖功能来实现的, 将样式表放在顶部的同时将脚本放在底部, 这样的形式可以把网页中一些不需要的数据进行一定的覆盖。在数据加载完成以后, 出现一些数据优化的项目, 在网速不好的情况下可以将重要的数据进行显示, 用户对于数据的重视程度是超过相关网页的美化项目的。如果重要的数据出现了, 那么用户对其他的信息的关注度就较低, 可以避免出现重复刷新的情况。因此要将文件源的连接方式进行改进, 避免出现重定向的现象, 重定向耗费大量的时间, 其主要是因为对文件的分类不合理而造成, 在进行网页的使用中, 如果进行重定向就会浪费大量的时间。

3.4 加强对工程师的技术提升

工程师是进行网页管理的重要组成部分, Web技术工程师在现代社会具有较多的资源, 但是自学成才的占据较大部分, 前期的学习也较为简单。但是要想在实际的工作中进行完善的设计和技术性较高的设计, 则会遇到一定的困难, 造成一定的问题, 导致对质量较高的Web设计无法完成。因此在进行工作的过程中需要对技术人员的基本素质进行提升, 定期进行技术培养。提升技术人员自身专业素质, 对于Web的设计具有重要的促进作用。

4 结语

从计算机互联网络的发展到现在各项先进技术的发展, Web技术已经成为人们日常生活中必不可少的一部分, 在交互的使用和系统调节能力以及富媒体技术的研发方面具有重要的作用, 使得用户在不用安装插件的情况下就能对Web进行浏览。Web前端技术在使用中涵盖的知识面较为广泛, 既包括一定的抽象思维和理念, 又包括现实的数据分析, 对技术有一定的要求, 同时还要给用户的使用带来全新体验。在今后的发展中, 应该将Web技术和原生应用都进行一定的发展, 使其共同的对互联网的应用系统进行运用。随着未来科技不断进步, 技术人员应该积极的应对和解决Web前端开发中面临的问题, 使其更快的发展。

摘要：Web前端开发是近几年兴起的技术, 其主要包括HTTL、CSS和Java Script, 可以在实际的应用中促进网站性能优化, 推动SE和服务器终端基础知识的普及, 而且运用各种工具进行辅助开发以及理论层面的知识, 进行包括代码的可维护性、组件的易用性、分层语义模板和浏览器分级进行支持。文章主要针对Web前端开发技术进行分析。

关键词：Web,前端开发,技术分析

参考文献

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

[2]杨毅.Web前端开发技术探讨[J].电脑知识与技术, 2014 (23) :5458-5459.

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

[4]赵大伟, 陈刚.Web前端开发技术人才培养模式研究[J].电脑知识与技术, 2015 (24) :109-110.

web前端就业前景 篇4

什么是WEB前端开发工程师?

Web前端开发工程师是一个很新的职业，在国际上真正受到重视的时间不超过5年。Web前端开发是从美工演变而来的，名称上有很明显的时代特征。前端技术包括JavaScript、JQuery、HTML5、CSS3、Ajax、XHTML等Web前端编程技术。;

Web前端开发的职位：“前端开发工程师”、“前端研发工程师”、“前端工程师(移动端)”、“前端开发JS工程师”、“资深前端开发工程师”、“高级前端开发经理”、“HTML5高级工程师”和“前端架构师”等职位。

web前端开发工程师前景

计算机软件是当下很流行的行业。你现在所选的也是目前人才非常紧缺的行业。web前端开发的前景广阔，兴趣是最好的老师。

只要自己技术上过关，不断的强化自己的学习能力，动手能力，职场实力。那以后能做的不只是WEB前端工程师。 你可以有更好的发展方向。

WEB前端开发工程师工资水平(元/月)

数据说明：

图表中根据互联网企业员工发布的职位薪酬数据统计所得，工资数据受地域、工作年限、用户分享数量等多种因素影响，仅供参考。本数据取自 1222 份样本，最新更新时间：-02-28

Web前端技术 篇5

关键词：Web2.0,前端开发,Html5,课程

1 前言

传统的Web前端开发是指静态网页的布局的设计,是Web1.0 时代开发人员的主要工作。那个时代,网站的内容主要是以静态的页面为主,人们进入网站也主要是通过浏览网页的内容,获取相关的信息。2005 年以后,随首Web2.0 的发展和普及,各种交互式的Web应用大量涌现,人们在访问网站时用户体验的要求程度越来越高,网站的前端页面的设计由此发生了质的变化。前端页面上良好的软件化的交互形式能够为用户提供了更好的使用体验,所以前端页面的开发技术难度越来越大,此时的Web前端开发是指综合运用HTML、CSS、DIV、Ja va Script、DOM和AJAX等技术实现网站的整体布局和改善用户体验的工作。在一些技术比较发达的国家,前端开发技术人员已经独立出来并形成专门的开发群体,而目前我国缺乏大量的前端开发人员,随着Web2.0的普及,未来几年国内各大行业对Web前端开发方面的人才需求将会大幅提升,Web前端开发技术人才也会日益受到重视。

一位优秀的Web前端开发技术人员在知识体系上既要有广度,又要有深度,传统的网页设计人员只需要掌握Dream Weaver、Flash和Photoshop等基本的工具软件就可以胜任,这也是目前很多高校中网页设计课程体系中的核心课程,现在的Web前端开发人员只掌握这些是远远不够的,现在的前端开发无论是技术上还是难度上都更接近于网站后台的开发,所以需要的更加专业的技术人员。为了更好地进行Web前端开发技术人才的培养我们针对教学计划进行了修订,结合当前对Web开发技术人员的具体的技术需求进行教学。

2 Web前端开发技术课程改革

2.1课程设置

课程改革的目的是适应web 2.0 发展和普及,培养掌握基本的Web前端开发技术,其中包括HTML、CSS、DIV、Java Script、DOM和AJAX等,还要掌握网站性能优化、搜索引擎优化和服务器端开发技术的基础知识,掌握运用各种Web前端开发与测试工具进行辅助开发等。

以Web前端开发工程师岗位的技术需求为导向设置课程,使其满足Web前端开发的技术人才能力的要求,在教学内容上设置为包含HTML、DIV 、CSS、Java Script、DOM和AJAX等5 个模块的教学内容。为了更好地适应Web开发技术的发展和社会的需要,课程中我们还适时增加HTML5[1]方面的知识。在新构建的知识体系将CSS+DIV技术贯穿整个教学环节中,重点介绍CSS+DIV技术在现代网页前端页面设计中的作用,并在教学中将Java Script、DOM和AJAX技术与它们进行融合,培养学生设计和开发现代的前端页面的能力。

2.2 案例式教学

Web前端开发技术课程采用案例式教学,以“任务驱动,项目拉动”为目标,规范Web前端开发的流程,以当前优秀的精品课程网站,优秀的企业网站和典型的商业网站为案例,学习前端页面的设计和开发,学习先进的技术和理念,通过案例教学使学生能够独立完成自选课题的设计任务。在教学中采用基于建构主义认知灵活性理论的教学设计模式[2],在教学设计过程中,完成案例时始终贯串建构主义的概念,对新知识点分别进行感观建构、情景知识建构、实践知识建构到最后的重建,形成最终的意义建构,学生在学习的过程中可以从不同的情景中实现对知识的理解和认识,并通过案例提高学生的动手和实践能力。

教学过程中,所有的项目案例均来自当前企业中的实际项目,根据软件工程的理论,把项目案例自下而上分为技术层、操作层和综合层三个层次[3]。技术层注重对开发技术的学习和掌握,操作层重点在于技术的应用,将技术应用于实践,综合层则关注技术的整合与创新。技术层是操作层和综合层的基础,综合层则是技术层和操作层的实现和深化。实践类课程增设课程设计,加强学生在校期间科研训练及项目经历提高计算机专业学生Web前端开发能力,增强学生的职业竞争力。

3 Web前端开发技术能力培养

3.1 加强教学资源建设与教学平台搭建

完善教学资源,采用与教学特点相适应的课内教学多媒体教学形式,采用国内外重点教材,引进国内外一流大学和成功的软件人才培养机构的先进教学思路,借鉴国外课程,调整、更新和充实教学内容,采用双语教学方式,努力与软件人才国际化的培养目标接轨。

构建自主学习的资源平台,搭建程序设计项目资源案例库,丰富学生课外学习层面,建立相应的课程教学网站,实现课内课外相结合的教学模式[4]。

3.2 实践基地建设与职业能力训练

除了在实习过程中的校外教学基地,学校还根据Web前端开发技术的具体特点,建设一批基于校园的网络工作室、互联网企业于一体的综合性实践基地。在教学过程中,教师可以带领学生进入基地,参与到实际的web开发与社会实践中去,包括校园的网络工作室等基地就是由学生进行管理和维护,提高学生的职业能力,使学生完成从理论到实践的过渡,从学校到“职场”的过渡。以上基地的建立强化了学生的实践和岗位适应能力。教学中,我们要求学生的项目、课题的实践性环节不少于20%,强化学生实践能力的训练,开设了多门反映Web前端开发技术最新发展的课程,为培养学生的职业素质提供平台。

4 多角度、综合性的考核提高职业素养

Web前端开发技术的实践性比较强,我们也希望通过课程改革提高学生的开发技术和能力,最终提高学生的职业素养和设计能力,进入社会后能够胜任专业岗位的需求。在Web前端开发技术课程考核中,我们采用多样化、职业性的考核评价体系取代传统的考核方式。

Web前端开发技术课程的考核,我们采取的多样化的考核方式,如作品演示、作品集成、项目验收等。将学生的作品和自选课题,作为评价考核的重要组成部分,学生在汇报和演示作品的同时锻炼了学生口头表达能力、与人沟通能力等多方面能力,也加深了他们对Web前端开发技术和项目开发的深入了解。在项目验收考核中,我们为了让学生更好地完成项目,分为阶段验收和综合验收,阶段验收用来检查和了解学生的学习情况,了解学生对Web前端技术的掌握情况,及时的发现问题并找出解决办法。综合验收是通过学生对具体项目案例的实现情况,来检验学生的Web前端开发能力及相关的综合能力这种考核方式既能客观的评价学生的能力水平又能够培养他们的团结协作精神,促进学生们综合职业能力培养和提高[5]。

5 结束语

基于框架的WEB前端设计 篇6

关键词：Bootstrap,Angular JS,框架,WEB前端

0 引言

随着新一代信息技术的快速发展,Web应用越来越广泛,对于Web前端开发工程师的要求也越来越高,无论是开发技术上,还是开发方式上,现在的网页制作都更接近传统的网站后台开发,由原来必须掌握的HTML、CSS和Java Script三个技术要素演变成现在的HTML5,CSS3和Jquery。而且前端工程师开发的Web应用不仅需要适合传统的电脑PC端,还需要适合手机和IPAD等各种不同的移动设备。为了降低Web前端开发的难度和复杂性,引入框架思想进行Web前端开发。

使用框架进行Web前端开发主要有两个方面的原因:使用W3C标准的框架后,可以有效提高Web应用的性能,让应用的代码组织更有序,提高其可维护性;使用便捷的MVC框架,把HTML作为信息模型(Model)、CSS控制样式(View)、Java Script实现功能和业务逻辑(Controller),使得代码具有很好的重用性和复用性,提高Web前端开发的效率、质量和团队协作性。本文主要简单介绍使用框架思想来进行Web前端开发。

1 框架概述

框架是随着软件工程的发展演变而来的,在软件开发过程中,很多项目要解决的问题和实现的功能是一样的,在这种情况下,可以将实现相同功能的代码放在单独的一个文件作为组件或构件,供以后开发和使用,这些代码是可重用和扩展的。因此,业界人士将相同功能的实现和问题的解决方法进行抽象,最终抽取和形成一个应用框架。框架可以使软件开发人员将大部分时间用来分析和处理业务逻辑上,在编写代码时只要应用框架就可以了。

使用框架开发应用的优点如下:

(1)框架重用性好,开发效率高。在开发应用时,可以重用框架的分析、设计、代码,使得应用开发效率和开发质量得到了显著提高。应用开发人员可以按照框架的思想将应用进行分析并将其分解为同样的组件,采用同样的方法来解决的问题。框架还提供了可重用的概要设计和详细设计,并将应用分解成较小的组件和接口。只要符合框架的定义和要求,开发人员就可以使用框架中的类和接口,使得开发效率大大提高。

(2)因框架实现了“高内聚、低耦合”,可扩展性较好。框架把要解决的业务分解为较小的事务,采用分层的方法将相关性很强的代码组合成一个组件,根据单一责任原则只解决一项较小的事务,并且减少组件与组件之间的联系,如果彼此之间的联系比较复杂的话,继续分解为较小的组件。因此框架实现了软件工程的“高内聚、低耦合”的要求,易于控制,易于扩展。

(3)使用框架,开发周期短,成本低,可维护性较好。使用框架开发应用,只要调用类和接口就可以完成大部分工作,大幅度缩短了应用和软件的开发周期,显著提高了软件开发质量。大粒度的重用使得应用和软件开发成本大大降低,开发时间成倍减少,同时分层思想设计的框架使得应用开发的适应性和灵活性也得到增强,可维护性较好。

2 Bootstrap框架应用

2.1 概述

Bootstrap框架主要用于静态页面的设计,是由Twitter公司的设计师Mark Otto和Jacob Thornton共同开发的,是比较受欢迎的一个CSS/HTML Web前端框架。它是基于HTML5、CSS3和Java Script的框架,符合HTML和CSS规范,且代码简洁灵活,使得Web前端开发更加快捷。Bootstrap框架推出以后一直颇受欢迎,是Git Hub网站上的排行榜靠前的开源项目,国外知名的公司NASA的Breaking News和国内一些移动开发者较为熟悉We X5前端开源框架都采用了Bootstrap框架。

由于Bootstrap的HTML是基于HTML5的最新技术,可以快速实现响应式页面,集成了非常友好的CSS样式表,对于非设计人员也可以制作出很漂亮的网页,且占用资源非常少,因此我们也采用Bootstrap框架进行Web前端设计。该框架包含了丰富多彩的Web组件,利用这些组件,我们可以快速的搭建一个个性化的、漂亮和功能完备的网站。主要包括以下几个部分:

1)全局CSS样式:包含了格栅系统、表单和表格等集成样式。

2)组件:包含了下拉菜单、按钮下拉菜单、文本框、导航、列表框等组件。

3)插件:包含了进度条、警告对话框、弹出框等插件。

2.2 应用

(1)从Bootstrap官网http://getbootstrap.com/getting-started/#download下载Bootstrap开源框架。Bootstrap主要包含css、fonts和js文件夹:css文件夹存放的是bootstrap.css基本样式,在网页中使用<link rel="stylesheet"href="css/bootstrap.css"/>命令即可;fonts文件夹存储网页中可以使用的各种字体;js文件夹存放的是bootstrap.js等js文件,在网页中可以通过<script></script>标签来使用js组件。

(2)Bootstrap是根据移动终端优先的原则设计的。它支持响应式网页(RWD,Responsive Web Design),为了控制网页的尺寸比例和触屏缩放,需要使用命<meta name="viewport"content="width=devicewidth,initial-scale=1">命令添加viewport元素。

(3)设置页面流式布局,网页中的各元素会根据设备分辨率的不同而自动调整大小,但元素位置并不会发生变化。流式布局通常将页面分为12列,将网页的宽度设置为100%,具体代码因太多此处省略。

(4)运用Bootstrap提供的各种样式、组件和插件完成WEB前端设计。例如制作一个提交按钮,通过以下代码实现<button class="btn btn-default"type="submit">提交</button>。

3 Angular JS框架应用

3.1 概述

Angular JS主要用于构建单页面的动态页面的设计,更多关注的是构建CRUD(增加Create、查询Retrieve、更新Update、删除Delete)应用,由Misko Hevery等人在2009年创建,是一款优秀的JS框架,被广泛应用。

Angular JS主要使用MVC的分层设计模式,将管理数据的model、应用逻辑controller和向用户显示数据的界面(view)清晰地分离开,以提高代码的易读性和可移植性,使得程序清晰易读。在Angular JS应用中,model被存储在各个对象的属性中,view就是文档对象模型(DOM),controller就是JS类和代码。

3.2 应用

(1)从网上下载Angular JS框架。将要使用的js文件复制到工程文件的js文件夹中,并在页面中使用<script src="js/angular.js"></script>命令引入。

(2)使用ng-app命令在动态页面中创建模块。Angular JS的MVC结构是基于整个具体应用的。通常在页面的指定容器标签中使用ngapp命令来创建具体模块,例如<div ng-app="test"></div>。

(3)设置控制器controller。在网页中通过ng-controller指令设置控制器,<div ng-app="test"ng-controller="test Controller">{{text}}</div>。再通过JS代码控制逻辑,app.controller("test Controller",function($scope){$scope.text='welcome';})。

(4)设置模型数据model。通过ng-model命令动态设定模型数据model内容,<div ng-app="特test"ng-controller="Hello Controller"><input type="text"ng-model="text">{{text}}</div>。

4 总结

本文针对新一代信息技术的发展,将Bootstrap和Angular JS框架运用在WEB前端开发中,希望能对WEB前端设计的研究提供一定的参考。当然本文只是简单介绍了Bootstrap和Angular JS框架的基本应用,详细的应用有待进一步的完善。

参考文献

[1]http://www.51cto.com.

[2]http://baike.baidu.Com.

Web前端常见安全问题及对策 篇7

随着互联网特别是Web2.0的兴起,Web网站和应用越来越广泛,越来越多的企业和个人将服务架在Web平台上,Web的安全性也变得越来越重要。Web业务的发展引来黑客们的关注,黑客利用一些常见的Web安全漏洞对网站进行攻击和窃取用户信息,使得网站用户的利益受到损害。

2 Web安全问题产生原因

2.1 现实原因

随着网络的普及和Web应用的丰富,在互联网上人们可以开展各类活动,如购物、游戏、网上银行、社交平台等,这些服务网站上有大量用户资金相关的隐私信息如银行账户、密码、个人身份信息、电话号码等,这些信息可以直接或间接被不法分子窃取和利用,从而对最终用户造成损失。巨大的利益诱惑是产生Web安全问题的动机。

2.2 技术原因

在技术层面,W eb服务是建立在HTTP协议上的,HTTP又是建立在TCP/IP之上,在TCP/IP设计之初是没有考虑安全问题的,所有的安全问题需要Web服务提供者自己考虑,这使得在网络上传输的数据是没有任何安全保护。攻击者可以利用系统漏洞造成进程缓冲区溢出,或者利用系统漏洞来进行用户提权运行任意程序,甚至安装和运行恶意木马程序,窃取用户机密数据。在Web应用开发时由于大部分开发者把精力放到业务逻辑实现而非Web安全性上,导致Web程序本身存在很多漏洞,如缓冲区溢出、SQL注入等。

2.3 开发人员的乐观

大部分的开发人员是乐观的,认为自己开发的Web网站很安全,如网站已经通过成熟的Web开发框架或采用了一些安全传输技术如SSL或做了完善的数据备份,所以没有什么安全风险,产生这种原因的根源是大部分开发人员对Web安全问题认识不足或不全,片面乐观导致。

3 Web安全问题常见分类

在了解Web安全问题之前,需要先大致了解Web应用结构,如图1所示。

上面只是列举了Web开发用到的一些技术和框架,实际上Web应用依赖的技术栈比这个丰富许多。黑客攻击的基本过程是:通过输入提交“特殊数据”,特殊数据在数据流的每个层处理,如果某个层没处理好,在输出的时候,就会出现相应层的安全问题。例如:

(1)如在操作系统层上没处理好,在Shell下把“特殊数据”如rm-rf/;当做指令执行而此时进程恰好对操作系统有root权限,就产生了OS命令执行的安全问题,把所有硬盘数据全部删除了。

(2)如在存储层的数据库中没处理好,数据库的SQL解析引擎把这个“特殊数据”'union select username,passwd from user_table--当做sql语句执行时,就产生SQL注入安全问题,这样用户的数据就泄漏了。

针对上面的分层模型,对Web安全大致可以分为:

(1)Web前端安全性。

(2)Web后端安全性。

(3)数据库安全性。

(4)服务器安全性。

下面重点介绍Web前端的常见安全性问题和应对策略。

4 Web前端安全问题

4.1 XSS漏洞

XSS(Cross-Site Scripting)指攻击者在网页中嵌入客户端脚本(例如Java Script),用户浏览网页就会触发恶意脚本执行。比如获取用户的Cookie、导航到恶意网站、携带木马等。

攻击者寻找有漏洞的Web站点,然后生成其攻击链接,把攻击链接伪装成美女图片等用户容易点击的链接,用户一旦点了该链接后,用户访问的就是攻击者篡改后的网站内容。

4.1.1 通过URL参数进行攻击

该页面显示两行信息:

从URI获取'name'参数,并在页面显示,显示跳转到一条URL的链接。

攻击者还可以通过以下URL实现修改链接的目的:

当用户点击以上攻击者提供的URL时,index.php页面被植入脚本,用户再点击"Click to Download"时,将跳转至攻击者提供的链接。

4.1.2 利用用户输入攻击

例如:用户前端代码如下:

<input id=1>{{username}}</input>

黑客攻击代码如下:

<script>alert(1)</script>

最后html代码如下:

<input id=1><script>alert(1)</script></input>

黑客通过注入js脚本的方式进行站点攻击。

XSS攻击解决办法:

(1)不允许输入HTML内容时。

1)输出到页面上的所有内容都要转义

2)不要动态生成<script></script>的内容

3)输出URL时仅允许以“http://”或“https://”开头的URL

4)不要从外部网站读入样式表

(2)允许输入HTML内容时,解析输入的HTML内容,提取其中的非脚本部分。

(3)不要相信用户的任何输入(不限于POST Body,URL的Query String,甚至是Headers),用户的输入都要检查。

4.2 CSRF漏洞

CSRF(Cross-site request forgery),是一个知名度不如XSS但是却同样具有很大杀伤力的安全漏洞。

4.2.1 Get请求漏洞

如你网站A上的「登出」功能是这样实现的:

<a href="http://www.abc.com/logout.php">登出</a>

则存在CSRF漏洞。假设网站B(当然也可以是网站A本身)中有这么一段代码:

<img src="http://www.abc.com/logout.php">

那么当用户访问的时候,就会导致网站A上的会话被登出。

4.2.2 POST请求漏洞

如网站B中:

当用户访问网站B的时候,网站B自动发送了POST请求到网站A,网站A无法识别请求来自网站A的form请求还是网站B的form请求,最后被攻击。

CSRF攻击解决方法:

(1)给所有请求加上token检查。token一般是随机字符串,只需确保其不可预测性即可。token可以在Query String、POST body甚至是Custom Header里,但千万不能在Cookies里。

(2)检查referer(这往往不能防御来自网站自身的CSRF攻击,如用户评论中的<img>就是一个常见触发点)。

(3)执行重要业务之前再次要求输入密码。

5 结语

Web前端性能优化研究及应用 篇8

截止至2013年,互联网总站数超过10亿,每秒约增加8个新网民,Web发展如此迅速,前端性能却普遍低下,就连大型互联网公司也难以幸免,例如:2011年百度推出的百度新首页,后端平均运行时间只有60ms,而前端平均运行时间却为1.3秒[1],前端性能可见一斑。尤其是在当今网速低下的环境中,优化前端就显得尤为重要。

在21世纪初,谷歌就已经开始重视前端优化,并提出了speed tracer等前端优化工具,雅虎也推出了《High Performance Web Sites》、《Even Faster Web Sites》等前端优化方案。国内,王成等人分析了浏览器与服务器的通讯过程,以优化HTTP请求为原则,从提出了一个系统的前端优化方案[2];朱云峰通过研究Ajax响应速度,以执行速度和内存使用量为优化点,对页面的Ajax请求进行了了优化[3]。上述研究各有侧重,但都没有针对浏览器的二连接限制进行优化,本文针对此,分析了影响Web前端性能的因素,在优化B/S通讯过程中的HTTP请求的同时,针对浏览器二连接限制所导致的Web前端效率低下的问题提出了连接请求调度权值模型,在该模型的基础上提出了请求调度算法SACC,并将上述优化方案与实际相结合,验证了解决方案的合理性。

1 Web前端性能瓶颈分析

1.1 B/S结构限制

从浏览器对服务器发出网页请求,到网页呈现在浏览器的过程,由下列步骤组成:

①用户在浏览器的地址栏输入网页URL。

②浏览器通过域名解析出与对应的IP地址。

③浏览器向Web服务器发送HTTP请求命令。

④服务器接收请求,根据请求确定目标资源文件。

⑤服务器发回HTTP响应,将生成的HTML文档发回给浏览器。

⑥浏览器接收并解析服务器返回的HTML文档,向服务器请求其中的资源文件。

⑦服务器接收浏览器对资源文件的HTTP请求,并返回相应的资源文件。

⑧浏览器接收资源文件,渲染页面,重排和重绘。

在B/S理论中,浏览器是与服务器通信、展现页面的主体,因此浏览器与服务器的通信过程、对页面的渲染效果等方面,成为了Web前端性能优化的关键。

1.2 浏览器二连接限制

为防止服务器拥塞,HTTP协议规定:客户端与服务器端建立的并发连接数应受到限制,在同一时刻,单个客户端与服务器建立的持久连接数不应超过两个[4]。

浏览器在以下情况出现二连接限制问题:①用户触发了网页中两个以上的Ajax请求;②用户连续发出两个请求,在服务器未对请求响应的情况下,又发出了请求,如图1所示,用户在T1时刻发出了请求1和请求2,在服务器尚未响应时,又在T2时刻发出了请求3,由于浏览器的二连接限制,请求3被阻塞,直到T6时刻浏览器才发出请求3。

2 Web优化性能方案

2.1 B/S结构优化

针对由于B/S结构对前端性能带来的影响,本文从服务器端优化、HTTP请求优化、延迟加载和Ajax优化方面给出了优化方案。

①服务器端优化

服务器端优化旨在减小浏览器对服务器发出的HTTP请求数量,优化HTTP请求的资源传输路径,尽可能减小网络资源的传输消耗,主要有以下手段:优化域名、设置合理缓存、使用CDN、Gzip压缩。

优化域名是指使用多域名策略,把页面内容分配到多个域名中,可以使页面最大限度地实现平行下载。给页面资源分配多域名其中的一个域名的原则是,保证一个资源在分配时总是分配到固定的一个域名。这样,如果资源已经在浏览器缓存,下次访问时就可以在缓存中读取,避免从其他域名再次下载资源。

设置合理的缓存是设置浏览器使用缓存来避免重复加载资源,提高资源利用率。在服务器与浏览器之间可以设置Expires、Etag头部信息等方式进行缓存。

CDN由一系列分散到不同地理位置上的服务器组成,它能够实时地根据网络流量和各节点的连接负载状况以及到用户的距离和响应时间等综合信息将用户的请求重新导向离用户最近的服务节点上,缩短了服务器与用户之间的距离,提高了资源的加载速度。

GZIP压缩是指当服务器中的网站被访问时,服务器将网页内容压缩后传输给来访的浏览器,GZIP有两个优点,一是减少存储空间,二是通过网络传输文件时,减少传输的时间。

②HTTP请求优化

HTTP请求优化是指精简浏览器请求的资源文件大小,主要手段有图片优化、压缩合并资源文件。

图片优化旨在减少图片的HTTP请求个数,使用CSS Sprites把多个图片整合到一张图片中,再用CSS的background属性进行背景定位。

压缩资源文件指通过去除多余空格、换行符、注释等来压缩HTML、CSS、Java Script文件。合并静态文件将页面中多个CSS、Java Script请求合并为一个请求,以减小客户端对资源文件的请求数量。

③延迟加载

延迟加载并不一定能减少HTTP请求数,但是却能在某些条件下或者页面刚加载时减少HTTP请求数,主要手段包括图片延迟加载和组件预加载。

图片延迟加载是指在页面刚加载的时候只加载首屏,当用户继续往后滚屏的时候才加载后续的图片,这种加载机制减小了不必要的HTTP请求数量。

预加载是一种浏览器机制,使用浏览器空闲时间来预先加载用户接下来可能会浏览的页面资源。页面提供给浏览器需要预加载的集合,浏览器载入当前页面后,会在后台下载需要预加载的页面并添加到缓存中,用户访问时,再从缓存中取,从而加速页面呈现。

④Ajax优化

Ajax优化指利用可缓存的Ajax来提高性能,Ajax的优点是由于其从服务器传输信息的异步性而为用户带来反馈的即时性。但使用Ajax并不能保证用户不会在等待异步的Java Script响应上花费时间,在许多应用中,用户是否需要等待响应取决Ajax如何使用,这时“异步”并不意为着“即时”。为提高性能,优化Ajax响应很重要,提高Ajax性能的一项重要措施是使响应具有可缓存性,减少对HT-TP的请求。

2.2 针对浏览器二连接优化

2.2.1 请求调度解决方案

有两个指标可以用来衡量网页的性能:

①文档下载完成时间TDD(Time to Download Document):是指浏览器下载网页资源文件如脚本、图片、视频等元素的时间。它与网络延时和网络带宽有关,网络延迟越小、带宽越大,TDD值越小。

②文档渲染时间TSR(Time to Start Render):是指浏览器从请求网页到向用户呈现网页所用的时间,TSR时间越短,用户感觉上等待时间越短。

浏览器的连接数目不可以更改,因此考虑在浏览器二连接限制的情况下调整多个HTTP请求的请求顺序,从而减小总体等待时间,证明如图2所示。

T5时刻得到请求1的响应,T6时刻得到请求2的响应,假设T6-T5=1,且T5时刻有等待发出的A、B、C三个HTTP请求,从请求到响应时间分别为x、y、z,并且满足大小x>y>z,x>y-1>z。在T5时刻由于请求2还未返回,因此只能发出一个请求。

方案1中,请求发送顺序为A、B、C,总等待时间从T6算起,为x+z-1;方案2中,请求发送顺序为A、C、B,等待时间为y+z,因y>x-1,所以方案1的等待时间小于方案2的等待时间,因此方案1优于方案2,由此可得出HTTP的请求顺序会影响请求效率。

针对浏览器二连接限制的优化实质上是指在多个HTTP请求的情况下,通过合理调整请求顺序,保证TDD和TSR值最小,那么此时的二连接限制优化问题就变成了队列模型的多机调度问题。

2.2.2 SACC算法设计

①TDD最小优先策略思想

上述多机调度问题具体是指:有n个独立任务P={p1,p2,…,p3},由m台相同的机器Q={q1,q2,…,qn}进行处理,作业pi所需的处理时间为ti(1≤i≤n),每个作业均可在任一台机器qi上加工处理,但不可间断、拆分。多机调度问题要求给出一种作业调度方案,使n个作业在尽可能短的时间内由m台机器处理完成。

其中n个作业等价于浏览器发出的n个请求,m台机器等价于m个并发连接通道,那么二连接限制优化就转化为寻找一种请求调度方法,使用户在m个并发连接限制下,完成n个请求花费的时间最短。

多机调度问题采用贪心策略来解决,贪心策略指当请求数大于并发连接数时,将请求按处理时间降序排序,处理时间最长的请求被优先处理,因此需构建处理时间TRP(Time to Request Processed)降序序列。

TRP由三个部分组成:①请求从浏览器到服务器的传输时间;②服务器响应时间;③请求从服务器到浏览器的传输时间。第2项时长相较于1、3项可忽略不计。在相同的网络状况和请求路径下,浏览器请求的数据越大,TRP值越大,因此可依据请求数据大小构建TRP降序序列。

②TDD与TRP综合调度策略

TDD最小优先策略虽然能得到较小的TDD值,但用户体验较差,因为通常情况下,浏览器发出的请求消耗的时间大小为:视频>图片>文本,而浏览器对网页内容的渲染速度却是:视频<图片<文本。若仅考虑TDD最小策略,会导致用户长时间看到空页面,因此需同时考虑TDD值和TSR值,设计一个综合的调度权值计算模型,以得到更优的调度方案。

在此模型中,设置两个度量属性,分别是请求对象大小P和对象渲染时间Q,在此基础上引入权重系数μ,μ决定了TDD和TSR在等待总时间中所占的比重,最后引入ω值来确定请求的发送次序。

以上公式描述如下:在等待调度的请求序列中,ω0表示请求q的调度权值,α0表示请求q的大小P,β0表示请求q所需的渲染时间Q,公式(1)表示了三者的关系,μ表示对象大小所占的权重。

公式(2)体现了TDD最小优先策略,即请求对象P较大的会被优先发送,将请求对象P0与最大请求对象Pmax相除,使α0在区间(0,1]内,保证ω0的取值尽量平滑。

公式(3)体现了TSR最小优先策略,即渲染时间小的请求会被优先发送,Qmin表示请求序列中渲染时间最小值,Q0表示请求q所需的渲染时间,与α0类似,采用两者的比率的方式保证β0取值在(0,1]内。

公式(4)表示Q0的具体计算方式,渲染时间等于对象大小S0除以此对象的渲染速度V0。

综合公式(1)、(2)、(3)得出,请求的调度权值ω越大,请求发送优先级越高,由此得到一个综合的请求调度方案,使得TDD和TSR的值最小。

3 Web性能优化实践

集智调查网站是一个面向高校的调查网站,以其案例丰富、操作简洁而受到高校师生的好评。但在使用过程中,网站前端性能问题严重,极大制约了网站的使用,本文选择将该网站作为前端性能优化对象,通过实施前端优化策略,提升其前端性能。

3.1 前端性能检测流程设计

3.1.1 选择评测工具

①使用Fire Fox的network来查看页面资源加载时间顺序和阻塞情况。

②使用Chrome的Time Line查看页面加载事件、脚本事件、渲染事件、绘制事件的情况。

③使用Chrome的profiles监测CPU使用、页面渲染、Java Script执行、CSS利用率等。

④选择YSlow对页面进行性能检测并评分,并分析造成页面性能底下的原因。

⑤利用Speed Tracer监测浏览器UI线程、渲染重排、布局板面以及Java Script执行效率。

3.1.2 设计评测流程

准备测试环境,包括清空浏览器缓存,清空DNS缓存,慢网速下测试,开启网页测试工具。启用YSlow来检测页面得分,发现85%的页面得分在70分以下,而达到前端标准的页面分数应在80分~90分之间,通过对网站整体页面检测分数,找到性能得分在65分以下(严重影响使用)的页面,进行性能问题分析。

3.2 寻找前端性能优化瓶颈

前端性能瓶颈分析如图3-4所示。

图3和图4为对调查案例页面采用Fiddler和Speed Tracer所检测到的Timeline和Connection View的数据,从图中可以分析出的前端性能瓶颈如表1所示。

3.3 B/S框架优化策略

①服务器端优化

在服务器端进行以下优化:使用Expires、ETags策略对资源缓存;开启Gzip,对资源文件进行压缩;去除HTTP 404请求。

②优化HTTP请求

对资源文件进行精简、压缩、合并成一个资源文件,图标和小图片文件使用CSS Sprites策略,由原来的十几个HTTP请求减小到一个。

③延迟加载

对于多图片页面,进行图片延迟加载处理,在用户浏览图片集时,才进行图片加载。

④Ajax优化

对多Ajax请求的页面进行Ajax缓存,减小用户重复的Ajax请求对服务器造成的压力。

3.4 SACC算法优化

为解决浏览器二连接限制优化问题,采用SACC算法来优化请求序列,在并发连接请求处添加该连接的相关信息,如请求类型、请求内容大小等,在浏览器发出该请求时,利用Java Script代码读取请求的备注信息,建立调度模型。

算发的伪代码如下:

3.5 优化前后对比

以调查案例页为例,图5优化前后页面HTTP请求对比中可以看出,页面资源请求明显减少,提高了页面响应速度,减小了对服务器的压力,加速了页面渲染,提升了用户体验。

表2优化前后的对比中可看出,加载时间和页面渲染时间的减少,提高了页面的呈现速度,脚本执行时间的降低,提高了页面响应速度和整体性能。

4 结束语

Web前端技术 篇9

关键词：MVVM,Web前端框架,Angular JS

面向对象设计(OOD)的核心设计原则是使程序模块达到“高内聚,低耦合”,而MVC、MVP、MVVM等都是围绕这一核心原则相继产生的框架模式。随着Web应用的日趋复杂、前端规模不断扩大,Web前端也开启了MVC、MVVM风潮,越来越工程化。

1 MVVM框架模式思想

MVVM框架模式是Model-View-View Model模式的简称,于2005年由微软的WPF和Silverlight的架构师John Gossman提出。MVVM既吸收了MVC模式的精华,又利用了数据绑定(Data Binding)技术和WPF中命令Command技术对MVP模式进行了改进。其设计思想是“数据驱动界面”,与传统的“事件驱动界面”相比较,以数据为核心,使视图处于从属地位。数据绑定[1]使表层视图会随底层数据地改变而改变,若用户修改了视图元素值,相当于透过视图元素直接修改了底层数据。Com-mand技术可接受View中用户的输入并做相应处理,它解耦了视图和视图模型。

MVVM框架模式结构如图1所示,由模型(Model)、视图(View)、视图模型(View Model)三部分组成[2]。MVVM为View层单独定制了一个Model,既View Model。View中的视图逻辑通过双向数据绑定和命令绑定到View Model的属性上,通过View Model得到Model中的数据,双向数据绑定实现了视图和数据模型的自动同步机制。

MVVM中每个模块在系统中的职责不同。视图:用于界面呈现,它不直接与Model进行交互,而是通过View Model与Mod-el通信,并可独立于Model的变化和修改,这也是MVVM低耦合思想的体现。视图模型:是对视图逻辑和View与Model模块之间状态控制的封装,是View和Model通信的桥梁,也是MVVM设计思想的核心部分。它包含绑定的数据集合,可根据用户输入通知修改Model、响应Model中的数据变化事件,可发送View Model中的变化事件以通知View更新。一个View Model可以绑定到多个View上,即多个View可以复用同一个View Mod-el,这大大提高了代码的可重用性。模型:封装了与业务逻辑相关的数据,以及数据处理等事件。它不依赖于View和View-Model,可直接与数据库交互。

2 Angular JS中MVVM框架模式的应用

2.1 Angular JS简介

Angular JS框架于2009年由Google首次发布。因其模块化思想,双向数据绑定,指令(Directives),测试驱动开发等特性,以及其2.0版本对移动设备的良好支持,目前已处于前端JS框架之领导地位。Angular JS设计初衷是标准的MVC模式,但随着代码重构和API的重写,现在更是将MVVM框架模式表现得淋漓尽致。

2.2 Angular JS中MVVM应用模式

在Angular JS中,MVVM应用模式主要体现在以下几个部分,结构如图2所示。

View:它专注于界面的显示和渲染。在Angular JS中,View除了HTML、CSS这些视图代码,还包含Angular JS指令、表达式等的视图模板。View不能直接与Model交互,视图对象需要通过$scope这个View Model来引用。

View Model:它负责View和Model的交互、协作。View Model给View提供显示数据,并提供了View中Command事件操作Model的方式。在Angular JS中,$scope对象充当了这个View-Model的角色。$scope被称为控制器的功能模块包装,它提供一些API来监控View状态,可以把数据模型和函数暴露给视图(UI模板),它包括数据引用关系、控制器定义行为、视图处理页面布局以及相应的处理跳转等内容。

Model:它是与应用程序的业务逻辑相关的数据的封装载体,是业务领域的对象。Angular JS通过数据模型Model驱动,以Java Script对象的属性的形式呈现。通过数据绑定技术,视图会根据数据模型的变化自动更新,因而模型也是Web应用程序开发和设计中的焦点。

Angular JS中,Model与View Model通过$scope对象互动。$scope对象监听Model的变化,通过View来发送和渲染,由HT-ML来展示代码。Model并不关心会被如何显示或操作,所以Model中也不会包含任何界面显示相关的逻辑。在web页面中,大部分Model都是来自Ajax的服务端返回数据或者是全局的配置对象,而Angular JS中内置的服务$http非常强大,可直接替代Jquery的Ajax函数,它封装和处理这些与Model相关的业务逻辑。

Controller:Angular JS提供了无状态的Controller,它并不是MVVM模式的核心元素。Controller可设置模型的初始状态,它组合一个或者多个服务(service)来获取业务领域Model并将其放在View Model对象上,使得应用界面在启动加载的时候达到一种可用的状态。另外,Controller可监控模型其余部分的变化并采取相应的动作。

Angular JS内嵌了j QLite,它内部实现的一个Jquery子集,包含了常用的Jquery DOM操作方法,事件绑定等,所以我们只需用JS控制View Model,不用关注数据如何呈现到页面,由框架更新Model和View。对于用户交互Command事件(如ng-Click、ng-Change、ng-If等)则会转发到转到$scope的某个行为逻辑上,通过View Model来实现对Model的改变,对于Model的任何改变也会随之反应在View Model之上,再通过$scope的“脏检查机制”($digest)来更新到View,从而实现View和Model的分离。

2.3 Angular JS中MVVM应用模式与Web前端传统开发思维对比

Jquery是以事件驱动为中心、面向网页编程的传统前端开发思维的代表。它专注于View层的变化和用户的操作,在对网页元素的定位和操作上需花费较多精力,对于数据处理却是弱项。随着界面和逻辑的日趋复杂,再使用JS或者Jquery去控制DOM会越来越不易,尤其对具有复杂交互的项目,JS逻辑会变得臃肿,交互逻辑分散。而Jquery template技术,虽可实现模块之间解耦,但无法实现数据和视图展现的解耦。Angular JS是新一代前端开发思维的体现,以Model为中心、面向数据编程。它减少对网页元素的定位和操作,避免了Jquery中DOM操作对网页结构的破坏。Angular JS把模型和视图绑定在一起,实现联动,改变模型,DOM就可以随之进行改变,甚至绑定DOM的事件也可以直接跟着进行改变,让View和Model的进一步分离和解耦,减少了前端开发工作量,提高了开发效率。

3 MVVM框架在Web前端开发过程中的优势

MVVM适合编写大型Web应用前端JS框架,其优势如下。在团队层面,MVVM改变了软件开发方式。由于View与View Model之间的松耦合关系,使得开发团队与设计团队分工明确,设计团队只需产出用户友好的界面,而开发团队则专注于业务逻辑和数据,提高了开发效率。在架构层面,模块间松耦合关系使得模块间相互依赖性降低,项目架构更稳定,扩展性得到提高,后续如需增加新模块,能做到最小的改动。在代码层面,通过合理的规划分层View Model,可提高代码重用性,使整个逻辑结构更为简洁。另外,MVVM的引入能更有效地组织应用结构,使项目模块变得清晰化、条理化,增强了代码可读性,降低了前端测试难度。

4 结束语

MVVM框架模式归根结底还是MVC精心优化后的结果,它可兼容当下使用的MVC模式。或许有些人认为,MVVM是以更复杂的方式存储DOM和数据绑定关系,比较耗内存、耗性能,但是当Web应用程序的功能达到一个量级且代码开始需要以更高效的方式组合时,使用优秀的开发框架反而会提高网站的性能。

参考文献

[1]刘立.MVVM模式分析与应用[J].微型电脑应用,2012(12):57-60.

[2]陈涛.MVVM设计模式及其应用研究[J].计算机与数字工程,2014(10):1982-1985.