#本人为项目组制定的一份页面优化指南（easyui页面优化方案）
##背景
这是一篇我之前为项目组制定的页面优化指南，主要是面向表单页面，典型的像[注册用户](https://passport.cnblogs.com/register.aspx)那样的页面。
本人的项目主要是基于easyui的，一开始都是直接用其中的layout进行布局，但对于一个实际项目中有100-200甚至更加多字段的表单项，载入的效率很成问题
经过**本人的分析**（具体的分析过程见[这里](http://www.cnblogs.com/p2227/p/3540858.html)），发现layout,datebox,combobox及一些panel的衍生组件（其实datebox和combobox中也有panel）都是罪魁祸首
所以本人重新写了一个针对表单页面的优化方案，包括文档和相应的代码，本博主要是其中的文档部分
##文档
如果文档在网页上显示有问题，可以直接下载[PDF格式](https://files.cnblogs.com/p2227/%E9%A1%B5%E9%9D%A2%E4%BC%98%E5%8C%96%E6%8C%87%E5%8D%972.pdf)
>页面（登记表）优化指南
一、 文档目的
引导及记录一套项目页面（尤其是登记表页面）的优化方案
二、 优化要点
1.文档声明
文档声明必须置于网页的HTML部分的最开始，标签之前。它影响着整个网页的解释（兼容性及效率问题）。目前项目中使用的声明是
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
`PS:其实本人还是倾向于向前走，拥抱HTML5的`
2.HTML架构
页面元素结束之前不要放太多的script标签，一个带src的script标签会引起一次请求，如果标签中的代码另外发起了ajax请求更加需要置后。
为了便于开发，一部分通用的JS可能置于body之前，即整体代码架构如下：
//在body之前放置一些通用JS
<body class="wds-layout-body>
<div id="center-layout" class="wds-layout-scroll wds-layout-north">主体内容</div>
<div id="south-layout" class="wds-layout-button wds-layout-south">下方按钮</div>
</body>
//在body之后放置一些业务JS，尤其是当中有ajax请求的js
3.内容布局
3.1 尽量少用easyUI的Panel及Panel的衍生组件（layout，Tabs，datebox）去布局
3.2 对于登记表，必须要有**<html>** 及 **<body>**元素。具体代码结构如下：
（参考某某页面`这里跟项目实际路径有关，省略`）
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
//其他代码
<body class="wds-layout-body">
<div id="center-layout" class="wds-layout-scroll wds-layout-north">主体内容</div>
<div id="south-layout" class="wds-layout-button wds-layout-south">下方按钮</div>
</body>
</html>
再执行一下js代码：**$.applyLayout();**
则会生成一个固定有north和south布局的页面
4.字典项
4.1 简单的、变化小的字典项（4项及以下）应该直接radio/checkbox置于页面
新封装$.omDic()组件，参考dicQuery.js，使用方法：
`此处省略100字，因为是跟项目后台有关联的`
5.选择器
尽量少避免使用复杂的选择器，能直接用ID尽量用ID选择。
6.子表
子表不用tab页方式展示，利用点击按钮后弹出对话框的方式展现。
7.折叠
如果内容太多，需要折叠分类显示，则在相应的行上面加上
```html
class="list_colspan"
```
即可，逻辑处理置于**$.applyLayout**函数中（不要用easyUI的accordion）
三、 注意问题
1.养成良好习惯，HTML元素要正确闭合，javascript中不要放置多余的逗号
在eclipse中用正则表达式
```html
,\s*[\r\n][\r\n]\s*\}
```
去搜索，能查找出js中多余的逗号
2.能用HTML完成的内容尽量不要用CSS/JavaScript去完成，能用CSS去完成的内容尽量不要用JavaScript去完成
如鼠标提示最省资源的方式是用title属性去完成，其次用:hover伪类，用JavaScript事件最耗资源
3.项目内容稳定后，应该将变化小的HTTP请求（如查询字典）改成get请求以缓存
4.项目内容稳定后，应该将js及css压缩、合并以减少请求时间
5.项目内容稳定后，应该将图片合并，利用css sprite定位，以减少请求次数
##优化后的页面示例
[DEMO](http://p2227.github.io/demo/applyLayout/playout.html)
本人为项目组制定的一份页面优化指南（easyui页面优化方案）
背景
这是一篇我之前为项目组制定的页面优化指南，主要是面向表单页面，典型的像注册用户那样的页面。
本人的项目主要是基于easyui的，一开始都是直接用其中的layout进行布局，但对于一个实际项目中有100-200甚至更加多字段的表单项，载入的效率很成问题
经过本人的分析（具体的分析过程见这里），发现layout,datebox,combobox及一些panel的衍生组件（其实datebox和combobox中也有panel）都是罪魁祸首
所以本人重新写了一个针对表单页面的优化方案，包括文档和相应的代码，本博主要是其中的文档部分
文档
如果文档在网页上显示有问题，可以直接下载PDF格式
>页面（登记表）优化指南
一、 文档目的
引导及记录一套项目页面（尤其是登记表页面）的优化方案
二、 优化要点
1.文档声明
文档声明必须置于网页的HTML部分的最开始，标签之前。它影响着整个网页的解释（兼容性及效率问题）。目前项目中使用的声明是
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
PS:其实本人还是倾向于向前走，拥抱HTML5的
2.HTML架构
页面元素结束之前不要放太多的script标签，一个带src的script标签会引起一次请求，如果标签中的代码另外发起了ajax请求更加需要置后。
为了便于开发，一部分通用的JS可能置于body之前，即整体代码架构如下：
//在body之前放置一些通用JS
<body class="wds-layout-body>
<div id="center-layout" class="wds-layout-scroll wds-layout-north">主体内容</div>
<div id="south-layout" class="wds-layout-button wds-layout-south">下方按钮</div>
</body>
//在body之后放置一些业务JS，尤其是当中有ajax请求的js
3.内容布局
3.1 尽量少用easyUI的Panel及Panel的衍生组件（layout，Tabs，datebox）去布局
3.2 对于登记表，必须要有<html> 及 <body>元素。具体代码结构如下：
（参考某某页面这里跟项目实际路径有关，省略）
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
//其他代码
<body class="wds-layout-body">
<div id="center-layout" class="wds-layout-scroll wds-layout-north">主体内容</div>
<div id="south-layout" class="wds-layout-button wds-layout-south">下方按钮</div>
</body>
</html>
再执行一下js代码：$.applyLayout();
则会生成一个固定有north和south布局的页面
4.字典项
4.1 简单的、变化小的字典项（4项及以下）应该直接radio/checkbox置于页面
新封装$.omDic()组件，参考dicQuery.js，使用方法：
此处省略100字，因为是跟项目后台有关联的
5.选择器
尽量少避免使用复杂的选择器，能直接用ID尽量用ID选择。
6.子表
子表不用tab页方式展示，利用点击按钮后弹出对话框的方式展现。
7.折叠
如果内容太多，需要折叠分类显示，则在相应的行上面加上
class="list_colspan"
即可，逻辑处理置于$.applyLayout函数中（不要用easyUI的accordion）
三、 注意问题
1.养成良好习惯，HTML元素要正确闭合，javascript中不要放置多余的逗号
在eclipse中用正则表达式
,\s*[\r\n][\r\n]\s*\}
去搜索，能查找出js中多余的逗号
2.能用HTML完成的内容尽量不要用CSS/JavaScript去完成，能用CSS去完成的内容尽量不要用JavaScript去完成
如鼠标提示最省资源的方式是用title属性去完成，其次用:hover伪类，用JavaScript事件最耗资源
3.项目内容稳定后，应该将变化小的HTTP请求（如查询字典）改成get请求以缓存
4.项目内容稳定后，应该将js及css压缩、合并以减少请求时间
5.项目内容稳定后，应该将图片合并，利用css sprite定位，以减少请求次数
优化后的页面示例
DEMO
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识（上）
· 单线程的Redis速度为什么快？
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· 展开说说关于C#中ORM框架的用法！
· SQL Server 2025 AI相关能力初探
· Pantheons：用 TypeScript 打造主流大模型对话的一站式集成库