Web前端开发技术和优化措施研究

金日

（延边职业技术学院 吉林省延吉市 1331000）

1 Web前端开发技术体系介绍与阐述

1.1 HTML

XHTML/HTML5 统称为HTML，HTML 并不是编程语言，而是标准标记语言之一，浏览器通过翻译前端开发人员编写的HTLML 语言，展示为方便用户阅读的信息内容，从而使浏览器网页正常工作，这也是HTML 标记语言的主要功能。XHTM 和HTML 存在一定的区别，它以W3C 作为标准，对HTML 进行了更新，具有通用性和穿插性。HTML5 是最新且使用最广泛的标准标记语言，可以满足如现代移动设备前端开发、RYIA 应用前端开发等多变的发展需求，与HTML 相比，HTML5 具有更大的普适性，成为了目前最主要的前端开发应用语言。

1.2 CSS

CSS 是文件样式的计算机语言，也是层叠样式表的一种，可以通过HTML 等标记语言中的子集或应用，以用户友好的样式展示到前端界面上。它可完成的功能非常多，可以对网页内容进行分块处理，层次分明的样式逻辑降低了网页设计的难度，同时简化了网页的格式代码，使开发人员能够以简单的代码，控制网页具体样式，其中，具体样式又包括花式字体等细分需求，非常适合进行个性化Web 前端网页开发。CSS 以其精简强大的优势，在提升浏览器运行速度，提高前端开发工作效率，降低后期网页维护难度等方面发挥着非常重要的作用。

1.2.1 CSS 相关兼容性处理方案

作为未来网页前端发展必然会使用的计算机语言之一，CSS 在我国却没有得到大规模的浏览器软件支持。比如在我国网络用户经常使用的浏览器中，可以做到有效支持CSS 全部或大部分自定义属性的很少。这样的现状，与CSS 普及范围越来越广的趋势成为矛盾，会影响用户的浏览体验。针对这样的冲突，在当前的Web开发环节中，应该尽快完成 CSS 的自定义属性样式相关兼容处理。比如，可以通过@supports 软件对用户现在所使用的浏览器进行检测，检测重点是该浏览器是否可以与开发中所使用的CSS 相关属性样式合理兼容，并通过对不兼容地方的处理，修改CSS 属性样式代码，直到处理完毕，成功满足用户的前端网页要求为止。

1.2.2 CSS 技术应用过程

在前端开发过程中，应该以用户的使用体验作为开发是否合格的标准，而CSS 丰富的属性样式，使得它可以完成用户个性化的需求，能够根据用户的要求随时做出多样化的改变。同时，在浏览器客户端的支持下，CSS 可以使用高度的自定义属性，将数据加载存储在本地。此处以通过修改CSS 代码，调整网络页面颜色为实例，第一步需要设定自定义属性-fontColor，-fontColor 的值就是目前前端背景字体的颜色。第二步，等到前端网页加载完成，浏览器无需等待时间，可以直接拿到储存在本地的，关于字体以及背景颜色的数据，在设定-fontColor 参数的时候，只要没有其他数据项出现，网页都会选择初始值。第三步，开发人员需要建立颜色选择框，避免乱码，设置为txt 模式，添加相应的指令，将需要修改的颜色储存到本地，这时-fontColor 的原值会被刷新，后期修改维护完成。修改页面颜色只是一个简单的功能，在实际CSS 开发中，还有更多的功能可以被实现、修改与维护，可以满足更多的用户需求。在未来的CSS 开发过程中，本地存储或许会成为数据存储的限制，当与云计算结合在一起之后，CSS 可以利用不同的数据样式，展现丰富多变的主题，减小对网站性能与存储地点的依赖，发挥更大的作用。

1.3 DOM 技术

与CSS 技术一样，虚拟DOM 技术在网页前端开发中同样具有不可小觑的地位。DOM 技术的主要优势是大大增强了页面的交互性，通过把XML 文件抽象整理为树形的数据结构，数据结构都由一个个单独的小节点构成，可以为前端页面提供所需的API。由虚拟DOM 的主要功能可以看出，该技术的核心思想，是把新旧两种页面的不同之处剥离出来，并将这种不同在旧的页面里体现出来，由此可以从以下三个方面来看待这项技术。

1.3.1 经过 JS 模拟 DOM

相比于建立真实的DOM 节点，使用JS 对象可以以一种成本更低的方式，表示DOM 构造的数据结构的不同节点，而且节点的类型信息、层次关系与其它基本属性可以得到有效的保留，而真实DOM 包含的信息不会有遗漏，所以这种方法在开发中的性价比更高。使用JS 对象构建虚拟DOM 树的关键技术流程如下：程序开发准备就绪后，获取需要创建DOM 元素的属性值、层次关系等其它属性，然后创建JS 对象，创建完毕后需要判断是否含有子元素，若有则返回获取到属性的步骤，如果没有则创建结束。

1.3.2 DOM-Diff算法的研究

