整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
首先要设定优化目标，测试当前性能，找出问题，提出解决方案。
一般来说，网站优化的需要考虑的方面有：
减少HTTP请求次数是缩短响应时间的关键
减小加载文件的大小
减少请求，减小文件
DNS查询也消耗响应时间，如果我们的网页内容来自各个不同的domain (比如嵌入了开放广告，引用了外部图片或脚本)，那么客户端首次解析这些domain也需要消耗一定的时间。DNS查询结果缓存在本地系统和浏览器中一段时间，所以DNS查询一般是对首次访问响应速度有所影响
将一个URL重新路由到另一个URL。重定向功能是通过301和302这两个HTTP状态码完成的，如： 浏览器自动重定向请求到Location指定的URL上，重定向的主要问题是降低了用户体验。 种最耗费资源、经常发生而很容易被忽视的重定向是URL的最后缺少/，导致自动产生结尾斜线的原因是，浏览器在进行get请求时必须指定一些路径；如果没有路径它就会简单的使用文档根。缺少结尾斜线发生重定向是很多web服务器的默认行为。需要在服务器端设置方可消除。
Cookie被用来做认证或个性化设置，其信息被包含在http报文头中，对于cookie我们要注意以下几点，来提高请求的响应速度，
大多数网站的静态资源都没必要cookie，我们可以采用不同的domain来单独存放这些静态文件，这样做不仅可以减少cookie大小从而提高响应速度，还有一个好处是有些proxy拒绝缓存带有cookie的内容，如果能将这些静态资源cookie去除，那就可以得到这些proxy的缓存支持。
网站图标文件favicon.ico，不管你服务器有还是没有，浏览器都会去尝试请求这个图标。所以我们要确保这个图标
当美工完成了网站的图片设计后，我们可以在上传图片之前对其做以下优化
script文件放在页面顶部会阻塞页面的逐步呈现。script元素会阻塞后续内容的解析（不论JavaScript是内嵌的还是外链的），浏览器在执行JavaScript代码时，不能同时做其它事情，即每次出现都会让页面等待脚本的解析和执行，JavaScript代码执行完成后，才继续渲染页面。这个也就是JavaScript的阻塞特性。解决的办法就是将script标签放在页面底部。这样既可以让内容逐步呈现，提高下载的并行度，有效的防止JavaScript的阻塞，又能使得页面的HTML结构能更快的释放。
使用外部Javascript和CSS文件可以使这些文件被浏览器缓存，从而在不同的请求内容之间重用。 同时将Javascript和CSS从inline变为external也减小了网页内容的大小。
使用外部Javascript和CSS文件的决定因素在于这些外部文件的重用率，如果用户在浏览我们的页面时会访问多次相同页面或者可以重用脚本的不同页面，那么外部文件形式可以给你带来很大的好处。但对于用户通常只会访问一次的页面，例如microsoft.com首页，那inline的javascript和css相对来说可以提供更高的效率。
延迟加载需要我们知道我们的网页最初加载需要的最小内容集是什么。剩下的内容就可以推到延迟加载的集合中。 Javascript是典型的可以延迟加载内容。一个比较激进的做法是开发网页时先确保网页在没有Javascript的时候也可以基本工作，然后通过延迟加载脚本来完成一些高级的功能。
与延迟加载目的相反，提前加载的是为了提前加载接下来网页中访问的资源，下面是提前加载的类型
网页中元素过多对网页的加载和脚本的执行都是沉重的负担，500个元素和5000个元素在加载速度上会有很大差别。 想知道你的网页中有多少元素，通过在浏览器中的一条简单命令就可以算出document.getElementsByTagName('*').length
通过Javascript访问DOM元素没有我们想象中快，元素多的网页尤其慢，对于Javascript对DOM的访问我们要注意
使用iframe要注意理解iframe的优缺点
404我们都不陌生，代表服务器没有找到资源，我们要特别要注意404的情况不要在我们提供的网页资源上，客户端发送一个请求但是服务器却返回一个无用的结果，时间浪费掉了。
更糟糕的是我们网页中需要加载一个外部脚本，结果返回一个404，不仅阻塞了其他脚本下载，下载回来的内容(404)客户端还会将其当成Javascript去解析。
浏览器在实现XMLHttpRequest POST的时候分成两步，先发header，然后发送数据。而GET却可以用一个TCP报文完成请求。另外GET从语义上来讲是去服务器取数据，而POST则是向服务器发送数据，所以我们使用Ajax请求数据的时候尽量通过GET来完成。
空的图片src仍然会使浏览器发送请求到服务器，这样完全是浪费时间，而且浪费服务器的资源。尤其是你的网站每天被很多人访问的时候，这种空请求造成的伤害不容忽略。
浏览器如此实现也是根据RFC 3986 - Uniform Resource Identifiers标准，空的src被定义为当前页面。
所以注意我们的网页中是否存在这样的代码
<!--straight HTML-->
<img src="">
//JavaScript
var img=new Image();
img.src="";
不要通过图片缩放来适应页面，如果你需要小图片，就直接使用小图片吧。
这里说智能的事件处理需要开发者对事件处理有更深入的了解，通过不同的方式尽量少去触发事件，如果必要就尽早的去处理事件。
比如一个div中10个按钮都需要事件句柄，那么我们可以将事件放在div上，在事件冒泡过程中捕获该事件然后判断事件来源。
这条规则分为两个方面，
Gzip通常可以减少70%网页内容的大小，包括脚本、样式表、图片等文件。Gzip比deflate更高效，主流服务器都有相应的压缩支持模块。
虽然标题叫配置ETags，但是这里你要根据具体情况进行一些判断。首先Etag简单来说是通过一个文件版本标识使得服务器可以轻松判断该请求的内容是否有所更新，如果没有就回复304 (not modified)，从而避免下载整个文件。
网页后台程序中我们知道有个方法叫Response.Flush()，一般我们调用它都是在程序末尾，但注意这个方法可以被调用多次。目的是可以将现有的缓存中的回复内容先发给客户端，让客户端“有活干”。
那在什么时候调用这个方法比较好呢？一般情况下我们可以在对于需要加载比较多外部脚本或者样式表时可以提前调用一次，客户端收到了关于脚本或其他外部资源的链接可以并行的先发请求去下载，服务器接下来把后续的处理结果发给客户端。
言：
对于刚学完HTML+CSS的初学者们，刚开始写代码的你们还没有前端优化的概念，其实我们不只是会做出一些网页出来，前端优化也必须被注入到代码里。有时候我们会发现一些细少的差别，为什么有的网站打开的速度特别快，有的网站打开的时候前面还有一会大白板时。这时你们有没有想过什么导致有这种差别呢？单从用户体验的角度上来讲，您愿意为打开一个网站等待多长时间？那么问题来了，前端优化，我们应该做些什么呢？如何加快网站响应的速度呢？
接下来的文章中源码时代Web前端（http://www.itsource.cn）讲师会给大家介绍一些常归的提高网页性能的实践和相应的解决方案，让未来的你们在处理前端性能优化上，对自己做出来的产品更有信心。
网页内容
减少http请求次数
大部分网站响应时间都花费在了下载网页资源上，这里的资源指的是：图片、CSS、JS、和Flash等。我们这里讲的减少请求次数是缩短响应时间的关键点。
一般情况下，可以分为两种：
一是通过简化页面设计来减少请求次数。
二是网页比较复杂的脚本或CSS文件可以采用多个脚本或打包放在一个文件里面，图片采用CSS Sprites(图象拼合技术)，把多个图拼成一副图片，然后通过CSS来控制在什么地方显示这张图的什么位置，从而来减少请求次数，这一块的内容，大家可以参照京东下面这一块的CSS定位来实现。
避免页面跳转
避免页面跳转是什么呢？就是当客户端收到服务器的跳转回复时，客户端再次根据服务器回复中的location指定的地址再次发送请求，也是就说，SEO上常用的301重定向
比如说：
我现在要让访问源码时代的同学，进到源码论坛，这就就是服务器端301重定向的实现方法
RewriteEngine On
RewriteCond %{HTTP_HOST} !^www.itsource.cn$ [NC]//这是客户端请求的地址
RewriteRule ^(.*)$ http://bbs.itsource.cn/ [R=301,L]//这是客户端实际看到的网页
延迟加载
我们这里讲的延迟加载需要我们先知道网页最初加载最小的内容是什么，剩下的内容就可以使用延迟加载的实现。
最典型的是Javascript可以延迟加载内容，这个做法是开发网页的时候先确保网页在没有javascript的时候也可以很好的显示正常的页面效果，然后通过延迟加载脚本来完成一些高级的功能效果的做法。
提前加载
这种方法，恰好与上面的方法相反，也就是说先提前加载一些网页中的资源，它又分三类：
1.无条件提前加载
该方法就是当网页加载完成后，马上去加载一些其他内容，如淘宝会在加载完成功后会去加载一些图片拼合后的图片
2.有条件加载
根据用户输入的信息来推断需要加载的内容，比如说百度搜索。
有预期的加载
这个就比较高大上一些了，这个情况一般是在网页重新设计的时候，由于用户的访问行为，本地有旧网页的缓存，而新设计的网站没有，设计者可以通过在旧网页中预先加入一些新网站中可能会用到内容，这样的话，新网页就会先下载一些资源到本地。
减少DOM元素数量
如果网页中的元素过多也对网页的性能有影响，同时也会加重网页加载和脚本的执行，大家可以想一下，平时在使用JS的时候，我们要实现一些效果，是不是得先找到相关DOM元素，然后再执行相关操作。 如果我们网页中的元素过多，是不是就会有一个非常明显的时差呢！所以减少DOM元素数量，仍然影响网页性能。
根据域名划分内容
很多时候，我们在查看其它大型的网站的时候，图片的地址和网站的主域名还不一样，会采用多个域名来存放相关资源的，那为什么要这样使用呢？其实，浏览器一般对同一个域名的下载连接数有所限制，根据域名划分下载内容，可以间接的增大浏览器并行下载连接。大大提高了网站整体的下载资源能力。从而达到优化性能的作用。
减少iframe数量
之前，我们讲过怎么使用iframe，但是在实际的项目中，我们在使用的时候请先注意它的优缺点。
优点：
可以用来加载速度较慢的内容，脚本可以并行下载
缺点：
使用iframe内容为空时也会消耗加载时间并会阻止页面加载
避免404
404就是常见的没有找到服务器资源，一是：影响用户体验，打开一个返回无用信息的页面。二是网页中需要加载一个外部脚本，结果返回一个404，不仅阻塞了其他脚本下载，下载回来的内容(404)客户端还会将其当成Javascript去解析。
CSS
将样式表置顶
由于网页内容从上往下的加载方式，我们尽可能的将CSS样式放在网页的head中会让网页显得加载速度更快，对于内容比较多的网页非常重要，至少不会让用户一直等待一个白屏上，这样的用户体验也是相当好的。
假如我们把样式表放在底部的话，就是出现一种情况，浏览器会拒绝渲染已经下载的网页，因为多数浏览器在实现时都努力避免重新绘制。所以这一样也是一个重点。
避免CSS表达式
有一些基础CSS3的小伙伴们一直很仰慕它强大的二开能力，喜欢用一些CSS表达式来动态的设置CSS属性，在IE5~IE8中支持，其他浏览器中表达式会被忽略。
其它CSS表达式的问题在于它被重新计算的次数远比我们想象的要多，所以我们还是尽量避免使用它来防止使用不当造成的性能开消过多。
用link标签代替@import
在网页的设计中，请尽量使用link标签来引用CSS，避免使用@import来引用，原因很简单，您可以理解为就是将CSS样式放在网页中的内容底部就可以了。
图片
优化图像
在网页的制作中，我们会发现，banner这一类的图片加载起来非常的慢，同时也影响网站的速度，少者几百K，大者几M。那么究竟这样的图片还有没有优化的空间呢！？
今天我给大家推介一个图片优化的平台，它就是设计师们经常去的智图网，同时我们也可以来看一个例子：
大家可以看到，原图和优化过后的（智图）图片，相差了500多K，如果对于图片比较多的网站，我们把整站的图片都用来优化一下，那么可以想象一下，这是要节省多少流量呀！所以这些图片优化我要强力推荐一下了。
避免空的图片src
我们在使用img标签的时候，尽量避免使用空的图片src，因为空的图片src仍然会使浏览器发送请求到服务器，这样完全是浪费时间，而且浪费服务器的资源。尤其是你的网站每天被很多人访问的时候，这种空请求造成的伤害不容忽略
优化CSS Sprite
Spirite中水平排列图片，垂直排列会增加文件大小；
Spirite中把颜色较近的组合在一起可以降低颜色数，理想状况是低于256色以便适用PNG8格式；
不要在Spirite的图像中间留有较大空隙。这虽然不大会增加文件大小,但对于用户代理来说它需要更少的内存来把图片解压为像素地图。
不要在HTML中缩放图片
避免使用大图实现图片大小缩放来适应页面，如果你需要小图片，就直接使用小图片吧。原因很简单，针对不同的设备可以做到最好的效果，而不是加载就大的图，来整体实现效果，如果是手机端用户，这个开消还是挺大的，毕竟这是一个讲流量的时代。
使用小且可缓存的favicon.ico
一般企业网站或站长都喜欢加一个图标文件favicon.ico，不管你服务器有还是没有，浏览器都会去尝试请求这个图标。所以我们要确保这个图标存在并且文件尽量小，最好小于1k 设置一个长的过期时间
总结：
最后，本文主要针对初级入门网页设计人员，该文内容仅涉及到HTML、CSS、Javascript、images等内容，当然还有一些其它的方法，我们在下一期的文章中指出。
当然，上面提及的一些常归的前端优化小技巧你GET到了吗？请不要在你的网页中出现与此类似的错误，要不然真的很影响用户体验，毕竟，现在是WEB2.0的时代，如果用户对你的网页不满意，那就是对开发者的否定，所以为了做出更好更优秀的网页，我们尽可能多的去关注这些小细节。
写本文的目的，就是为了更好的让初级的小伙伴们快速成长起来。做一个优秀的开发人员，同时写出来的内容可以用于同行交流体会，如果你还有更好的方法和技巧，请在下方的交流区里留言，我会第一时候回复您。谢谢！
用Firebug动态的查看元素的变化(HTML与CSS)
.blogs figure img { width: 100%; margin: auto; -moz-transition: all 0.5s; -webkit-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; }
.blogs figure:hover img { -moz-transform: scale(1.1); -webkit-transform: scale(1.1); -o-transform: scale(1.1); -ms-transform: scale(1.1); }CSS3标签中的transform：scale(图片缩放比例), 1代表原图显示, 1.1缩放1.1倍…
transform: 变形
scale: 缩放
tranistion: 过渡
*请认真填写需求信息，我们会在24小时内与您取得联系。
