网站前端优化与调优

今天北京下雪了，整理了一份前端优化的PPT，希望对大家有帮助。
一、为什么
时间花在哪了？
（1）大量的HTTP请求产生
（2）在请求脚本时不发生并行请求
注：大多情况下，浏览器在下载脚本时会阻塞额外的HTTP请求
二、怎么想
性能黄金法则
只有10%-20%的最终用户响应时间花在了下载HTML文档上，其余的80%-90%时间花在了下载页面中的所有组件上。
如：图片、FLASH
1、减少HTTP请求
2、缓存
3、减少文件大小
三、怎么做
（1）减少HTTP请求
1、图片地图
2、CSS Sprites
3、内联图片
4、合并JS和CSS
注（1）一般来说，使用外部脚本和样式表对性能更有利
（2）一般来说，一个页面应该不多于一个脚本和样式表文件
（3）脚本模块化
（2）CDN
CDN即内容分发网络。CDN是构筑在现有Internet上的一种先进的流量分配网络,能够提高访问的响应速度和服务的可用性 。CDN是一个经策略性部署的整体系统，能够帮助用户解决分布式存储、负载均衡、网络请求的重定向和内容管理等问题。
（3）将样式表放在顶部
为什么要这样做？
HTML页面是逐步呈现的，在用户打开页面的同时，我们需要考虑到用户的体现—打开网页的速度。而显示页面第一需求是HTML，而HTML是由一个一个的DIV组成，CSS是一切的基础。
怎么放？
使用LINK标签将样式表放在文档的HEAD中
（4）将脚本放在底部
脚本带来的问题
因为页面是逐步呈现的， 对于脚本以下的内容，会被阻塞。直到脚本加载完毕才会继续呈现页面。正确的放位置（1）最差的情况：将脚本放在顶部。会阻塞其后内容呈现、会阻塞其后组件下载。 （2）最佳的情况：将脚本放在底部。不会阻止页面的呈现。
PPT下载：
网站前端优化与调优