对付刚学完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/$1 [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的时期，如果用户对你的网页不满意，那便是对开拓者的否定，所以为了做出更好更精良的网页，我们尽可能多的去关注这些小细节。
写本文的目的，便是为了更好的让低级的小伙伴们快速发展起来。做一个精良的开拓职员，同时写出来的内容可以用于同行互换体会，如果你还有更好的方法和技巧，请不才方的互换区里留言，我会第一时候回答您。感激！