DOM 树的数据结构在前端网页开发过程中不会受到太大的影响，尤其是跨级别的DOM 元素，很少会出现需要移动的情况，所以无论页面是否发生变更，大部分的层级结构状态基本都会保持原来的位置固定不变。通过对DOM-Diff算法进行研究分析，可以发现该算法主要包括两个方面的内容。

鲁花已种植了十几万亩高油酸品种的花生。从试种情况看，鲁花高油酸花生的油酸含量已达80%，而且产量也提高了30%以上。2017年9月，鲁花崭新的高油酸花生油已投入生产并销往市场，因其香味浓郁、营养价值更高，深受消费者青睐。

（1）在某个单一的节点被删除后，该节点下的子节点也会被删除，而且被删除的节点不会再进行差异的比对，这是建立在不考虑其他可变或不可变的因素，只是对比DOM 树形数据结构中层级节点不同的情况。

（2）如果是对属于同一层组的子节点进行增删查改各项操作，查找每个节点各异的Key 值可以成为进行定位寻找的方式，在操作完成后可以明确新元素的位置顺序并成功恢复DOM 元素[1]。

1.3.3 实现DOM 算法的路经

在DOM 算法下，每一个节点都有自己唯一的用来辨识身份的Key，由此可以得出以下三种实现路经。

（1）遍历循环全部节点，用Key 判断是否存在相同的节点；

（2）遍历循环之后会产生两种情况，如果没有发现相同的节点，那可以直接移动；如果使用Key 寻找到了完全相同的节点，需要首先获取旧节点的位置，然后获取已经被访问过的节点的位置，两个位置进行比对，进行移动节点的操作；

1.3.4 将差异补丁应用到旧页面上

对DOM 元素做增删改查等操作后，通过差异补丁的更新，核对补丁是否应用完毕，网页页面刷新，完成修改。而在旧页面上应用差异补丁，作为DOM 技术中最重要的环节之一，可以根据系统遍历后得到的不同差异类型进行修改与调整，调整后可以成功应用在网页页面上。

2 Web前端的优化思路

2.1 针对HTTP请求的优化

网页承担着网站与用户信息交流互动的作用，能成功实现信息交互的功能，也是实现网页价值的重要体现。因此，如何根据不同的网页类型与形式，为用户动态地提供获取信息数据的不同方式，也应该成为开发人员考虑的问题。无论数据的体量如何发展与增加，网页始终需要找到可以实现最大化吸引用户的途径，过滤有效信息，屏蔽无效信息，都是网页在设计开发时需要做到的任务。为了保持网页的最大吸引力，需要对复杂的HTTP 请求进行优化处理。

2.2 针对文件的优化

文件规模的优化是一个更为复杂的问题，CSS 文件可以实现文件优化的功能，但并不能做到彻底的优化，丰富多样的文件包含着复杂的信息，如果不能做到彻底优化，会非常影响用户的体验，可以利用为HTML加标签、代码压缩、服务器压缩、Cookie优化等方法，将重复不合理内容隐去，有效控制文件规模。

2.3 针对内容的优化

在前端的网页制作中，内容的优化同样重要，精简的内容可以让网页减少出错概率，后期运行更加稳定，需要重点关注。在内容优化方面，网站运行过程中的重定向问题无法完全避免，但仍然需要想办法尽量减少这种情况的发生。除了尽量避免重定向，还有实现Ajax 的可缓存、使用懒加载等方法实现内容的优化[3]。

2.4 使用内容分发网络（CDN）

使用内容分发网络的好处，是可以减少浪费资源的现象，使用户下载数据和信息的速度大大加快。因为浏览器缓存数据资源的方式是根据域来进行判断是否有相同的域，如果域不同，哪怕资源相同也要重复下载造成本地空间和网络贷款的浪费。因此，CDN 可以使用以下几种方式来运用在前端的性能优化。

（1）和用户距离较近的CDN 节点负责获取缓存的静态资源；

（2）当用户根据所需的不同资源获取不同的CDN 节点时，判断缓存资源是否可用的工作由CDN 进行，由此用户可直接获取对应资源，大大提高效率。

3 总结

作为网络的发展窗口，Web 始终能直观地代表用户的浏览习惯，这又促使网络技术必须不断更新发展，才能满足多方面多方向的需求。同时，初期的Web 开发渗透方式尽管在早期可以很好地完成任务，但在网络技术高速发展的今天，已经明显地显示出了不足之处，需要更新的技术解决更多的问题。尽管当前互联网的发展趋势突飞猛进，新技术层出不穷，但前端网页的设计开发作为与用户直接沟通的桥梁，承担着非常重要的作用，Web 前端开发在网页制造中也是非常值得关注的。随着技术的推广与用户新需求的不断增多，旧技术的不足开始逐渐显现出来，技术开发人员应该随时关注技术前沿，针对不同客户的差异化需求，选取最适合的技术开发方式，解决紧要信息传输加载慢，后台数据库响应时间长等问题，优化网页前端质量，提升开发质量与用户浏览体验感。