本人为项目组制定的一份页面优化指南(easyui页面优化方案)

来源:互联网 时间:1970-01-01

#本人为项目组制定的一份页面优化指南(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格式](http://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)


相关阅读:
Top