#本人为项目组制定的一份页面优化指南（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)

本人为项目组制定的一份页面优化指南（easyui页面优化方案）的更多相关文章

  1. 基于angularJs的单页面应用seo优化及可抓取方案原理分析

    公司使用angularJs(以下都是指ng1)框架做了互联网应用,之前没接触过seo,突然一天运营那边传来任务:要给网站做搜索引擎优化,需要研发支持.搜了下发现单页面应用做seo比较费劲,国内相关实践 ...

  2. 多域名环境，页面获取url的一种方案

    因为系统是分布式部署的.而且有多个域名,所以常常涉及到获取url的问题. 这是系统框架层面须要提供的能力.否则每一个模块都须要自己去想办法获取ip,就会非常混乱.上线也easy发生bug 主要须要解决 ...

  3. Web前端性能优化——如何提高页面加载速度

    前言:  在同样的网络环境下,两个同样能满足你的需求的网站,一个"Duang"的一下就加载出来了,一个纠结了半天才出来,你会选择哪个?研究表明:用户最满意的打开网页时间是2-5秒, ...

  4. 【转】Web前端性能优化——如何提高页面加载速度

    前言:  在同样的网络环境下,两个同样能满足你的需求的网站,一个“Duang”的一下就加载出来了,一个纠结了半天才出来,你会选择哪个?研究表明:用户最满意的打开网页时间是2-5秒,如果等待超过10秒, ...

  5. 好用的在线web页面测试，移动页面测试工具webpagetest使用图文教程

    好用的在线web页面测试,移动页面测试工具webpagetest使用图文教程 http://www.webpagetest.org/ 1.打开主页,输入网址,点击 START TEST 按钮开始测试 ...

  6. C# 动态创建SQL数据库（二） 在.net core web项目中生成二维码 后台Post/Get 请求接口 方式 WebForm 页面ajax 请求后台页面 方法 实现输入框小数多 自动进位展示，编辑时实际值不变 快速掌握Gif动态图实现代码 C#处理和对接HTTP接口请求

    C# 动态创建SQL数据库(二) 使用Entity Framework  创建数据库与表 前面文章有说到使用SQL语句动态创建数据库与数据表,这次直接使用Entriy Framwork 的ORM对象关 ...

  7. 将flex页面嵌入到jsp页面中

    如果我们只需要用到Flex的一部分功能,例如播放器功能,我们可以单独把Flex页面嵌入到Jsp页面中.要想实现此功能,需要下载一个工程,将其覆盖在服务器根目录下即可.你可以在次下载:FlexModul ...

  8. Java与Flex学习笔记（20）---将flex页面嵌入到jsp页面中

    如果我们只需要用到Flex的一部分功能,例如播放器功能,我们可以单独把Flex页面嵌入到Jsp页面中.要想实现此功能,需要下载一个工程,将其覆盖在服务器根目录下即可.你可以在次下载:FlexModul ...

  9. JS定时刷新页面及跳转页面

    JS定时刷新页面及跳转页面 Javascript 返回上一页1. Javascript 返回上一页 history.go(-1), 返回两个页面: history.go(-2); 2. history ...

随机推荐

  1. Java中final、finally、finalize的区别

    简单区别: final用于声明属性,方法和类,分别表示属性不可交变,方法不可覆盖,类不可继承. finally是异常处理语句结构的一部分,表示总是执行. finalize是Object类的一个方法,在 ...

  2. remove duplicates in Postgres(sql去重)

    A frequent question in IRC is how to delete rows that are duplicates over a set of columns, keeping ...

  3. JAVA反射技术的使用

    前言 在开发html使用jquery提交post的时候,可以使用jquery遍历from元素里面的input元素实现参数组合,这样就不用手动打参数了,特别是在参数很多的时候,费神费时. 我开发Andr ...

  4. UVa 11100 The Trip, 2007

    今天的教训:做题要用大块的时间来做,上午做一下,做题做到一半就去忙别的事,那么后面再做的时候就无限CE,WA了.因为你很难或者需要很长时间来找回当时的思路. 题意:就像套瓷娃娃一样,有n个包,大小可能 ...

  5. POJ (Manacher) Palindrome

    多敲几个模板题,加深一下对Manacher算法的理解. 这道题给的时间限制15s,是我见过的最长的时间的了.看来是为了让一些比较朴素的求最大回文子串的算法也能A过去 Manacher算法毕竟给力,运行 ...

  6. codeforces 450 B Jzzhu and Sequences

    题意:给出f1=x,f2=y,f(i)=f(i-1)+f(i+1),求f(n)模上10e9+7 因为 可以求出通项公式:f(i)=f(i-1)-f(i-2) 然后 f1=x; f2=y; f3=y-x ...

  7. HDU 1317 XYZZY【Bellman_Ford判断正环】

    题意:给出n个房间,初始在房间1有100的能量值,每次进入一个房间,能量值可能增加也可能减小,(是点权,不是边权),问能否到达终点的时候能量值还为正 这题自己写的时候wa--wa-- 后来看了题解,还 ...

  8. BZOJ 3754 Tree之最小方差树

    枚举平均数. mdzz编译器. #include<iostream> #include<cstdio> #include<cstring> #include< ...

  9. Excel学习笔记杂荟

    Excel学习 一.工具->选项 可以对整个excel里面的东西进行编辑,里面有隐藏行号,下拉档等选项,有文档作者信息. 隐藏网格等 二.单元格内容比较大可以右击单元格->设置单元格格式- ...

  10. is_file和file_exists效率比较

    目前在弄文件缓存的时候用到了判定文件存在与否,is_file()还是file_exists()呢?is_file和file_exists两者效率比较起来,谁的运行速度更快呢?还是做个测试吧: 1 2 ...