软件研发与应用SOFTWARE DEVELOPMENT&APPLICATION
基于网站制作的Web前端开发技术与优化策略
陈淑明
（中山市中等专业学校，广东中山528400）
摘要：随着社会的快速发展，用户对于网站服务的要求也逐步提升。为了更好地满足用户对当前网站服务的需求，网站建设人员在网站建设过程中不仅仅使用了传统的HTML语言，同时还加强了对CSS 语言以及JavaScript语言的使用，从而有效提升了网站美观程度及网站服务质量。对网站制作的Web前端开发技术与优化策略进行了简要论述。
关键词：网站制作；Web前端；开发技术；优化策略
1基于网站制作的Web前端开发技术
1.1HTML及HTML5
网站制作的实质，就是将文本、图片等信息资源在网站中进行有规则的排列，方便用户查阅相关的信息
数据。作为当前社会中最为常见的超文本标记语言----HTML及HTML5，被许许多多网站制作人员视为Web 前端开发技术之一。HTML技术与HTML5技术较为相似，均具有以下特点：（1）两者均具有简易性的特点。两者Web前端开发语言都较为通俗易懂，通过利用HTML与HTML5技术，网站制作人员可以轻松便捷完成对网站的设计与制作。（2）两者前端开发语言均具有可扩展性的特点。为了给用户提供更好的网站服务，网站中的数据信息及服务需要定期更新。而HTML与HTML5语言采用了子类元素的方式，因此可以轻松实现对系统功能的扩展，为网站后期更新提供了极大的便利。（3）HTML语言与HTML5语言还具备较好的通用性，运用该技术制作的网站，不仅仅可以用于Windows 系统，同时还可以在Android系统以及IOS系统中应用，且不会出现兼容性差的现象。（4）用HTML与HTML5语言所编写的网站，也不会对用户的浏览器提出要求，可以应用于当前市面中的各类浏览器及各种终端。虽然HTML语言与HTML5语言极为相似，两者也有一定的差异。HTML5语言是HTML语言的更新版，与传统的HTML语言相比，其开发语言更加简便，可以有效提升网站制作人员的工作效率。同时，还新增了＜sec-tion＞、＜article＞、＜nav＞、＜aside＞等重要标签。这些标签的增加和使用，让网站结构更加合理和清晰，美观度也加以提升，从而吸引到更多用户的关注。
1.2CSS
CSS语言是当前网页制作中较常用的网页样式设计语言，它常常用于Dreamweaver网页程序开发中。CSS 样式的设计原理，主要是将网页元素的字体、颜等外观设置，保存在CSS文件中，然后在制作
网站的过程中直接对CSS文件进行调用，从而进一步优化网站结构并有效提升网站的美观性。CSS语言在网站设计中使用率极高的原因，主要因为CSS本身具有几个显着特点：首先，CSS语言具有丰富的样式定义。网站建设人员可以利用CSS语言对网站中文字字体、大小及颜进行设计，还可以对网站背景及各元素之间的距离、位置等进行预先设计，有效提升网站的美观度及实用性。其次，CSS语言还具有便于修改与使用的特点。CSS语言可以将各类网页设计定义在网站设计的style属性中。当网站建设人员需要对网站内容进行美化和优化时，只需要调用其中的style，便可以实现对网站内容的美化和优化，并且，网站设计人员还可以重复调用style，将各类元素的设计样式应用在多个不同页面中。避免了一个一个网页的修改，大大减少了重复劳动的工作量，极大提高了网站设计师的工作效率。
1.3JavaScript
JavaScript是网站建设中较常用的脚本语言之一。脚本语言在网站设计中的作用主要有以下几点：首先，通过利用脚本语言，可以轻松实现动态网页的设计，有效降低制作动态网页的设计成本和时间成本。其次，通过利用脚本语言，还可以为网页加入事件驱动，使网页更加生动并提升网页与用户之间的数据交互能力。此外，脚本语言在网站设计中的应用，方便网页中应用模型的设计，以及网页前端与数据库的连接，从而更好地
作者简介：陈淑明（1971-），女，讲师，研究方向：平面设计与网页设计
。
实用第一”/智慧密集保障网页多种功能的实现及数据信息的安全。与其他的
脚本语言相比，JavaScript脚本语言不仅仅可以实现动态网页的设计，同时其作为一款面向对象脚本语言，还可以对网站中的人机交互进行优化。此外，由于在JavaScript还含有作用域以及闭包、继承等概念遥因此，利用其对网站进行设计时，可以实现对用户的登录信息等进行限制，从而更好地保障网站中数据信息的安全。
以上3种语言，它们的职能与特点各不相同，执行标准也不一样，但在Web前端开发过程中，3种语言各有分工，缺一不可。它们的关系如图1所示。
图1三者关系
web端登录2以Web前端技术为基础的网站制作与设计
2.1网站网页布局
常见的网站大致可以分为两类：一类由单独页面组成的网站，另一类是由多个相互链接的页面共同组成的网站系统。由单独页面构成的网站，页面信息较少且结构简单，网站设计人员往往仅使用HTML和CSS语言进行设计、创建即可完成遥而由多个页面所构成的网站，页面信息较为繁多，并且多个页面之间相互跳转、链接。若不能合理地对页面结构进行规划，容易导致用户无法轻松便捷到自己所需的相关信息。因此，网站设计人员设计此类网站时，常常选用国字型布局或T型布局。国字型布局是指在页面最顶部放置网站的标志、导航栏或Banner广告，页面中间主要放置网站的主要内容，最底端则是放置网站的版权信息和等（如图2所示）。国字型布局是一些大型网站喜欢使用的布局类型。T型布局顶部一般放置网站Logo或Banner 广告，下方左侧是导航栏菜单，右侧用于放置网页正文等主要内容（如图3所示）。以上两种常见的网站版面布局，既可以让网站设计更加美观合理，同时还可以为用户提供更好的服务，方便用户在使用网站时能够快速查到所需的信息资源。
页头横条：
网站Logo+导航栏+Banner广告
左侧：
导航
菜单+其他
网站主要内容
右侧：
友情
链接+
其他
页脚横条：版权信息++其他
图2国字型布局简化示意图
页头横条：
网站Logo+Banner广告+其他
左侧：
导航
菜单+其他
网站主要内容
图3T型布局简化示意图
2.2网站制作中的导航
网站导航是网站设计中极为重要的一部分，其主要功能是为用户提供详细的网站功能介绍，并引导用户正确、合理地对网站中的相关功能服务进行使用，提升用户对网站的使用效率。为了有效提升网站中导航设计的合理性及美观性，网站设计人员首先应选用合适的网站框架，将网站导航设置在合理地方并且较为醒目。网站设计人员还需要对网站导航栏的大小、颜和样式的设计进行选择。为了方便用户使用，网站设计人员对导航栏进行设计时，必须考虑到各个网页之间的脉络关系遥当然，导航栏可以使用CSS样式表统一设计外观效果，这样，即可以有效降低网站设计人员的工作量，还为后期的修改维护提供了极大的便利。另外，为了保障网站导航栏的美观性，部分网站设计人员也会使用jQuery 以及menu等第三方插件对网站导航栏进行设计遥利用该技术的主要优势是可以有效提升网站
导航栏的美观程度，使网站导航栏设计更加科学、合理。当然，这也在一定程度上增加网站设计人员所需编写的代码量，增加了网站设计的时间成本和设计成本。
2.3网站的总体制作及设计规划
虽然导航栏的设计可以为用户的使用提供一定的便捷性，但为了向用户提供更好的服务，网站在总体设计
软件研发与应用
上仍需要保持简洁、明了的设计风格。而这便需要网站设计人员在对网站总体进行设计时采取简易、整洁的风格。此外，为了方便用户对网站中的相关数据信息进行浏览，网站设计人员还需要加强对网站结构的优化，让网站内容排版更加科学、合理。在这过程中，网站设计人员既可以采用部分国内外先进的网站格局，合理运用CSS、JavaScript等技术，进一步优化网站格局。
3Web前端开发技术优化所面临的问题
3.1HTTP请求容易发生拥堵
HTTP请求拥堵这一问题的出现，不仅仅直接影响到用户的正常使用，还对网站的正常运行造成较大影响，甚至出现网站崩溃的情况，造成网站建设者遭受巨大的损失。导致HTTP请求容易发生拥堵的主要
原因，大致有以下3点，（1）是由于网站服务器出现了网络波动或网络延迟现象，使其无法及时对用户的HTTP请求进行处理，导致了HTTP请求拥堵的现象。（2）部分跨域请求也会造成HTTP请求拥堵的现象。由于跨域请求需要进行异地处理以及VPN远程处理，因此服务器在对其请求进行处理时，难免会出现处理效率不高的 现象。（3）服务器处理效率较低也会导致该网站出现HTTP请求容易出现拥堵的问题。
3.2网站前端服务器或浏览器结构被限制的情况
网站前端服务器或浏览器结构被限制，往往表现在用户通过网站导航中的某一超链接进入特定网页时，会出现网页跳转限制或无法跳转到指定网页的现象。这一现象的出现，严重影响用户的正常使用。造成这现象的主要原因，是网站结构设计不合理。由于网站结构设计不合理或与浏览器不兼容，因此用户在进行页面跳转过程中，导致出现IP地址解析错误等现象，造成用户无法正确地跳转到相应界面。
3.3当前网站Web前端的开发标准并不完善
网站前端开发标准关系到网站建设效率及网站质量，因此网站Web前端开发标准不完善这一问题，也影响到网站的建设效率，并且还有可能导致网站建设中出现部分网页框架设计不合理等问题，从而对用户的正常使用造成影响。
4基于网站Web前端的开发技术优化策略
4.1整合网站文件，优化用户浏览器的访问效率
鉴于当前网站设计过程中出现的诸多问题，这些问题不仅仅对网站运营造成较大的影响，也直接影响到用户的正常使用和体验。为进一步对网站Web前端开发技术进行优化，提升网站服务质量，网站设计人员首先应当整合网站文件，从而优化用户浏览器的访问效率。繁多的网站文件不仅仅会加大网站服务器的负荷，同时也会使得网站对HTTP请求的处理效率降低，因此将部分网站文件打包在JavaScript以及CSS包中，既可以降低网站服务器的运行负荷，同时也可以精简网站设计中的代码，从而提升用户浏览器的访问效率。
4.2优化调整网站前端内容，促进网站用户体验提升
网站设计人员可以进一步优化调整网站前端内容，从而促进网站用户体验的提升。为了方便用户对网站中的各类服务进行使用，网站设计人员在对网站前端进行设计时既需要保障其前端的美观程度，同时也需要加强其实用性。在这过程中，网站设计人员可以先对网站前端中的相关内容进行分类，筛选出合理的内容放置在网站前端中。此外，网站设计人员还可以进一步对网站框架及导航栏进行设计，方便用户利用导航栏对网站服务进行使用，提升用户体验。
4.3对请求数量进行控制，确保请求的有效性
网站设计人员也可以对网站的请求数量进行控制，从而确保请求的有效性。在前面曾提到，若网站服务器处理能力较差，将会容易导致HTTP请求出现拥堵的现象。而为了缓解这一问题，网站设计人员可以利用JavaScript语言对HTTP请求进行筛选，拒绝部分无效请求及非法请求，更好地确保请求的有效性。同时，网站设计人员还可以对网站每天的请求量进行限制，以保障用户请求的稳定性，从而为用户提供更好的服务体验。
4.4优化DNS解析，缩短用户等待时间
网站设计人员也可以对DNS解析进行优化，以缩短用户在使用网站时的等待时间。DNS解析是指用户在访问某一网站时，网站中的解析服务器对该IP地址进行解析，从而使用户实现对该网站的登录。由于当前我国较多网站均存在DNS解析能力差，用户在登录网站时常常出现网站登录时间过长等情况。为了应对这一问题，网站设计人员首先可以对网站的解析服务器进行优化，对其解析性能进行设计并提升其对域名的解析能力，同时网站设计人员可以对该网站的解析算法进行优化，有效缩短用户在登录网站时的等待时间。
5结语
随着Web前端开发技术的逐步发展，当前网站设计水平也得到了显著提升。但是，当前我国网站在建设中出现了HTTP请求拥堵以及网站前端服务器结构限制等
SreeaeBBHI*>SBSI3EIEIEIEIffiEBBI!IBBBeaeBI3BigBlslBBai3IIBBEISBHI3glBBIIIIIIBSSI3aBIIIglEISa3BEIQISB>E 实用第一f智慧密集
问题，这些问题不仅仅影响到网站的运营，同时也对用户的使用造成影响。为了避免此类问题的出现，网站设计人员应当对网站结构进行逐步优化，并对网站文件进行整合，以提升网站服务效率。相信随着我国网站建设技术的逐步提升，我国各类网站服务质量将得到显着提升。
参考文献
[1]曹艳琴.基于网站制作的Web前端开发技术与优化
策略[J].电脑知识与技术，2020,16(23):59-60+67.[2]庄新妍.基于网站制作的Web前端开发技术与优化
[J].信息技术与信息化,2020,(07):17-19.
⑶黄霖.基于网站制作的Web前端开发技术与优化
[J].信息与电脑(理论版),2020,32(10):48-50.
[4]许跃颖.网站制作Web前端开发技术与优化措施
[J].电子技术与软件工程,2020,(07):31-32. [7]韦秀行.基于网站制作的Web前端开发技术与优化
[J]•信息与电脑(理论版)，2020,32(01):58-59+62.
亠更仝仝从仝企仝从亠4亠北亠4亠4亠期亠坎亠坎亠欢亠更从仝从仝企亠4亠4亠期亠4亠4亠期亠坎仝
(上接第54页)
score提取出来形成一个三元组构造训练的模型数据储备库以及测试的模型数据储备库。训练的模型数据得到model，再通过model预测得到推荐数据，然后把推荐数据写入到MySQLo通过model得到的不只有预测数据，还可以拿到productFeatures，即各个商品以及它的特征。
4.4实时推荐
离线服务是综合历史数据来计算的，但实时服务应 该根据用户最近的行为来推荐，实时推荐要求响应迅速，所以不能再使用ALS了。为了快速响应，应该提前预热数据，在已有的数据集上再次少量计算即可。
为了能够实现实时推荐的动态响应的动态性，势必会对其准确度与推荐算法的流程进行适当的简化，在保证推荐结果正确的情况下，减少一定的推荐元素的计算。这样可以充分地将实时推荐的速度进行一个适当的提升。
实现流程：
(1)加载redis里面的ProductResult作为实时计算的基础数据。(2)用户user1对商品p1进行了评分，就触发一次实时计算。(3)从ProductResult中选出与商品p1最相似的K个商品作为集合So(4)要过滤掉用户user1自己评分过的其他全部商品，过滤掉之后推荐的东西才是他没有见过的。(5)从Redis中获取用户user1最近时间内的K条评分，包含本次评分，作为集合RK。(6)把从(1)、(2)、(3)里面拿到的数据作为参数，开始计算推荐的产品优先级，并生成更新过后的标识符集。(7)将更新过后的标识符集与用户user1的最后推荐结果Result组合，以加工的最新的推荐结果NewResult作为最后的推荐结果输出。
5测试
商品展示系统的测试主要分为服务端测试、和客户端业务功能测试、推荐功能测试。(1)服务端测试：针对的是服务器的压力、性能、吞吐量、并发量，以及容错机制的测试。测试方法：为了提高测试的准确性，采用多种测试方法，其中有典型的黑白盒测试。(2)客户端业务功能测试：针对的是用户正常使用系统的各个功能，确保指定的某个功能按照预设的结果去执行。如：登录注册测试、展示功能测
试、编辑功能测试、权限功能测试、安全可靠性测试。通过实际的生产环境模拟真实的系统运行环境，确保测试结果的准确，使系统更加的完善、健全。(3)推荐功能测试属于客户端测试之一，但由于其较为复杂也需要单独进行单元测试，确保推荐的商品时的精准性。
6结语
对商品展示系统的研究，对其两大问题进行了主要表述与研究：一个是业务，一个是推荐。虽然商品展示系统已经初步实施，但是由于研究和实施时间以及一些内部和外部条件，仍有一些领域需要补充、优化和扩展。比如可以整合下单服务，形成一个完整的消费流程。同时系统对于商品审计功能可以进行进一步的优化，提取出一个单独的审计模块，实现部分商品的自动化审计。
参考文献
[1]陈瑞.基于Springboot高并发Java Web开发模式
[J].电脑编程技巧与维护，2019,(04):27-30. [2]陈忠菊.NoSQL数据库的研究和应用[J].电脑编
程技巧与维护,2020,(09):81-83.
⑶周千元基于Spark的个性化推荐系统的研究[D].
中南林业科技大学，2019.
[4]Ahmed Abdulhadi Awadh Hanshi.推荐系统精度提
高的实用方法[D].中南大学,2014.
⑸林琛，黄洁，刘杜钢.一种基于数据非随机缺失机
制的推荐系统方法[P].福建省：CN108287902B,
2020.

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。