基于网站制作的Web前端开发技术与优化策略

软件研发与应用

SOFTWARE

DEVELOPMENT

&

APPLICATION

基于网站制作的

Web

前端开发技术与优化策略

陈淑明

（

中山市中等专业学校

，

广东中山

528400

）

摘

要

：

随着社会的快速发展

，

用户对于网站服务的要求也逐步提升

。

为了更好地满足用户对当前网

站服务的需求

，

网站建设人员在网站建设过程中不仅仅使用了传统的

HTML

语言

，同时还加强了对

CSS

语言以及

JavaScript

语言的使用

，

从而有效提升了网站美观程度及网站服务质量

。

对网站制作的

Web

前

端开发技术与优化策略进行了简要论述

。

关键词

：

网站制作

；

Web

前端

；

开发技术

；

优化策略

1

基于网站制作的

Web

前端开发技术

1.1

HTML

及

HTML5

语言

，

它常常用于

Dreamweaver

网页程序开发中

。

CSS

样式的设计原理

，

主要是将网页元素的字体

、

颜色等外

网站制作的实质,就是将文本

、

图片等信息资源在

网站中进行有规则的排列

,

方便用户查阅相关的信息数

观设置

，

保存在

CSS

文件中

，

然后在制作网站的过程中

直接对

CSS

文件进行调用

，

从而进一步优化网站结构并

据

。

作为当前社会中最为常见的超文本标记语言

----

HTML

及

HTML5,

被许许多多网站制作人员视为

Web

有效提升网站的美观性

。

CSS

语言在网站设计中使用率

极高的原因

，

主要因为

CSS

本身具有几个显着特点

：

首

先

，

CSS

语言具有丰富的样式定义

。

网站建设人员可以

前端开发技术之一

。

HTML

技术与

HTML5

技术较为相

似

，

均具有以下特点

：

（

1

）

两者均具有简易性的特点

。

利用

CSS

语言对网站中文字字体

、

大小及颜色进行设

计

，

还可以对网站背景及各元素之间的距离

、

位置等进

两者

Web

前端开发语言都较为通俗易懂

，

通过利用

HTML

与

HTML5

技术

，

网站制作人员可以轻松便捷完

行预先设计

，

有效提升网站的美观度及实用性

。

其次

，

CSS

语言还具有便于修改与使用的特点

。

CSS

语言可以

成对网站的设计与制作

。

（

2

）

两者前端开发语言均具

有可扩展性的特点

。

为了给用户提供更好的网站服务

，

网站中的数据信息及服务需要定期更新

。

而

HTML

与

HTML5

语言采用了子类元素的方式

，

因此可以轻松实

将各类网页设计定义在网站设计的

style

属性中

。

当网

站建设人员需要对网站内容进行美化和优化时

，

只需要

调用其中的

style,

便可以实现对网站内容的美化和优

化

，

并且

，

网站设计人员还可以重复调用

style,

将各类

元素的设计样式应用在多个不同页面中

。

避免了一个一

现对系统功能的扩展

，

为网站后期更新提供了极大的便

利

。

（

3

）

HTML

语言与

HTML5

语言还具备较好的通用

性

，

运用该技术制作的网站

，

不仅仅可以用于

Windows

系统

，

同时还可以在

Android

系统以及

IOS

系统中应

个网页的修改

，

大大减少了重复劳动的工作量

，

极大提

高了网站设计师的工作效率

。

1.3

JavaScript

JavaScript

是网站建设中较常用的脚本语言之一

。

用

，

且不会出现兼容性差的现象

。

（

4

）

用

HTML

与

HTML5

语言所编写的网站

，

也不会对用户的浏览器提

出要求

，

可以应用于当前市面中的各类浏览器及各种终

端

。

虽然

HTML

语言与

HTML5

语言极为相似

，

两者也

脚本语言在网站设计中的作用主要有以下几点

：

首先

，

通过利用脚本语言

，

可以轻松实现动态网页的设计

