# 网络加载类
# 减少HTTP资源请求次数
在前端页面中,建议尽可能合并静态资源图片、javascript、css代码,减少页面请求数和资源请求消耗,缩短页面首次访问的用户等待时间,通过构建工具合并图片、css、javascript文件,同时也要尽量避免重复的资源。
# 减小HTTP请求大小
除了减少请求,同时也要尽量减少每个http请求的大小。如减少没必要的图片、javascript、css及html代码,对文件进行压缩优化,或者使用gzip压缩传输内容等.
# 将css或javascript放到外部文件中,避免使用<style>或<style>标签
在html中引用外部资源可以有效的利用浏览器的静态资源缓存,但有时候在移动端css和javascript比较简单的情况下为了减少请求,也会将css或js直接写入html,具体要根据css和js的文件大小和业务场景来分析。
# 避免页面中的空的href和src
当link中的href属性为空,或script、img、iframe标签的src属性为空,浏览器在渲染的过程仍会将href属性或src属性中的空内容进行加载,直至加载失败。
# 为HTML指定Cache-Control或Expires
为HTML内容设置Cache-Control或Expires可以将HTML内容缓存起来,避免频繁向服务器发送请求。
<meta http-equiv="Cache-Control" content="max-age=7200">
<meta http-equiv="Expires" content="Mon, 20 Jul 2016 23:00:00 GMT">
2
# 合理设置Etag和Last-Modified
合理设置Etag和Last-Modified使用浏览器缓存,对于未修改的文件,静态资源服务其回想浏览器返回304,然浏览器从缓存中读取文件,减少Web资源下载的带宽小号
# 减少页面重定向
页面每次重定向都会延长页面内容返回的等待延时,一次重定向大约需要600毫秒的时间开销,为了保证用户尽快看到页面内容,要尽量避免页面重定向。
# 使用静态资源分域存来增加下载并行数
浏览器在同一时刻向同一个域名请求文件的并行下载数是有限的,因此可以利用多个域名的主机来分别存储javascript、css和图片文件
# 使用静态资源CDN来存储文件
如果条件允许,可以利用CDN网络加快同一个地理区域内重复静态资源的响应下载速度,缩短请求时间。
# 使用CDN Combo下载传输内容
CDN Combo是在CDN服务器端将多个文件请求打包成一个文件的形式来返回的技术,这样就可以实现HTTP传输的一次性复用。
<script src="//cdn.domain.com/path/a.js,b.js,c.js">
# 使用可缓存的AJAX
对于返回内容相同的请求,没必要每次都直接从服务端拉取,合理使用AJAX缓存能加快AJAX响应速度并减轻服务器压力。
# 使用GET来完成AJAX请求
使用XMLHttpRequeest时,浏览器中的POST方法发送请求首先发送文件投,然后发送HTTP正文数据,而使用GET时只发送头部,所以在拉取服务端数据时使用GET请求效率更高。
# 减少Cookie的大小并进行Cookie隔离
HTTP请求通常默认带上浏览器端的Cookie一起发送给服务器,所以在非必要的情况下,要尽量减少Cookie来减小HTTP请求的大小,对于静态资源,尽量使用不同的域名来存放,因为Cookie默认是不跨域的,这样就做到了不同域名下静态资源请求的Cookie隔离。
# 缩小favicon.ico并缓存
有利于favicon.ico的重复加载,因为一般一个Web应用的favicon.ico是很少改变的。
# 推荐使用异步JavaScritp资源
异步的JavaScript资源不会阻挡文档解析,所以允许在浏览器中优先渲染页面,延后加载脚本执行。
<script src="main.js" defer/>
<script src="main.js" async>
2
asyn是在加载渲染文档并行,而defer的加载是并行的,执行要等页面所有元素解析完成。
# 消除阻塞渲染的CSS及JavaScript
对于页面中的加载时间过长的CSS或JavaScript文件,需要合理拆分或延后加载,保证关键路径的资源快速加载完成。
# 避免使用css import引用加载css
css的@import可以从另一个样式文件中引入样式,但应该避免这种写法,应为这样会增加css资源的关键路径长度,带有@import的css样式需要在css文件创兴解析到@import时才会加载另外的css文件,大大延后css渲染完成的时间