前端性能优化方案.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项目中统一维护.
页面中不允许