前端性能优化方案

《前端性能优化方案》由会员上传分享，免费在线阅读，更多相关内容在工程资料-天天文库。

1、前端优化方案1.提升页面静态资源加载速度11.1减少Http请求11.1.1项目首页、访问量非常大的页面有自己单独css内容11.1.2移除重复的脚本及样式，统一网站资源(js库、css库)的使用。・21.1.3整理优化并合并现css文件及js文件，将所有的css文件以及js文件分为base、common、page三层21.2压缩静态资源文件，减少文件体积大小21.2.1采用CSSSprites技术将页面内所有背景小图标整合到一张图片。..21.2.2不要在HTML使用太多大图像21.2.3采用开源工具来压缩减小css及js文件体积21.

2、3内嵌图像。31.4静态资源尽量合并到少数几个域名访问，减少DNS查询32.加快页面的渲染展示速度32.1Css和js文件的位置32.2规范img标签的使用32.3精简页面标签，减少DOM元素42.4规范Css代码43.服务器端静态资源访问优化43.1服务器部署时通过web服务器及应用服务集群配置，让静态资源通过web服务器提供访问，提高静态资源并发访问效率43.2通过在web服务器配置静态资源的缓存以及压缩策略，提高用八访问速度.43.3通过笫三方网络静态资源缓存服务(CDN),提高网站访问速度，提升用户访问体验。41.提升页面静态资源

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

4、se类别的css及js统一放到res项目中统一维护。页面中不允许出现onclick或onblur或其他方式的js小句子的使用，所有的标签事件定义及绑定以及其他js代码均要基于res中提供的统一Jquery框架，并放到在整个页面的底部。所有项目的css以及js文件必须放置到项冃根冃录下的css以及js目录下，这样的冃的是方便代码上传时进行压缩处理。1・2压缩静态资源文件，减少文件体积大小1.2.1采用CSSSprites技术将页面内所有背景小图标整合到一张图片。通过css中background-position来定位背景图。把多张图片组合成

5、一个单一的形象。整体大小相同，但减少HTTP请求的数量加快页面，但是原则是大图的大小不能超多lOOko1.2.2不要在HTML使用太多大图像图片切图尽量少和小，按所需的规格來切。切完后的图片文件不能太大，必须要压缩,且尽可能的压缩到最小。首页等页面的图片尽量调用小图。1.2.3釆用开源工具来压缩减小css及js文件体积在上传发布时使用开源工具（ClosureCompiler,该工具压缩的js是类似于jquery八样，不町逆）将js文件进行一定的压缩。考虑采用第三方的服务器端的压缩并合并访问技术，例如Minify等，合并对多个js或者多个j

6、s的访问请求。（这部分待同意研究后考虑决定采用何种压缩工具）所有项目代码上传发布时，使用ClosureCompilerI具将项日指定的css目录、js目录下的css文件以及js文件进行压缩（压缩完成后要求保持文件名不变）。1.3内嵌图像。用data:URLscheme的方式把图片内容代码直接嵌入html代码中，这样会增大html代码的体积，改进的方式是把内嵌图片嵌入到css中（css被缓存），这样就会更好的减少http请求数而且不增大html的体积。这种方式适用于不经常变化的背景图等。1.4静态资源尽量合并到少数几个域名访问，减少DNS查

7、询页面程序所调用的静态资源，应该尽可能來自于仅仅少数几个域名访问。1.加快页面的渲染展示速度2.1Css和js文件的位置Css文件必须放在header中无论是HTML还是XHTML还是CSS都是解释型的语言，而非编译型的。所以CSS到上方的话，那么浏览器解析结构的时候，就已经可以对页面进行渲染。这样就不会出现页面结构光秃秃的先出来，然后CSS渲染，页面又突然华丽起来这种页面浏览体验了。把Js文件放到HTML最下面a）原因一：脚本一般是用來于用户交互的。所以如果页面还没有加载完毕时加载js是不正确的做法，比如js里如果对页而的某以特定元素绑

8、定事件或者修改元素内容，也必须等页面加载完才能保证能够操作成功，所以一般的做法是window.onload（js源生写法）或者Jquery（function（）｛....｝）,这两种做法都是当