Web前端性能优化规则_高效提升前端性速度

只有10%~20%的最终用户响应时间花在了下载HTML文档上、其余的80%~90%花在了下载页面中的所有组件上、有一部分时间花在解析HTML、脚本、样式表上面、首先整页时间>3s 、延迟1秒的页面加载时间可能导致转换损失7%、减少11%的页面浏览量、并减少16%的客户满意度

如果3秒后、网页还未加载完毕、57%的用户会放弃、74%的用户登录某网站时间超过5秒后就不会再登录这个网站、下面说一下总结的性能优化方案

1、减少HTTP请求

CSS Sprites

通过网上现成的CSS Sprites工具、或者自己用ps合成将一些所谓的小图片整合成一个background的png图片、然后通过css background属性的position来定位到对应图片的位置

优点：通过CSS Sprites可以减少HTTP请求、降低下载量(减少图片字节)、通常不建议将大图也进行合并操作

缺点：如果考虑响应式设计、或者要适配手机屏幕、可能为了调整图片自适应大小会很苦恼、后期如果重改设计就会增加

合并脚本和样式表

通过合并脚本和样式表能有效的减少HTTP请求、因为每一个文件就会导致一个额外的HTTP请求

除此之外还有2中 图片地图和内联图片、不过在IE支持下不是很好

2、压缩组件

使用gzip、deflate编码来压缩HTTP响应包、去压缩脚本、样式文件、HTML、包括（XML、JSON在内的任何文本响应、图片和PDF不建议压缩）并由此减少网络响应时间、并配合Expires和Cache-Control来缓存响应、压缩通常能将响应的数据量减少将近70%

3、使用CDN

CDN(内容发布网络)、将应用程序Web服务器分散开来、达到将响应时间大幅减少、CDN 是一组分部在不同地理位置的web服务器、用于更加有效地向用户发布内容、CDN用于发布静态内容、如图片、脚本、样式表河和Flash、静态文件更容易存储并且具有较少的依赖性、对于地理上分散的用户人群来说、CDN能轻易得到响应速度上的提高

4、增加Expires头

浏览器和代理使用缓存来减少HTTP请求的数量、并减少HTTP响应的大小、使用WEB页面加载得更快、Web服务器使用Expires头来告诉Web客户端它可以使用一个组件的当前那副本、直到指定的时间为止、HTTP规范中简要地称在某一段时间之后、响应被认为是无效的、可以给CSS、脚本等添加Expires、在升级版本的时候将v的后缀版本号调整发布即可

5、将样式表放在顶部、将脚本放在底部

如果将脚本文件放在顶部会阻碍样式文件加载这样带来恐怖的后果是、堵塞内容的呈现、页面将一段时间白屏、或者页面残缺、响应时间变慢、将样式表文件放在底部也是因为这个原因、另外脚本会阻塞其后组件的下载、前端是为了给用户以更好的体验、所以先把用户体验放在第一位

将一个web页面组件平均放在两个主机名下面、整体响应时间可以减少大概一半响应时间、一般不建议超过4个主机、另外建议使用延迟脚本Defer属性、脚本内不包含document.write、在FireFox中延迟脚本也会阻塞显示和并行下载、如果一个脚本可以延迟那么一定也可以放在页面底部加载

6、避免CSS表达式

CSS表达式是CSS属性的强大的方式 IE5以后的版本支持它,CSS表达式会造成页面频繁的被渲染、增加页面内存占用率、表达式的问题就在于它的计算频率要比我们想象的多、不仅仅是在页面显示和缩放时、就是在页面滚动、乃至移动鼠标时都会要重新计算一次

给CSS表达式增加一个计数器可以跟踪表达式的计算频率、在页面中随便移动鼠标都可以轻松达到10000次以上的计算量、IE就会假死、这个时候建议用setTimeout做一个节流器

7、使用外部javascript和css

内部的脚本和样式确实会比外部的来的快很多、而且减少HTTP请求、但是考虑到组件重用方面如果给外部组件加上缓存在用户浏览量越多的情况下效率越高、反之、如果用户量越少的网页内联的理论会越强、这时候可以考虑加载后下载将文件appendChild在body下

8、减少DNS查找

DNS也是开销、通常浏览器查找到一个指定的主机名IP 需要20~120ms在DNS查找完毕之前、浏览器不能从主机名那里下载到任何东西、通过使用Keep-Alive和较少的域名来减少DNS查找（Keep-Alive可以通过重用现有连接、从而通过避免TCP/IP开销来减少响应时间、避免重复的DNS查找）

我们建议将组件分别放到2个、但不超过4个的主机名下、这是在减少DNS查找河允许高度并行下载之间做出的很好的权衡

9、精简Javascript

精简Javascript 通过代码的混淆、清除空白、代码的重构、简化、可以通过JSMin、grunt、gulp、webpack、gzip压缩和网上的一些精简代码的插件解决

10、避免重定向

重定向会使你的页面变慢、重定向会阻碍页面加载时间、它发生在URL的结尾必须出现(/)而没有出现时、当缺少结尾斜线是很多Web服务器默认行为、包括Apache、所以主动加上结尾斜线还是很有必要的、去检查一些你的web日志就能看到发出了多少301状态码、这能帮助你认识到多么值得去解决缺少结尾斜线的问题

11、配置ETag

ETag(Entity Tag)是web服务器河浏览器用于确认缓存组件是否有效性的一种机制、ETag是加入为验证实体提供了比修改日期更为灵活的机制、例如实体依据User-Agent或者Accept-Language头而改变、实体的状态可以反映在Etag中、如果浏览器必须验证一个组件会使用If-None-Match 头将Etag传回原始服务器

如果ETag是匹配的、会返回304状态码、那么恭喜你已经节省了资源、对于集群来处理请求的网站来说、Apache河IIS向ETag中嵌入的数据会大大降低有效性验证的成功率、ETag还降低了代理缓存的效率、这里如果你的组件必须通过修改日期之外的东西来验证、则ETag是一种强大的方法

12、使Ajax可缓存

Ajax是DHTML中的一项关键技术、而DHTML仅用于Web2.0应用程序、Ajax拥有异步和及时的特性、虽然Ajax请求是异步的、用户可能仍然需要等待响应、如果界面中打开网站有10个ajax请求处理并加载到页面中如果用户关闭该页面并重新打开它、会产生这10个请求因为这些请求没有被缓存、响应中没有任何一个头告诉浏览器对其进行缓存

如果10个请求中有一半都是一样的、我觉得可以考虑用ajax、但并不是必须的、因为ajax请求一半都是一样的那么我觉得可以将一样的一半重新设计吐出在模板中更合理、当然缓存ajax适用于特殊情况、有趣的是在IE浏览器中ajax是默认被缓存的使得我们不得不在URL下添加时间戳来解决这个问题