前端优化规则小汇总

Posted 2020-06-13

（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要在你的加载过程中不影响内容表现。