性能优化是一个复杂的话题,涉及的技能多样,既有前端的优化,也涉及后端的优化,但前端影响着绝大部分页面性能。今天给大家总结一些常见的方法。
一、尽量减少HTTP请求次数
用户初次访问你网站,页面http连接数是影响性能的一个关键,通常建议这么做:合并css / js代码,背景图片sprite。
二、尽量减少外部脚本的使用
减少DNS查询时间,避免页面跳转、重定向,尽量减少DOM元素的数量,控制iframe的使用。
三、延迟加载
建议使用图片懒加载和局部异步加载。图片懒加载的好处是能在某些条件下或者页面刚加载时减少HTTP请求数,在页面刚加载的时候可以只加载第一屏,保证了网页的打开速度,当用户想继续往下浏览内容时,才开始加载其他的图片;局部异步加载,可以让一些不太重要或者需要切换浏览才显示的内容在用户进行操作后去加载,这种方式,也会提升页面打开速度;
四、使用离线缓存
把常用的变动又少的js、css、图片存储到localstorage,第二次访问的时候直接走本地缓存。
五、CSS放在页面顶部,javascript放在页面底部
把css放在head中,防止页面打开瞬间因css没有加载而排版错乱,而js放到body里最后位置,防止加载js阻塞页面影响使用体验。
六、静态资源压缩
图片、CSS、JS在发布前要压缩。
七、静态资源使用多个域名
对于图片、CSS、JS,可使用几个域名,可以并发加载。
八、预加载
在某个功能还没展现时,在空闲时间预先加载相关图片或者js代码