本人为项目组制定的一份页面优化指南（easyui页面优化方案）_html/css

首頁

web前端

html教學

本人为项目组制定的一份页面优化指南（easyui页面优化方案）_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 pm 12:27 PM

#本人为项目组制定的一份页面优化指南（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请求的js3.内容布局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.折叠如果内容太多，需要折叠分类显示，则在相应的行上面加上  ```htmlclass="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)

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

HTML與CSS和JavaScript：比較Web技術Apr 23, 2025 am 12:05 AM

HTML、CSS和JavaScript是構建現代網頁的核心技術：1.HTML定義網頁結構，2.CSS負責網頁外觀，3.JavaScript提供網頁動態和交互性，它們共同作用，打造出用戶體驗良好的網站。

HTML作為標記語言：其功能和目的Apr 22, 2025 am 12:02 AM

HTML的功能是定義網頁的結構和內容，其目的在於提供一種標準化的方式來展示信息。 1）HTML通過標籤和屬性組織網頁的各個部分，如標題和段落。 2）它支持內容與表現分離，提升維護效率。 3）HTML具有可擴展性，允許自定義標籤增強SEO。

HTML，CSS和JavaScript的未來：網絡開發趨勢Apr 19, 2025 am 12:02 AM

HTML的未來趨勢是語義化和Web組件，CSS的未來趨勢是CSS-in-JS和CSSHoudini，JavaScript的未來趨勢是WebAssembly和Serverless。 1.HTML的語義化提高可訪問性和SEO效果，Web組件提升開發效率但需注意瀏覽器兼容性。 2.CSS-in-JS增強樣式管理靈活性但可能增大文件體積，CSSHoudini允許直接操作CSS渲染。 3.WebAssembly優化瀏覽器應用性能但學習曲線陡，Serverless簡化開發但需優化冷啟動問題。

HTML：結構，CSS：樣式，JavaScript：行為Apr 18, 2025 am 12:09 AM

HTML、CSS和JavaScript在Web開發中的作用分別是：1.HTML定義網頁結構，2.CSS控製網頁樣式，3.JavaScript添加動態行為。它們共同構建了現代網站的框架、美觀和交互性。

HTML的未來：網絡設計的發展和趨勢Apr 17, 2025 am 12:12 AM

HTML的未來充滿了無限可能。 1)新功能和標準將包括更多的語義化標籤和WebComponents的普及。 2)網頁設計趨勢將繼續向響應式和無障礙設計發展。 3)性能優化將通過響應式圖片加載和延遲加載技術提升用戶體驗。

HTML與CSS vs. JavaScript：比較概述Apr 16, 2025 am 12:04 AM

HTML、CSS和JavaScript在網頁開發中的角色分別是：HTML負責內容結構，CSS負責樣式，JavaScript負責動態行為。 1.HTML通過標籤定義網頁結構和內容，確保語義化。 2.CSS通過選擇器和屬性控製網頁樣式，使其美觀易讀。 3.JavaScript通過腳本控製網頁行為，實現動態和交互功能。

HTML：是編程語言還是其他？Apr 15, 2025 am 12:13 AM

HTMLISNOTAPROGRAMMENGUAGE; ITISAMARKUMARKUPLAGUAGE.1）htmlStructures andFormatSwebContentusingtags.2）itworkswithcsssforstylingandjavascript for Interactivity，增強WebevebDevelopment。

HTML：建立網頁的結構Apr 14, 2025 am 12:14 AM

HTML是構建網頁結構的基石。 1.HTML定義內容結構和語義，使用、、等標籤。 2.提供語義化標記，如、、等，提升SEO效果。 3.通過標籤實現用戶交互，需注意表單驗證。 4.使用、等高級元素結合JavaScript實現動態效果。 5.常見錯誤包括標籤未閉合和屬性值未加引號，需使用驗證工具。 6.優化策略包括減少HTTP請求、壓縮HTML、使用語義化標籤等。

See all articles