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

当浏览器厂商开始创建与标准兼容的浏览器时，他们希望确保向后兼容性。为了实现这一点，他们创建了两种呈现模式：标准模式和混杂模式。在标准模式中，浏览器根据规范呈现页面;在混杂模式中，页面以一种比较宽松的向后兼容的方式显示。混杂模式通常模拟老式浏览器的行为以防止老站点无法工作。

浏览器根据DOCTYPE是否存在以及使用的哪种DTD来选择要使用的呈现方法。如果XHTML文档包含形式完整的DOCTYPE，那么它一般以标准模式呈现。对于HTML4.01文档，包含严格DTD的DOCTYPE常常导致页面以标准模式呈现。包含过渡DTD和URI的DOCTYPE也导致页面以标准模式呈现，但是有过渡DTD而没有URI会导致页面以混杂模式呈现。DOCTYPE不存在或形式不正确会导致HTML和XHTML文档以混杂模式呈现。

根据DOCTYPE是否存在选择呈现模式，被称为DOCTYPE切换或DOCTYPE侦测。

DOCTYPE切换是浏览器用来区分遗留文档和符合标准的文档的手段。无论是否编写了有效的CSS，如果选择了错误的DOCTYPE，那么页面就将以混杂模式呈现，其行为就可能会有错误或不可预测。因此一定要在每个页面上包含形式完整的DOCTYPE声明，并且在使用HTML时选择严格的DTD。

浅析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前端开发，对这个职业感触颇多。

这是一个新的职业，入门相对后台的开发人员较低，会一些基本的技术就可以了，如：html、css、js等。

但是，随着开发时间的增长你就会发现自己很快的就会进入一个瓶颈，可能会错误的认为，做前端开发不过如此。可是，如果你静下心来在回头看你写的代码，你会发现之前需求的实现方式并不是最好的，举个最简单的例子，有没有使用jquery的连缀式编程。

