前端性能优化方案

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采用CSS Sprites技术将页面内所有背景小图标整合到一张图片。.21.2.2不要在 HTML使用太多大图像 21.2.3采用开源工具来压缩减小 css及js文件体积 21.3内嵌图像

2、。 31.4静态资源尽量合并到少数几个域名访问，减少 DNS查询 32. 加快页面的渲染展示速度 32.1 Css和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 请求1.1.1项目首页、访问量非常大的页面有自己单独css内容include 。静态页面生成时直接生成到文件中，动态文件的话在模板文件中1.1.2移除重复的脚本及样式，统一网站资源（js库、css库）的使用。1.1.3整理优化并合并现 css文件及js文件，将所有的 css文件以及js文件分为base、common、 page 三层其中 base 是全站通用的，部署在 上； common 的为某业务系统全局使用， page 的则为单独页面使用，这两部分部署在业务系统中。在整理优化过程中，去掉无 用的css样式以及js脚本程序base类别的css及js统一放到re

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

5、量加快页面，但是原则是大图的大小不能超多100k。1.2.2 不要在 HTML 使用太多大图像图片切图尽量少和小，按所需的规格来切。切完后的图片文件不能太大，必须要压缩， 且尽可能的压缩到最小。首页等页面的图片尽量调用小图。1.2.3采用开源工具来压缩减小css及js文件体积在上传发布时使用开源工具（Closure Compiler，该工具压缩的js是类似于jquery 一样，不可逆 ）将 js 文件进行一定的压缩。考虑采用第三方的服务器端的压缩并合并访问技术，例如Minify 等，合并对多个 js 或者多个 js 的访问请求。 （这部分待同意研究后考虑决定采用何种压缩工具）所有项目代码上传发

6、布时，使用Closure Compiler工具将项目指定的 css目录、js目录下的css文件以及js文件进行压缩（压缩完成后要求保持文件名不变）1.3 内嵌图像。用 data:URL scheme 的方式把图片内容代码直接嵌入 html 代码中，这样会增大 html 代 码的体积，改进的方式是把内嵌图片嵌入到 css中（css被缓存），这样就会更好的减少 http 请求数而且不增大 html 的体积。这种方式适用于不经常变化的背景图等。1.4 静态资源尽量合并到少数几个域名访问，减少 DNS 查询页面程序所调用的静态资源，应该尽可能来自于仅仅少数几个域名访问。2. 加快页面的渲染展示速度2.

7、1 Css和js文件的位置Css文件必须放在 header中无论是HTML还是XHTML还是CSS都是解释型的语言，而非编译型的。所以 CSS到 上方的话， 那么浏览器解析结构的时候， 就已经可以对页面进行渲染。 这样就不会出现 页面结构光秃秃的先出来，然后 CSS渲染，页面又突然华丽起来这种页面浏览体验了。把Js文件放到HTML最下面a）原因一：脚本一般是用来于用户交互的。所以如果页面还没有加载完毕时加载js是不正确的做法，比如 js 里如果对页面的某以特定元素绑定事件或者修改元素内容， 也必须等页面加载完才能保证能够操作成功， 所以 一般的 做法是 window.onload（js 源生写

8、法 ）或者 Jquery（function（） ，这两种做法都是当页面载入完毕后再对元素进行操作，那么我们完全可以让js最后加载b）原因二：当一个脚本（js或者as）在下载的时候，浏览器干不了其它的事了，事实上，当浏览器遇到 <script /> 标签时， 它会开始加载脚本文件， 而此时页面的其它加载行 为则会全部停止， 包括 HTML 的呈现， 页面或图片的下载等等。 这是因为浏览器 “怀 疑”这些脚本文件中的一些行为可能会再页面中输出 HTML2.2 规范 img 标签的使用大图，根据页面的区域，定义样式显示。尽量在页面中避免将很大的图片通过css等方法进行变小，变形。商品等已

9、经固定大小的图片引用必须定义长宽高等样式，所有img 标签，必须有 alt。2.3精简页面标签，减少DOM 元素减少页面中DOM元素数量，尽量精简标签，提高JavaScript遍历DOM的效率。2.4规范Css代码避免使用CSS中的Expressions规范css的使用，最小化页面的重绘和重排3. 服务器端静态资源访问优化3.1服务器部署时通过 web服务器及应用服务集群配置，让静态资源通过web服务器提供访问，提高静态资源并发访问效率3.2通过在web服务器配置静态资源的缓存以及压缩策略，提高用户访问速度.例如在nginx或apache中，均可以配置对不同的静态资源（js,css图片等）的缓

10、存策略（例 如配置后，服务器端首先会缓存相关的静态资源数据在服务器上的cache目录中，通过http中header设置，告知客户端浏览器缓存24小时，服务器端静态资源没有变化的话，直接返回304 not Mofify ;只有服务器端资源有更新的时候，更新服务器缓存并返回最新的资源到 浏览器端）；还可以可配置压缩策略，例如配置支持GZip压缩的话，在数据传输时，传输的其实是压缩后的静态资源数据。3.3通过第三方网络静态资源缓存服务（CDN），提高网站访问速度，提升用户访问体验。5771001803090012095 5790368228596330825771001803090012386 57

11、61373997357606965771001803090013594 5780775799025155125771001803090012387 5771649826018180515771001803090012138 5721311921589183265771001803090012359 5790368223610760535771001803090012356 5761352861437917425771001803090012355 57508786970469327917088100343355274 10122994432583337917088100343355275 10186673293883200817088100343356107 10158115250150052217088100343356108 10100018005987173217088100343354295 10107419414268701717088100343356184 10187866086962880217088100343356185 10177583117408667417088100343356109 1010860143735