，

有

效降低制作动态网页的设计成本和时间成本

。

其次

，

通

有一定的差异

。

HTML5

语言是

HTML

语言的更新版

，

与

传统的

HTML

语言相比

，

其开发语言更加简便

，

可以有

过利用脚本语言

，

还可以为网页加入事件驱动

，

使网页

效提升网站制作人员的工作效率

。

同时

，

还新增了

＜sec-

tion＞

、

＜

article

＞

、

＜nav＞

、

＜aside

＞

等重要标签

。

这些标

更加生动并提升网页与用户之间的数据交互能力

。

此

外

，

脚本语言在网站设计中的应用

，

方便网页中应用模

签的增加和使用

，

让网站结构更加合理和清晰

，

美观度

也加以提升

，

从而吸引到更多用户的关注

。

1.2

CSS

型的设计

，

以及网页前端与数据库的连接

，

从而更好地

作者简介

：

陈淑明

（

1971-

）

,

女

，

讲师

，

研究方向

：

平

CSS

语言是当前网页制作中较常用的网页样式设计

面设计与网页设计

。

实用第

一

”

/

智慧密集

保障网页多种功能的实现及数据信息的安全

。

与其他的

脚本语言相比

，

JavaScript

脚本语言不仅仅可以实现动

态网页的设计

，

同时其作为一款面向对象脚本语言

,

还可以对网站中的人机交互进行优化

。

此外

，

由于在

JavaScript

还含有作用域以及闭包

、

继承等概念遥因

此

，

利用其对网站进行设计时

，

可以实现对用户的登

录信息等进行限制

，

从而更好地保障网站中数据信息

的安全

。

以上

3

种语言

，

它们的职能与特点各不相同

，

执行

标准也不一样

，

但在

Web

前端开发过程中

，

3

种语言各

有分工

，

缺一不可

。

它们的关系如图

1

所示

。

图

1

三者关系

2

以

Web

前端技术为基础的网站制作与设计

2.1

网站网页布局

常见的网站大致可以分为两类

：

一类由单独页面组

成的网站

，

另一类是由多个相互链接的页面共同组成的

网站系统

。

由单独页面构成的网站

，

页面信息较少且结

构简单

，

网站设计人员往往仅使用

HTML

和

CSS

语言

进行设计

、

创建即可完成遥而由多个页面所构成的网

站

，

页面信息较为繁多

，

并且多个页面之间相互跳转

、

链接

。

若不能合理地对页面结构进行规划

，

容易导致用

户无法轻松便捷找到自己所需的相关信息

。

因此

，

网站

设计人员设计此类网站时

，

常常选用国字型布局或

T

型

布局

。

国字型布局是指在页面最顶部放置网站的标志

、

导航栏或

Banner

广告

，

页面中间主要放置网站的主要

内容

，

最底端则是放置网站的版权信息和联系方式等

（

如图

2

所示

）

。国字型布局是一些大型网站喜欢使用的

布局类型

。

T

型布局顶部一般放置网站

Logo

或

Banner

广告

，

下方左侧是导航栏菜单

，

右侧用于放置网页正文

等主要内容

（

如图

3

所示

）

。

以上两种常见的网站版面

布局

，

既可以让网站设计更加美观合理

，

同时还可以为

用户提供更好的服务

，

方便用户在使用网站时能够快速

查找到所需的信息资源

。

页头横条

：

网站

Logo+

导航栏

+Banner

广告

左侧

：

右侧

：

导航

网站主要内容

友情

菜单

+

其他

链接

+

其他

页脚横条

：

版权信息

+

联系方式

+

其他

图

2

国字型布局简化示意图

页头横条

：

网站

Logo+Banner

广告

+

其他

左侧

：

导航

网站主要内容

菜单

+

其他

图

3

T

型布局简化示意图

2.2

网站制作中的导航

网站导航是网站设计中极为重要的一部分

，

其主要

功能是为用户提供详细的网站功能介绍

，

