前端优化规则小汇总

(1)    Minimize HTTP Requests 减少HTTP请求

尽可能的减少图片、CSS、Script、Flash等元素的数量,这样可以减少http请求数,进而减少响应时间。将多个JS、CSS文件合并为一个文件,页面图片写进CSS里,并通过CSS sprites技术对页面图片进行处理。

(2)    Make Ajax Cacheable 缓存Ajax

在浏览器接收到新的数据前,为了提高响应效率,将实时响应的Ajax数据进行缓存。

(3)    Post-load Components 延迟加载组件

在进行页面初始化时,先加载必须的组件,然后再加载其他,YUI Get utility是包含JS和 CSS的便捷方法,YUI Image Loader可以帮助推迟加载折叠部分的图片。

(4)    Preload components 预加载组件

当用户要访问下一个页面时,使用预加载在浏览器空闲时请求用到的页面内容(如图像、样式表和脚本),可以大大改善访问速度。

(5)    Reduce the Number of DOM Elements 减少DOM元素数量

合理高效的使用标签来架构页面,因为复杂的页面结构意味着更长的下载及响应时间。

(6)    Use a Content Delivery Network 利用CDN技术

内容分发网络(Content Delivery Network,CDN)是由一系列分散到各个不同地理位置上的Web服务器组成的,这些服务器主要是根据用户在网络上的靠近程度来指定的,它提高了网站内容的传输速度。

(7)    Gzip Components Gzip压缩

几乎所有的浏览器都有解压Gzip格式的能力,通过Gzip压缩HTTP响应可以减少文件体积,节省HTTP响应时间,从而增加用户体验。

(8)    Use GET for AJAX Requests 用GET方式进行AJAX请求

Get 方法和服务器只有一次交互(发送数据),而 Post 要两次(发送头部再发送数据)。

(9)    Put Stylesheets at the Top 把CSS放顶部

让浏览者能尽早的看到网站的完整样式。

(10)Make JavaScript and CSS External 将JS和CSS外链

因为JavaScript和CSS文件都能在浏览器中产生缓存,所以在实际应用中使用外部文件可以提高页面速度。

(11)Put Scripts at the Bottom 把JS放底部

网站呈现完毕后再进行功能设置,当然这些JS要在你的加载过程中不影响内容表现。

原文地址:https://www.cnblogs.com/meggie523/p/5189081.html