论文部分内容阅读
【摘要】 本文以基于软件工程的Web开发技术为主题，围绕Web前端开发的特点、技术语言、面临的问题、制约优化的因素以及相应的对策、Web开发流程等方面展开阐述。在网络越发发达的二十一世纪，越来越多的人选择Web前端，Web前端以其图形化、动态化、分布式、交互性等特点在互联网中占有一席之地，存在着无法预测的发展前景。当然目前国内的Web前端方向的技术等方面存在着亟待被解决的问题，本文简单总结了最常见的制约Web前端发展的因素，并提出了一些解决方法。
【关键词】 Web前端优化 软件工程 Web开发技术 Web的特点
引言：
在系统开发的过程中，Web技术发挥着主要的作用，同时组件技术的发展为系统的开放性和集成性提供了便利[1]。当前Web系统的市场存量是非常大的，很多场景依然离不开Web系统，随着云计算、大数据和物联网的逐渐落地应用，Web开发的任务边界也在得到拓展，这个过程不仅需要大量的开发人才，同时也需要Web领域不断进行技术迭代和创新。
可以用于Web系统开发的编程语言还是比较多的，比如PHP、Java、Python、C#等语言都可以从事Web系统开发。从编程语言自身的发展情况和应用情况来看，Python的上升趋势还是比较明显的，相信在大数据和人工智能的推动下，未来Python语言的前景还是比较广阔的。
一、基于软件工程的web开发技术的开发特点
Web开发技术在不断的发展过程中，主流开发技术及开发框架不断更新换代，它的特点与优势是不可否认的。总而言之，Web开发技术具有以下几个方面的特点：
1.1与平台无关
无论用户使用的平台是什么，都是可以通过Internet来访问www，因为其对系统平台没有什么限制，不管用户是从windows、unix、macintosh等等都可成功访问。
1.2分布式
Web可以传递音频、视频，这些信息将会占用大量的内存，甚至没有办法预知信息多少，但是Web开发技术并不会将信息集中地存储在一个站点上，而是进行分散存储，将信息存放在不同的站点上，但是在调用的过程中不分散，只需要在浏览器指明是哪个站点就可以了。
1.3动态化
动态化的特征指的是Web信息会及时更新，保证Web上的信息一直都是最新动态展示出来的。如协议的发展状况、招聘信息、购物网站以及一些公司的广告等。一般情况下，每个站点都要尽量保证信息的及时性。
1.4交互性和可测试性
Web中含有大量的超链接，用户可以通过点击超链接从而访问多个站点，访问的站点是由用户决定的。另外，Web产品对稳定性和便捷性有較高的要求，必须保证Web的可测试性。
二、Web前端开发面临的问题
2.1兼容性问题
用户总是希望不管用什么浏览器或者设备打开系统页面的时候，看到的页面显示的信息是完全一样的，然而事实并非如此。不同的浏览器的标签默认的外补丁和内补丁不同。另外，相同的标签在不同的浏览器中也可能会有不同的显示效果或者默认值，比如：块属性标签float后，又有横行的margin情况下，在ie6显示margin比设置的要大。更甚至对于相同浏览器的不同版本都要有不同的处理方法。
2.2交互的复杂度
浏览器引擎提供的接囗跟UI交互的要求相比较低级。所以导致了前端技术的热门话题是javascript， css的预处理器、mvc框架和微框架的讨论。
2.3代码可维护性
复杂度的提升直接影响代码的维护性。JS/CSS/HTML代码生命周期越来越长，也就越来越需要从代码质量、架构和工具上保证它们的可维护性。
三、制约Web前端优化的因素
目前，国内对于web前端的优化的研究相比之下处于较低的水准，即便是阿里、百度等这些互联网大厂，也并未提出行之有效的解决方案。现今，制约web前端优化的因素主要有以下几个方面：
3.1 Browser/Server结构
用户在浏览网页的过程中需要经历以下步骤：输出网页URL→通过域名解析IP地址→向Web服务器发送访问请求→服务器确认请求寻找资源文件→服务器反馈→服务器发送HTML文件→浏览器接收HTML文件并请求资源文件→服务器确认资源文件发送给浏览器→浏览器接收资源并重新渲染→访问完成。因此Browser/Server结构迄今为止仍是Web开发过程中存在的一大难题。
3.2浏览器连接的限制问题
http协议中规定，为了避免服务器堵塞的问题，服务器和客户端之间的并发连接数量存在着数量的限制，在同一个时间点内，服务器、用户端间的持久性连接数为1个。然而，在Web页面的实际访问中，很多情况下是难以避免二次连接的问题的。例如：IE浏览器在打开二次连接时可能会遇到一些问题。
四、Web前端优化对策
4.1 Browser/Server结构优化
可以从服务器、HTTP请求、加载、Ajax等方面对Browser/Server结构进行优化工作。
4.1.1服务器方面
现今，最常用的方法是优化web网页域名、使用Gzip压缩资源以及改进缓存设置等。大家常见的服务器一般分为塔式服务器、机架式服务器和刀片服务器，而Web服务器常用的一般是前两者。
4.1.2 HTTP请求方面
HTTP请求优化指的是优化请求的资源，例如对图片进行优化处理的例子，使用CSS Spretes技术来增大传送效率。 4.1.3 Ajax方面
该方法是指充分利用Ajax（可缓存）来实现性能的提升，Ajax本身就有着异步特征，通过传输的异步差异，可为用户带来更加快速的浏览体验。但是这种方法却会导致用户在等待JavaScript的过程中花费一定的时间，所以Ajax的优化效果取决于采用何种异步优化方法以及用户以何种方式进行访问。
4.2二次链接优化
目前二次链接优化主要是依靠“协调调度”来实现的，在TDD（是指测试驱动开发（Test-Driven Development）），是敏捷开发中的一项核心实践和技术，它的原理是在编写功能代码之前，先编写单元测试用例的代码，由测试代码来确定产品代码，基本思路是通过测试推动整个开发的进程，但是测试并不是简单的测试工作，而是把需求分析、设计、质量控制量化的过程。用户在访问网页的时候，可以通过合理排列、调度访问web网页的顺序，从而协调操作错误或者多次访问引起的一些问题，最终可以减少用户访问页面时用于等待的时间。浏览器在用户访问页面的时候合理的介入，并进行一定的干预操作，目的是将TDD、TSR最大可能的减少。由此，因为二次连接而导致的堵塞问题就得到了有效的解决了。
五、web开发技术的开发流程
Web开发技术最常见的是被应用于网站的开发与制作，其技术方面涉及到的知识相当广泛，然而部分人不能明确Web应用的开发周期，所以很难准确的估算出开发成本的预算，下面以Web项目开发为例，整体阐述Web项目的开发流程。
5.1选择开发技术
依据用户需求选择最适合的开发工具，以减少开发中可能会出现的各种问题。
5.2搭建开发环境
根据客户需求进行开发环境的搭建。
5.3构建模型与编码阶段
技术人员可以根据客户的需求构建具体开发模型和框架，以便于后续开发人员的开发工作。
5.4测试与部署阶段
测试是开发过程中及其重要的一个环节，技术人员需要测试自己负责的模块的功能是否满足了客户需求，并发现程序中的错误并改进，根据测试结果对代码进行增删改查等工作，提高程序的可维护性和可扩展性。
5.5数据分析服务阶段
在项目上线之后，对用户的行为、项目的访问量等信息进行监测。
六、Web项目的三大图
6.1功能结构图
主要是为了清晰的展现出各部分的功能，理清楚内部逻辑关系，使之条理化。
6.2业务流程图
方便業务员全面了解业务处理的过程，是系统分析员、管理人员、业务操作人员交流思想的工具，并且可以用它分析出业务流程的合理性。
6.3用例图
从用户的角度描述系统的功能，同时也清晰的说明了各项功能的操作者。用例图可以准确的表达系统的功能。
七、结束语
综上所述，虽然Web开发技术仍然存在着一些问题，但是因其具有图形化、动态化、分布式、交互性等优势被许多企所选择。并且，最近几年，各种前端框架层出不穷，H5开发模式也越来越流行，逐渐涌现出了单页网站和渐进式网络应用程序，并且已经得到了极大的普及。近几年，HTML5的来袭更是继Ajax之后又一次将前端技术推向风火浪尖，传统软件互联网化已经是大势所趋。在这个用户体验为王的时代，用户在享受Web带来的便捷的同时也对互联网产品的用户体验有了更高的要求，这意味着前端开发人员也面临着更多的挑战和机会。
参 考 文 献
[1]岳彩梦. 基于软件工程的Web开发技术[J]. 电子技术与软件工程， 2019， 154（08）：70.
[2]姜海红. 浅议B/S结构系统的优化问题[J]. 信息系统工程， 2019， 000（006）：84.
[3]许向阳， 任皓. 基于Nginx的Web服务器优化和防护[J]. 内蒙古科技与经济， 2019， 000（012）：77-78.
[4]陈志龙. 软件工程中Web开发技术的应用与研究[J]. 计算机产品与流通， 2019， 000（005）：P.24-24.
[5]李若兰.基于Nginx的Web服务器优化的应用研究[J].科技风，2021（09）：125-126.
[6]曹阳. 软件工程Web技术开发平台[J]. 电子技术与软件工程， 2019， 151（05）：50.
[7]赵莹， 刘佰龙， 王志晓. 基于网络学习空间的对分课堂教学模式应用分析——以Web应用开发技术课为例[J]. 计算机教育， 2018， No.287（011）：85-88.
[8]朱红斌. 关于WEB前端开发技术的课程教学模式的创新研究[J]. 科技风， 2018， 000（033）：81.
[9]肖美婷. 移动WEB开发技术在商务网站的应用及发展趋势探究[J]. 中国新通信， 2018， 20（017）：125.
[10]王佳琪. 基于J2EE架构的分布式企业级Web应用研究[J]. 计算机产品与流通， 2018（10）：27-27.
【关键词】 Web前端优化 软件工程 Web开发技术 Web的特点
引言：
在系统开发的过程中，Web技术发挥着主要的作用，同时组件技术的发展为系统的开放性和集成性提供了便利[1]。当前Web系统的市场存量是非常大的，很多场景依然离不开Web系统，随着云计算、大数据和物联网的逐渐落地应用，Web开发的任务边界也在得到拓展，这个过程不仅需要大量的开发人才，同时也需要Web领域不断进行技术迭代和创新。
可以用于Web系统开发的编程语言还是比较多的，比如PHP、Java、Python、C#等语言都可以从事Web系统开发。从编程语言自身的发展情况和应用情况来看，Python的上升趋势还是比较明显的，相信在大数据和人工智能的推动下，未来Python语言的前景还是比较广阔的。
一、基于软件工程的web开发技术的开发特点
Web开发技术在不断的发展过程中，主流开发技术及开发框架不断更新换代，它的特点与优势是不可否认的。总而言之，Web开发技术具有以下几个方面的特点：
1.1与平台无关
无论用户使用的平台是什么，都是可以通过Internet来访问www，因为其对系统平台没有什么限制，不管用户是从windows、unix、macintosh等等都可成功访问。
1.2分布式
Web可以传递音频、视频，这些信息将会占用大量的内存，甚至没有办法预知信息多少，但是Web开发技术并不会将信息集中地存储在一个站点上，而是进行分散存储，将信息存放在不同的站点上，但是在调用的过程中不分散，只需要在浏览器指明是哪个站点就可以了。
1.3动态化
动态化的特征指的是Web信息会及时更新，保证Web上的信息一直都是最新动态展示出来的。如协议的发展状况、招聘信息、购物网站以及一些公司的广告等。一般情况下，每个站点都要尽量保证信息的及时性。
1.4交互性和可测试性
Web中含有大量的超链接，用户可以通过点击超链接从而访问多个站点，访问的站点是由用户决定的。另外，Web产品对稳定性和便捷性有較高的要求，必须保证Web的可测试性。
二、Web前端开发面临的问题
2.1兼容性问题
用户总是希望不管用什么浏览器或者设备打开系统页面的时候，看到的页面显示的信息是完全一样的，然而事实并非如此。不同的浏览器的标签默认的外补丁和内补丁不同。另外，相同的标签在不同的浏览器中也可能会有不同的显示效果或者默认值，比如：块属性标签float后，又有横行的margin情况下，在ie6显示margin比设置的要大。更甚至对于相同浏览器的不同版本都要有不同的处理方法。
2.2交互的复杂度
浏览器引擎提供的接囗跟UI交互的要求相比较低级。所以导致了前端技术的热门话题是javascript， css的预处理器、mvc框架和微框架的讨论。
2.3代码可维护性
复杂度的提升直接影响代码的维护性。JS/CSS/HTML代码生命周期越来越长，也就越来越需要从代码质量、架构和工具上保证它们的可维护性。
三、制约Web前端优化的因素
目前，国内对于web前端的优化的研究相比之下处于较低的水准，即便是阿里、百度等这些互联网大厂，也并未提出行之有效的解决方案。现今，制约web前端优化的因素主要有以下几个方面：
3.1 Browser/Server结构
用户在浏览网页的过程中需要经历以下步骤：输出网页URL→通过域名解析IP地址→向Web服务器发送访问请求→服务器确认请求寻找资源文件→服务器反馈→服务器发送HTML文件→浏览器接收HTML文件并请求资源文件→服务器确认资源文件发送给浏览器→浏览器接收资源并重新渲染→访问完成。因此Browser/Server结构迄今为止仍是Web开发过程中存在的一大难题。
3.2浏览器连接的限制问题
http协议中规定，为了避免服务器堵塞的问题，服务器和客户端之间的并发连接数量存在着数量的限制，在同一个时间点内，服务器、用户端间的持久性连接数为1个。然而，在Web页面的实际访问中，很多情况下是难以避免二次连接的问题的。例如：IE浏览器在打开二次连接时可能会遇到一些问题。
四、Web前端优化对策
4.1 Browser/Server结构优化
可以从服务器、HTTP请求、加载、Ajax等方面对Browser/Server结构进行优化工作。
4.1.1服务器方面
现今，最常用的方法是优化web网页域名、使用Gzip压缩资源以及改进缓存设置等。大家常见的服务器一般分为塔式服务器、机架式服务器和刀片服务器，而Web服务器常用的一般是前两者。
4.1.2 HTTP请求方面
HTTP请求优化指的是优化请求的资源，例如对图片进行优化处理的例子，使用CSS Spretes技术来增大传送效率。 4.1.3 Ajax方面
该方法是指充分利用Ajax（可缓存）来实现性能的提升，Ajax本身就有着异步特征，通过传输的异步差异，可为用户带来更加快速的浏览体验。但是这种方法却会导致用户在等待JavaScript的过程中花费一定的时间，所以Ajax的优化效果取决于采用何种异步优化方法以及用户以何种方式进行访问。
4.2二次链接优化
目前二次链接优化主要是依靠“协调调度”来实现的，在TDD（是指测试驱动开发（Test-Driven Development）），是敏捷开发中的一项核心实践和技术，它的原理是在编写功能代码之前，先编写单元测试用例的代码，由测试代码来确定产品代码，基本思路是通过测试推动整个开发的进程，但是测试并不是简单的测试工作，而是把需求分析、设计、质量控制量化的过程。用户在访问网页的时候，可以通过合理排列、调度访问web网页的顺序，从而协调操作错误或者多次访问引起的一些问题，最终可以减少用户访问页面时用于等待的时间。浏览器在用户访问页面的时候合理的介入，并进行一定的干预操作，目的是将TDD、TSR最大可能的减少。由此，因为二次连接而导致的堵塞问题就得到了有效的解决了。
五、web开发技术的开发流程
Web开发技术最常见的是被应用于网站的开发与制作，其技术方面涉及到的知识相当广泛，然而部分人不能明确Web应用的开发周期，所以很难准确的估算出开发成本的预算，下面以Web项目开发为例，整体阐述Web项目的开发流程。
5.1选择开发技术
依据用户需求选择最适合的开发工具，以减少开发中可能会出现的各种问题。
5.2搭建开发环境
根据客户需求进行开发环境的搭建。
5.3构建模型与编码阶段
技术人员可以根据客户的需求构建具体开发模型和框架，以便于后续开发人员的开发工作。
5.4测试与部署阶段
测试是开发过程中及其重要的一个环节，技术人员需要测试自己负责的模块的功能是否满足了客户需求，并发现程序中的错误并改进，根据测试结果对代码进行增删改查等工作，提高程序的可维护性和可扩展性。
5.5数据分析服务阶段
在项目上线之后，对用户的行为、项目的访问量等信息进行监测。
六、Web项目的三大图
6.1功能结构图
主要是为了清晰的展现出各部分的功能，理清楚内部逻辑关系，使之条理化。
6.2业务流程图
方便業务员全面了解业务处理的过程，是系统分析员、管理人员、业务操作人员交流思想的工具，并且可以用它分析出业务流程的合理性。
6.3用例图
从用户的角度描述系统的功能，同时也清晰的说明了各项功能的操作者。用例图可以准确的表达系统的功能。
七、结束语
综上所述，虽然Web开发技术仍然存在着一些问题，但是因其具有图形化、动态化、分布式、交互性等优势被许多企所选择。并且，最近几年，各种前端框架层出不穷，H5开发模式也越来越流行，逐渐涌现出了单页网站和渐进式网络应用程序，并且已经得到了极大的普及。近几年，HTML5的来袭更是继Ajax之后又一次将前端技术推向风火浪尖，传统软件互联网化已经是大势所趋。在这个用户体验为王的时代，用户在享受Web带来的便捷的同时也对互联网产品的用户体验有了更高的要求，这意味着前端开发人员也面临着更多的挑战和机会。
参 考 文 献
[1]岳彩梦. 基于软件工程的Web开发技术[J]. 电子技术与软件工程， 2019， 154（08）：70.
[2]姜海红. 浅议B/S结构系统的优化问题[J]. 信息系统工程， 2019， 000（006）：84.
[3]许向阳， 任皓. 基于Nginx的Web服务器优化和防护[J]. 内蒙古科技与经济， 2019， 000（012）：77-78.
[4]陈志龙. 软件工程中Web开发技术的应用与研究[J]. 计算机产品与流通， 2019， 000（005）：P.24-24.
[5]李若兰.基于Nginx的Web服务器优化的应用研究[J].科技风，2021（09）：125-126.
[6]曹阳. 软件工程Web技术开发平台[J]. 电子技术与软件工程， 2019， 151（05）：50.
[7]赵莹， 刘佰龙， 王志晓. 基于网络学习空间的对分课堂教学模式应用分析——以Web应用开发技术课为例[J]. 计算机教育， 2018， No.287（011）：85-88.
[8]朱红斌. 关于WEB前端开发技术的课程教学模式的创新研究[J]. 科技风， 2018， 000（033）：81.
[9]肖美婷. 移动WEB开发技术在商务网站的应用及发展趋势探究[J]. 中国新通信， 2018， 20（017）：125.
[10]王佳琪. 基于J2EE架构的分布式企业级Web应用研究[J]. 计算机产品与流通， 2018（10）：27-27.