并引导用户正

确

、

合理地对网站中的相关功能服务进行使用

，

提升用

户对网站的使用效率

。

为了有效提升网站中导航设计的

合理性及美观性

，

网站设计人员首先应选用合适的网站

框架

，

将网站导航设置在合理地方并且较为醒目

。

网站

设计人员还需要对网站导航栏的大小

、

颜色和样式的设

计进行选择

。

为了方便用户使用

，

网站设计人员对导航

栏进行设计时

，

必须考虑到各个网页之间的脉络关系遥

当然

，

导航栏可以使用

CSS

样式表统一设计外观效果

,

这样

，

即可以有效降低网站设计人员的工作量

，

还为后

期的修改维护提供了极大的便利

。

另外

，

为了保障网站

导航栏的美观性

，

部分网站设计人员也会使用

jQuery

以及

menu

等第三方插件对网站导航栏进行设计遥利用

该技术的主要优势是可以有效提升网站导航栏的美观程

度，

使网站导航栏设计更加科学

、

合理

。

当然，

这也在

一定程度上增加网站设计人员所需编写的代码量

，

增加

了网站设计的时间成本和设计成本

。

2.3

网站的总体制作及设计规划

虽然导航栏的设计可以为用户的使用提供一定的便

捷性

，

但为了向用户提供更好的服务

，

网站在总体设计

上仍需要保持简洁

、

明了的设计风格

。

而这便需要网站

设计人员在对网站总体进行设计时采取简易

、

整洁的风

格

。

此外

，

为了方便用户对网站中的相关数据信息进行

浏览

，

网站设计人员还需要加强对网站结构的优化

，

让

网站内容排版更加科学

、

合理

。

在这过程中

，

网站设计

人员既可以采用部分国内外先进的网站格局

，

合理运用

CSS

、

JavaScript

等技术

，

进一步优化网站格局

。

3

Web

前端开发技术优化所面临的问题

3.1

HTTP

请求容易发生拥堵

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!IBBBeaeBI3BigBlslBBai3IIBBEISBHI3glBBIIIIIIBSSI3aBIIIglEISa

3BEIQISB>E

实用第

一

f

智慧密集

问题

，

这些问题不仅仅影响到网站的运营

，

同时也对用户

的使用造成影响

。

为了避免此类问题的出现

，网站设计

人员应当对网站结构进行逐步优化

，

并对网站文件进行

[2]

庄新妍

.

基于网站制作的

Web

前端开发技术与优化

[J]

.

信息技术与信息化

,

2020,

(07)

:

17-19.

⑶黄霖

.

基于网站制作的

Web

前端开发技术与优化

[J]

.

信息与电脑

(

理论版

),

2020,

32

(10)

:

48-50.

[4]

许跃颖

.

网站制作

Web

前端开发技术与优化措施

整合

，

以提升网站服务效率

。

相信随着我国网站建设技

术的逐步提升

，

我国各类网站服务质量将得到显着提升

。

参考文献

[1]

曹艳琴

.

基于网站制作的

Web

前端开发技术与优化

[J]

.

电子技术与软件工程

,

2020,

(07)

:

31-32.

[7]

韦秀行

.

基于网站制作的

Web

前端开发技术与优化

策略

[J]

.

电脑知识与技术

，

2020,

16

(23)

:

59

-

60+67.

[J]

•

信息与电脑

(

理论版

)

，

2020,

32

(01)

:

58

-

59+62.

亠更仝仝从仝企仝从亠

4

亠北亠

4

亠

4

亠期亠坎亠坎亠欢亠更从仝从仝企亠

4

亠

4

亠期亠

4

亠

4

亠期亠坎仝

(

上接第

54

页

)

score

提取出来形成一个三元组构造训练的模型数据储备

针对的是服务器的压力

、

性能

、

吞吐量

、

并发量

，

以及

容错机制的测试

。

测试方法

：

为了提高测试的准确性

，

采用多种测试方法

，