如：$(#id).css({color:red});$(#id).show;

可以写成，$(#id).css({color:red}).show();

不要小看这次小小的优化，实力都是慢慢积累的。

上面只是一个简单举例，要说明的是，虽然这个职业入门比较低，但是每一次提高都是艰难的.。

几乎每个前台工程师都是自学成才，因为牛人本来就少，难得遇见，就算遇到一个你也不一定就有机会能跟着他学习。所以在自学过程是坎坷的，甚至都不知道改如何进步，当然本人也在努力中。

分享一点经验：

1.千万注意写代码、和命名规范(也许n久之后或者项目大的时候这才是重中之重)。

2.html的文档结构。好的文档结构会让你写css，js变的简单合理(胜过好的代码实现方式)。

3.尽量尽自己的水平优化代码html，css，js(每一次优化都是提高)。

4.多去关组网站性能优化的方式(最后网站的访问速度和用户体验是证明你能力的时候)。

个人目前的水平有限，就分享这么多吧。

学习经验：

个人觉得，尽量看书加上实际操作来学习，因为从书上学习东西比较系统，学到的东西是系统的而不是一片一片或者一点一点的。最重要的是要去验证书上写的跟实战的结果进行对比，你会发现实际可能还真不一定是那样的。等系统学习完之后，再要提高可能就要找论坛，博客等针对某个点进行突破，后面的成长还有很长。个人能力不到那个地方不在妄加说辞。

如果按照这样的方式来学习，那么开什么书就是最重要的了，看一本好的书可以使你恍然大悟，看一本垃圾的书可能连作者都不知道他写的是什么。个人觉得“图灵”系列的书籍都是不错的，清晰、透彻，比较适合我们来学习，比如：javascript高级程序设计,精通html与css设计模式等。

Web前端开发 篇5

关键词：PHR,物联网,云平台

0 引言

个人健康档案是人们健康管理过程的规范和科学记录, 以多种渠道收集信息满足人们自我健康管理的一种手段[1]。个人健康档案的建立是“以人为本”的电子化档案, 有助于人们建立并拥有服务终身健康的信息系统, 在当今社会尤其在国内医疗资源有限的背景下有重要的现实意义。作为个人健康不间断、非静态、数字化的电子记录集, 一方面要求个人及时有效地记录个人自己表征健康状况的生理指标和症状表现;另一方面要求系统快速准确地根据个人身体的现状, 同时结合已往的个人健康档案 (以往在患病、治疗和用药情况) 进行合理的建议或者向医生专家提供准确专业的描述, 以便快速进行治疗。而传统PHR记录, 书写量大、记录杂乱、文件繁多、不易保存、录入效率低、查询困难等种种因素难以满足以上两个方面的要求。这为物联网和云服务等新技术在该应用领域的发展应用找到空间, 本文的研发工作正是围绕这方面来展开。

本文参考国外个人健康档案的现状和发展, 分析国内个人健康档案的提出重要性和需求迫切性的分析;结合个人健康档案服务平台的需求, 初步给出个人健康档案服务云平台系统的构架设计, 具体包括各个功能结构作了详细的功能设计, 覆盖了个人健康档案的一些基本操作;进而根据个人健康档案服务云平台不同对象的不同流程, 以面向对象的编程思想进行编程实现, 给出了系统的设计实践, 展示了一个界面较美观、灵活性和交互性良好的个人健康档案服务云平台系统。

1 个人健康档案概述

1.1. 个人健康档案的提出

1968年美国Weed等首先提出以问题为导向的健康档案记录方式 (problem oriented medical record, POMR) , 要求医学服务者在医疗工作中记录要采用以个体健康问题为导向的方式[2]。然而直到20世纪90年代这个概念才逐渐推广, 在计算机网络技术高度发达的今天, 个人健康档案可借助网络的力量发展的更加全面和快速。2009年我国为贯彻落实《中共中央国务院关于深化医药卫生体制改革的意见》 (中发[2009]6号) 和《国务院关于印发医药卫生体制改革近期重点实施方案 (2009-2011年) 的通知》 (国发[2009]12号) 精神, 推进居民健康档案标准化和规范化建设工作, 卫生部组织制定了《健康档案基本架构与数据标准 (试行) 》 (以下简称“标准”) 等一系列健康档案标准, 为提高我国居民健康水平奠定了基础, 也为个人健康档案系统的建立提供了标准和依据。

1.2. 健康档案数据标准

从有关个人健康数据来源可看出, 建立个人健康档案是一个横跨各个医学科目、贯穿个人一生、跨行政区域, 不断源源累积、随时动态更新、共建共用的一个长期过程。制定全国统一、科学合理、满足个人、灵活适用的个人健康档案数据标准, 是建立个人健康档案, 尤其是个人电子健康档案的关键。健康档案数据标准目前主要包括三类[3]:

(1) 健康档案相关卫生服务基本数据集标准;

(2) 健康档案公用数据元标准;

(3) 健康档案数据元分类代码标准。

依据以上三类数据标准, 系统在第二类公用数据元标准和第三类数据元分类代码标准的准则及分类下, 按第一类相关卫生服务基本数据集标准, 建立拥有基本信息、公共卫生、医疗服务三个一级类目, 其中公共卫生包括儿童保健、妇女保健、疾病控制和疾病管理四个二级类目, 从而产生三级类目32个, 最终建立起一个总计34张表作为主表的数据库。针对“标准”的第二类公用数据元标准, 主要规定个人健康档案所必须收集记录的公用数据元最小范围及数据元标准, 其中数据元是不同业务领域之间进行无歧义信息交换和数据共享的基础。本系统根据需要节选“标准”中2252个数据元的90%的内容, 用此规范和统一个人健康档案的信息内涵和外延, 指导个人健康档案数据库的规划设计。由于健康档案中的数据元之间存在着一定的层次结构关系。第三类数据元分类代码标准从信息学角度对数据元进行科学分类与编码, 继而建立一个统一的、标准化的信息分类框架, 区别不同的数据元之间的特性, 这样PHR就能够分别定位和存储相应数据, 最终做到方便个人健康档案系统用户的快速理解和共享。

2 个人健康档案服务云平台技术与设计

2.1. 物联网与云平台技术

物联网 (Internet of Things, Io T) 通过各种传感设备, 通过一定协议直接或经过多传感器信息融合后, 将这些观察对象与互联网连接。在PHR系统里, 主要心电传感器、脉搏波传感器、血压传感器、体温传感器等测量监测对象对应的生理特征参数[4], 同时扫描二维码采集药品、相关食品信息, 通过与之连接的智能终端将数据实时稳定地传送到云服务器上。

云服务器 (Elastic Compute Service, ECS) 是一种处理能力可弹性伸缩的计算服务, 其通过虚拟技术将传统的分布在不同地域的服务器, 以集群模式将它们整合成为一个逻辑上的大服务器。因此, ECS有良好可扩展性、强大的存储和计算能力、万无一失的灾难备份能力, 并且通过BGP多线独享带宽ECS可以为用户提供快速准确的服务, 而且很好地解决传统服务器由于服务网络提供商、网络攻击、并发访问带来的一系列问题。PHR系统考虑到系统可能面临的大量数据、不同地域用户等问题, 将服务器建设在云端, 目的按需决定服务能力的配备方案, 一方面保证服务能力, 一方面节约资源经费。

2.2. 个人健康档案服务云平台系统设计

2.2.1. PHR系统功能结构图

个人健康档案服务云平台Web前端主要分为登陆和健康知识的展示, 其中登录用户分为普通用户、超级管理员、普通管理员、医生, 图1显示不同角色的用户权限和功能。

2.2.2. PHR系统主要用例图示例

普通用户在注册、修改个人健康信心、修改个人账户信息、设置医生信息账户信息和数据库的交互, 如图2所示。

2.2.3. 主要流程图

从顶层数据流图可看出, 数据流向为用户访问网站页面后数据进行交互后, 信息数据向网站页面显示和数据库数据存储。

从第一层数据流图可看出, 根据用户的交互请求不同, 数据将会有不同的走向, 分别是流向网站页面显示和流向数据存储。

3 个人健康档案服务云平台系统实现

3.1. 开发环境

(1) 开发工具:Myeclipse 8.5, Tomcat 7.0, Oracle;

(2) 开发配置:CPU i3 3.6Ghz以上, 内存2G以上, 硬盘40G以上, 10M/100M网卡, Windows 7/Windows 8.1中文操作系统。

(3) 数据库管理系统:Oracle 10g及以上。

3.2. 云服务架构

PHR系统采用第三方云服务, 直接将程序部署在第三方提供的服务器上, 在确保拥有云服务器的管理权限, 或者是云服务器的空间和接口程序后, 实现网站应用的步骤如下:

1、需要在web服务上配置好网站所需的相应环境;

2、需要添加网站所使用的权限;

3、开启网站使用的端口。

其中部署网站需要注意以下几点:

1、防火墙是否有做一些限制, 如网站的80端口是否有开启;

2、服务器是否有做一些会阻止外部访问网站的安全策略;

3、域名解析方式是否正确, 是否对网站绑定了相应的域名;

4、相关的网站环境是否配置正确, 网站文件的权限是否设置正确, 可以使用探针进行测试。

3.3. Web端具体实现

首页顶部有登录、注册和搜索框, 然后欢迎登陆个人健康档案管理系统, 紧接着个人健康自测入口, 推荐的医疗健康社区入口, 医用App循环推荐, 内容部分是分为吃食、孕幼、用药、医诊、病患、真相六大块, 点击全部可以进入到各块文章具体的图文列表。

普通用户和普通管理员有个人健康档案, 他们可修改编辑个人账户信息, 查看系统根据个人填写信息的推荐内容及个人医生对自己的建议, 同时拥有以下编辑权限:

1.基本信息, 包含姓名、性别、民族、年龄、联系方式、邮箱;生活调查, 包含遗传病史 (一般为家族) 记录、过敏记录、生活习惯描述 (是否抽烟、喝酒、熬夜等) 、特殊病种记录、疫苗注射记录、全身体检记录;体检报告相关指标;家庭常用备药。

2.就诊记录, 包括就诊时间、就诊医院 (或诊所) 、病因、诊断、用药。

3.用药记录, 包含自己用药或医生开的药方, 具体记录用户用药起始时间、期间所用药物、用药持续时间。

4. 健康日志, 记录个人平时生活中出现的不好的身体状况, 包含时间、身体描述、问题解决、后续观察。

在完善自己的个人信息后, 可以浏览这些基本信息, 同时可查看系统医生专家给出的建议和意见。以BMI、生活习惯、血压、乙肝五项的值数据基础, 系统建议针对用户信息进行判断处理, 提出想应的建议。

以医生角色登陆系统的用户, 除了可以通过查看以经授权的用户的详细健康信息, 可以添加写入自己的建议, 同时系统会根据已有数据进行分析, 生成疾病年龄分布、人数数量、性别对比的折线图和饼状图。以直观的效果给出统计学上的数据, 以便指导对相关疾病的诊断、用药和研究。

4 结论

如今当病人和医生需要完整、科学的医疗信息时, 散而乱的医疗记录让人苦不堪言, 导致医疗不尽如意[5]。早在2004年, 美国制定了“确保绝大多数美国人拥有共享的电子健康记录”的目标。到2011年, 美国政府为了电子健康档案的应用变得更好, 实施了“有意义使用”联邦激励项目, 促使医疗健康提供商必须满足一定的要求。随着我国对人口健康的要求, 需要记录、获取居民的健康信息, 进行科学有效的健康管理, 从而拥有更健康的体魄, 提高居民的整体身体质量。个人健康档案服务云平台系统是以个人问题为导向记录完整健康信息, 提供随地随时获取、记录的极大便捷, 为临时诊断、长期治疗和有针对性保健提供数据基础。个人健康档案建立将不断被认可, 将被广泛应用, 个人记录追踪自身医疗史, 已满足个人健康主动管理需求。

本文按软件工程的开发步骤, 参考国外资源和国内的特色, 初步设计并实现了个人健康档案服务云平台的前端系统, 努力做到大部分档案可以电子信息化, 并从服务角度展示了一个界面较美观、灵活性和交互性良好的个人健康档案服务云平台系统。

参考文献

[1]韦凤伶.个人健康管理系统的设计与实现[D].成都:西南交通大学医学专业, 2011.

[2]斐雪.物联网环境下智慧家居系统的交互行为研究[J].新视觉艺术.2011, 8 (2) :56-58.

[3]佚名.卫生部发布《健康档案基本架构与数据标准 (试行) 》[EB/OL].http://news.hc3i.cn/art/201001/1047.htm, 2010-01-16/2010-05-18.

[4]曾绳涛, 曹志龙.基于物联网的智能移动医疗动态监护系统[J].工业控制计算机, 2014, (6) :26-27.DOI:10.3969/j.issn.1001-182X.2014.06.011.

Web前端开发 篇6

1 教学方法

传统的《Web前端开发技术》教学方式主要有两种:第一种是以教师为主体, 采用满堂灌的教学方式, 其结果会使学生失去学习兴趣进而产生厌学的情绪[1]。第二种采用讨论式教学方法, 让学生参与到课堂中来, 教师提出问题, 讲解基本知识与理论, 学生进行集体讨论与分析, 找到问题的解决方案。然而, 这两种方式的教学效率均不是很高, 第一种方式学生学习积极性不高, 吸收知识的能力较差;第二种方式在学生人数较少的情况下尚可, 如果学生人数较多, 很容易就某一问题讨论过于激烈, 而严重影响教学进度, 导致一些老师在影响教学进度的情况下, 把剩余的章节改为学生自学, 导致学生学习不够系统。

目前, 云计算技术已逐渐成熟, 将云计算引入课堂对传统教学方式进行改造, 提高学生学习的兴趣与主动性, 从而提高教学效率已成为当前趋势之一。为此, 采用问题驱动式教学方式, 将每节课的教学内容提炼为几个问题。教师在服务器端发布问题并进行知识讲解, 学生对所讲解的问题消化后, 在云端给出解决方案。教师可以根据学生给出的解决方案进行归类。如果大部分学生都给出很好的解决方法, 可临时组建一个讨论组, 以掌握知识较好的学生为主体, 组织哪些尚未掌握知识的学生展开讨论;如果大部分学生没有给出很好的解决方案, 可组织多个讨论组, 并根据问题回答情况进行分组并展开讨论。同时可以根据学生知识掌握情况, 把教材中的内容划分为基本内容和高级内容, 基本内容每个学生必须完成, 高级内容可由部分能力较强的学生帮其他学生协作完成。

2 教学手段

以Web前端开发工程师岗位需求为导向, 根据目前软件开发领域最新技术需求, 将原来仅包含HTML、CSS、Java Script 3板块的教学内容扩充为包含HTML、HTML5、CSS、Java Script、JQuery、Ajax、DOM和JQuery插件等内容。新构建的知识体系突出两个重点: (1) 以JQuery选择器为核心, 在JQuery选择器的基础上, 依次展开DOM、JQuery事件和动画等操作; (2) 将Java Script、CSS和DOM等技术进行融合, 在融合的基础上引出Ajax技术, 并将Java Script的Ajax技术和JQuery的Ajax技术进行对比讲解。另外, 由于Web前端涉及到的知识繁多, 对Web前端知识进行归类分析, 绘制出Web前端知识拓扑图, 学生可以根据拓扑图循序渐进的学习。

3 注重实践能力培养

3.1 实验内容项目化

将实验内容规划成两部分:实验 (课内实验) 和实践 (课程设计) ;实验由JQuery选择器、DOM操作、JQuery事件和动画、表单和表格、Ajax和JQuery插等6 部分组成。将Web前端开发技术教材中8 个章节的知识进行综合, 精心设计了16 次实验32个实验项目。在实验教学过程中, 采用项目模块驱动式教学法, 将真实项目案例进行拆分融入到实验项目中。实践课程让学生分组完成一个项目软件, 让学生在项目实践中掌握所学的知识, 提高学生的实践动手能力和项目开发技能。

3.2 优秀代码示范化

为了提高学生代码编写质量, 将实验过程划分为三个阶段:在第一个阶段, 教师采用启发式对问题进行分析和引入, 提出最基本的解决方案, 然后由学生自主练习和小组内讨论, 提出解决方案。第二阶段, 教师进行巡查指导, 挖掘出代码编写较优秀的学生, 选择优秀学生的代码进行示范, 并由学生讲解自己的编程思路、过程及技巧。在交流过程中, 学生的能力得到赏识和提高, 可以形成良好的学习氛围, 提高学生学习的积极性。第三阶段, 由教师展示优秀代码, 学生对照优秀代码对自己编写的代码进行优化, 然后教师总结编程技巧, 使学生的编程能力升华。

4 班级管理小组化

为了培养学生的协作精神, 将班级划分为若干个小组, 每组5 人, 组员轮流担任组长职务。组长负责协调小组内部学习事务安排和学习检查等工作, 营造团队合作意识, 通过组内互帮互学, 全面提高学生的能力。组长代表小组参与小组之间的讨论, 实现组间互帮互学, 共同提高。

5 考试与成绩评定的改革举措

成绩评定是引导学生加强实践训练的指挥棒[2,3]。为鼓励学生创新和重视应用能力的培养, 我们对作业、成绩的评定侧重于考察学生对知识的灵活应用情况, 而不仅仅考察知识的识记和简单应用。实行平时成绩和实验环节成绩和期末考试成绩相结合的评价方式, 以全面考核学生的学习效果和综合素质。我们考试题型分为以下几种类型:

基本知识, 着重考查学生对基本知识的掌握情况。在实际开发过程中, 一个小的知识点没有掌握精确, 可能会导致程序出错且调试困难, 所以基本知识题要求精确掌握, 通常由单选题、填空题和判断题。

简单应用型。考查知识点的简单应用情况, 是实际项目中抽象出的简单操作和解决方案。通常由操作题和简答题。

实验环节成绩:在传统的实验课考核的基础上, 加入随机作业的成绩评定方式。为了避免学生之间互相抄袭, 由教师提供一套实验试题库, 学生随机抽取试题, 完成实验步骤和目的, 然后由教师验收检查并给出成绩, 实验课成绩应包括学生的出勤情况、实验操作过程、提问回答情况、实验报告情况等环节构成, 其中实验操作过程为主要评分依据。最后将所有实验项目成绩综合后给出每个学生的实验环节成绩。

6 结束语

经过多年的实验教学实践证明, 《Web前端开发技术》教学改革大大激发了学生的学习主动性和积极性, 学生知识掌握程度、实践动手能力、自学和创新能力明显提高, 教学效果显著, 为学生将来从事软件开发打下坚实的基础。

摘要：由于《Web前端开发技术》涉及到的技术繁多, 综合性比较强, 同时它又是一门实践性很强的科目, 因此学习难度较大。针对这种情况, 从教学方法和教学手段等方面进行改革, 以提高学生学习的学习兴趣和主动性, 培养学生的实践能力, 实现Web前端开发技术课程的教学目的。

关键词：教学改革,Web前端教学,成绩评定

参考文献

[1]危旦生.任务驱动教学法在中职计算机教学中的应用[J].福建电脑, 2014 (3) :192-193

[2]张婵, 陈晨.浅论高校计算机教学改革与发展策略[J].电子世界, 2014 (12) :485-485

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

关键词：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应用前端性能优化浅析 篇8

减少页面的HTTP请求次数是首先要做的一步, 这是改良初次访问用户等待时间的最重要的方法。

1.1 图片地图

在站点导航中, 最常见的应用就是超链接, 它通常带有一些文本, 并被关联到目标URL上。一种更为没关的选择是将超链接关联到图片上, 例如在导航栏或按钮中。如果是以这种形式关联多个带有超链接的图片, 使用图片地图既能减少HTTP请求, 又无需改变页面外观感受。

图片地图 (Image Map) 允许你在一个图片上关联多个URL, 目标URL的选择取决于用户单击了图片上的哪个位置。获取图片地图的时间比获取为每个超链接使用分离图片的导航时间快很多, 这是因为图片地图减少了HTTP请求。

1.2 内联图片

内联图片是指在Web页面中包含图片但无需任何额外的HTTP请求, 它允许将小块数据内联为立即数, 数据就在其URL自身之中, 格式如下:

示例:

data:URL模式大多数用于内联图片, 也可以用在任何需要指定URL的地方, 如:script和a标签中。

1.3 合并脚本和样式表

大多数Web站点, 都会用到Java Script脚本和层叠样式表, 通常把脚本和样式表分别保存在独立的.js和.css文件中, 然后在Web页面中引用。为了符合模块化的开发原则, 通常不会将Java Script代码和CSS代码放在同一个文件中。分散保存的Java Script代码应该合并在一个文件中, 样式表也应该合并, 这样可以使用户在浏览网页时只需下载一个.js或者.css文件, 这样减少了HTTP请求, 从而减少响应时间, 提高访问速度。

2 客户端缓存优化

使用客户端缓存可以优化Web性能, 减少用户等待的时间。减少HTTP请求的方式可以明显提高用户首次访问Web站点的速度, 客户端缓存的使用, 对于页面的首次访问是不会减少响应时间的, 对性能的提高会在再次访问同一个页面的时候体现出来。

在设计Web页面的时候, 首次访问的响应时间并不是唯一需要考虑的。如果这样, 可以不在页面上放置任何图片、脚本和样式表, 就能够把减少HTTP请求发挥到极致。然而, 我们都知道, 图片、脚本和样式表可以加强用户体验, 但是又会让页面的加载时间更长。

通过对脚本, 样式表, 图片和Flash使用一个长久的Expires头, 使这些组件被缓存, 就使得在浏览器浏览后续的页面时避免了不必要的HTTP请求。Web服务器使用Expires头告诉Web客户端它可以使用一个组件的当前副本, 直到指定的时间为止。如:

它表示浏览器该响应的有效性持续到2012年4月22日为止。如果为页面中的一个图片返回了这个头, 浏览器在后续的页面浏览中会使用缓存的图片, 将HTTP请求的数量减少。

3 压缩技术

除了减少和限制不必要的HTTP请求来解决响应时间的问题外, 还可以通过减小HTTP响应的大小, 在传输前对文件进行压缩, 进一步减少响应时间。

从HTTP 1.1开始, Web客户端就可以通过HTTP请求中的Accept-Encoding头来标识对压缩的支持:

如果Web服务器在请求的文件头中检测到上面的代码, 就会以客户端列出来的方法中的一种来压缩响应内容。Web服务器把压缩方法通过响应文件头中的Content-Encoding来返回给浏览器:

Gzip是目前最盛行也是最有效的压缩方式, 这是由GNU项目开发的一种免费的格式, 并被标准化为RFC 1952。另外一种压缩格式是deflate, 但是它的效果较差而且不太流行。

Gzip大约可以减少70%的响应大小, 目前约有90%通过浏览器传输的互联网互换支持gzip格式。Gzip压缩所有可能的文件类型, 是减少文件体积, 增加用户体验的最好方法。

4 页面元素的优化

4.1 CSS放在页面顶部

除了HTML文档外, 其他很多组件也都是呈现页面内容所必需的。Web页面的所有内容, 通常是按照他们在文档中出现的先后顺序下载的。

样式表在Web页面中放置的位置对于Web页面性能的影响是很明显的。如果把样式表放在页面底部, 实际产生的页面速度比放在页面顶部慢;将样式表放在文档顶部的head标签中, 能使页面加载得更快。

4.2 脚本置于页面底部

脚本带来的问题就是它阻拦了页面的平行下载。HTTP 1.1规范建议, 浏览器每个主机名的并行下载内容不超过两个。如果你的图片放在多个主机名上, 你可以在每一个并行下载中同时下载2个以上的文件。但是当下载脚本时, 浏览器就不会同时下载其它文件了, 即使是主机名不相同, 这是因为脚本可能使用document.write来修改页面内容, 因此浏览器会等待, 以确保页面能够恰当地布局。

脚本对Web页面的影响表现在两个方面, 一是脚本会阻塞其后面内容的呈现, 另外脚本会阻塞对其后面组件的下载。所以, 如果将脚本放在页面顶部, 页面中的所有内容都位于脚本之后, 整个页面的呈现和下载都会被阻塞, 直到脚本加载完毕。

放置脚本的最好地方是页面的底部。这不会阻止页面内容的呈现, 而且页面中的可视组件可以尽早下载, 虽然其请求时间较长, 但对页面影响很小, 可以很好提高用户的体验。

5 结语

对于Web应用开发人员来说, 在编写Web应用时注意性能问题。本文仅针对Web应用的前端性能优化作了简要分析, 提出了一些W e b站点前端性能优化技术的方法, 但还有很多与前台性能相关的问题还没有涉及到, 比如避免使用CSS表达式、减少DNS查找、精简Java Script、避免重定向、配置ETag、使用Ajax优化请求等。

Web站点的性能分析不仅仅是一种技术, 更是一门艺术。通过性能优化, 尽可能确保Web站点能够满足人们对性能方方面面的要求。

参考文献

[1]孙友仓.提高ASP.NET应用程序性能方法浅析[J].福建电脑, 2006 (10) .

[2]谭建平.Web网站系统性能优化研究及其应用[D].重庆大学, 2008 (5) .

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

截止至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 结束语