前端性能优化方案.docx

前端优化方案
TOC\o"1-5"\h\z\uHYPERLINK\l"_Toc365385826"1. 提升页面静态资源加载速度 PAGEREF_Toc365385826\h1
HYPERLINK\l"_Toc365385827"1.1减少Http请求 PAGEREF_Toc365385827\h1
HYPERLINK\l"_Toc365385828"1.1.1项目首页、访问量非常大的页面有自己单独css内容 PAGEREF_Toc365385828\h1
HYPERLINK\l"_Toc365385829"1.1.2移除重复的脚本及样式，统一网站资源（js库、css库）的使用。 PAGEREF_Toc365385829\h2
HYPERLINK\l"_Toc365385830"1.1.3整理优化并合并现css文件及js文件，将所有的css文件以及js文件分为base、common、page三层 PAGEREF_Toc365385830\h2
HYPERLINK\l"_Toc365385831"1.2压缩静态资源文件，减少文件体积大小 PAGEREF_Toc365385831\h2
HYPERLINK\l"_Toc365385832"1.2.1采用CSSSprites技术将页面内所有背景小图标整合到一张图片。 PAGEREF_Toc365385832\h2
HYPERLINK\l"_Toc365385833"1.2.2不要在HTML使用太多大图像 PAGEREF_Toc365385833\h2
HYPERLINK\l"_Toc365385834"1.2.3采用开源工具来压缩减小css及js文件体积 PAGEREF_Toc365385834\h2
HYPERLINK\l"_Toc365385835"1.3内嵌图像。 PAGEREF_Toc365385835\h3
HYPERLINK\l"_Toc365385836"1.4静态资源尽量合并到少数几个域名访问，减少DNS查询 PAGEREF_Toc365385836\h3
HYPERLINK\l"_Toc365385837"2. 加快页面的渲染展示速度 PAGEREF_Toc365385837\h3
HYPERLINK\l"_Toc365385838"2.1Css和js文件的位置 PAGEREF_Toc365385838\h3
HYPERLINK\l"_Toc365385839"2.2规范img标签的使用 PAGEREF_Toc365385839\h3
HYPERLINK\l"_Toc365385840"2.3精简页面标签，减少DOM元素 PAGEREF_Toc365385840\h4
HYPERLINK\l"_Toc365385841"2.4规范Css代码 PAGEREF_Toc365385841\h4
HYPERLINK\l"_Toc365385842"3. 服务器端静态资源访问优化 PAGEREF_Toc365385842\h4
HYPERLINK\l"_Toc365385843"3.1服务器部署时通过web服务器及应用服务集群配置，让静态资源通过web服务器提供访问，提高静态资源并发访问效率 PAGEREF_Toc365385843\h4
HYPERLINK\l"_Toc365385844"3.2通过在web服务器配置静态资源的缓存以及压缩策略，提高用户访问速度. PAGEREF_Toc365385844\h4
HYPERLINK\l"_Toc365385845"3.3通过第三方网络静态资源缓存服务(CDN)，提高网站访问速度，提升用户访问体验。 PAGEREF_Toc365385845\h4


提升页面静态资源加载速度
1.1减少Http请求
1.1.1项目首页、访问量非常大的页面有自己单独css内容
静态页面生成时直接生成到文件中，动态文件的话在模板文件中include。
1.1.2移除重复的脚本及样式，统一网站资源（js库、css库）的使用。
1.1.3整理优化并合并现css文件及js文件，将所有的css文件以及js文件分为base、common、page三层
其中base是全站通用的，部署在res.xxx.com上；common的为某业务系统全局使用，page的则为单独页面使用，这两部分部署在业务系统中。在整理优化过程中，去掉无用的css样式以及js脚本程序

base类别的css及js统一放到res项目中统一维护。

页面