其中有典型的黑白盒测试

。

(

2)

库以及测试的模型数据储备库

。

训练的模型数据得到

model,

再通过

model

预测得到推荐数据

，

然后把推荐数

客户端业务功能测试

：

针对的是用户正常使用系统的各

个功能

，

确保指定的某个功能按照预设的结果去执行

。

如

：

登录注册测试

、

展示功能测试

、

编辑功能测试

、权

据写入到

MySQLo

通过

model

得到的不只有预测数据

，

还可以拿到

productFeatures,

即各个商品以及它的特征

。

4.4

实时推荐

限功能测试

、

安全可靠性测试

。

通过实际的生产环境模

离线服务是综合历史数据来计算的

，

但实时服务应

该根据用户最近的行为来推荐

，

实时推荐要求响应迅

速

，

所以不能再使用

ALS

了

。

为了快速响应

，

应该提

拟真实的系统运行环境

，

确保测试结果的准确

，

使系统

更加的完善

、

健全

。

(

3)

推荐功能测试属于客户端测

试之一

，

但由于其较为复杂也需要单独进行单元测试,

确保推荐的商品时的精准性

。

前预热数据

，

在已有的数据集上再次少量计算即可

。

为了能够实现实时推荐的动态响应的动态性

，

势必

6

结语

会对其准确度与推荐算法的流程进行适当的简化

，

在保

证推荐结果正确的情况下

，

减少一定的推荐元素的计算

。

这样可以充分地将实时推荐的速度进行一个适当的提升

。

对商品展示系统的研究

，

对其两大问题进行了主要

表述与研究

：

一个是业务

，

一个是推荐

。

虽然商品展示

系统已经初步实施

，

但是由于研究和实施时间以及一些

内部和外部条件

，

仍有一些领域需要补充

、

优化和扩展

。

比如可以整合下单服务

，

形成一个完整的消费流程

。

同

时系统对于商品审计功能可以进行进一步的优化

，

提取

实现流程

：

(1)

加载

redis

里面的

ProductResult

作为实时计算

的基础数据

。

(

2)

用户

user1

对商品

p1

进行了评分

,

就触发一次实时计算

。

(

3)

从

ProductResult

中选出与

商品

p1

最相似的

K

个商品作为集合

So

(4)

要过滤掉

用户

user1

自己评分过的其他全部商品

，

过滤掉之后推

出一个单独的审计模块

，

实现部分商品的自动化审计

。

参考文献

[1]

陈瑞

.

基于

Springboot

高并发

Java

Web

开发模式

[J]

.

电脑编程技巧与维护

，

2019,

(04)

:

27-30.

荐的东西才是他没有见过的

。

(

5)

从

Redis

中获取用

户

user1

最近时间内的

K

条评分

，

包含本次评分

，

作为

集合

RK

。

(6)

把从

(1)

、

(2)

、

(3)

里面拿到的数

据作为参数

，

开始计算推荐的产品优先级

，

并生成更新

[2]

陈忠菊

.

NoSQL

数据库的研究和应用

[J]

.

电脑编

程技巧与维护

,

2020,

(09)

:

81-83.

⑶

周千元

基于

Spark

的个性化推荐系统的研究

[D]

.

过后的标识符集

。

(

7)

将更新过后的标识符集与用户

user1

的最后推荐结果

Result

组合

，

以加工的最新的推

中南林业科技大学

，

2019.

[4]

Ahmed

Abdulhadi

Awadh

Hanshi.

推

荐

系

统

精

度

提

荐结果

NewResult

作为最后的推荐结果输出

。

高的实用方法

[D]

.

中南大学

,

2014.

⑸

林琛

，

黄洁

，

刘杜钢

.

一种基于数据非随机缺失机

5测试

商品展示系统的测试主要分为服务端测试

、

和客户

端业务功能测试

、

推荐功能测试

。

(1)

服务端测试

：

制的推荐系统方法

[P]

.

福建省

：

CN108287902B,

2020.