今天北京下雪了,整理了一份前端优化的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下载: