两个基本点
1. 择重避轻,有所取舍
- 核心优先
通常来讲,系统都是庞大的,不要太完美主义,先抓住重点,理解哪些是我们的核心页面,哪些页面对我们来说事最重要的,哪些页面访问量最高,核心优先
- 主要问题在哪,抓住瓶颈点
治病要医本,优化前,需要进行细致的分析,抓住主要瓶颈点,对症下药。优化那么多的方子,别全采用,通常几个就能达到效果
2. 简单有效才是硬道理
越是简单的东西越容易控制,越不容易出错,尽量避免将系统设计的过于庞大,过于复杂,这是在做产品,而不是在搞研发,很多看似很蠢的方法,往往越是有效。
新技术,新方法的引用是具备一定风险的,要评估,要慎重!
js处理
1. 尽量放在页面尾部
js的加载时阻塞页面,没下载完毕后面的内容不会出来,所以尽量避免把js放在页面头部,按照经验估计,整个页面中所用的js逻辑,90%都是可以放在页面尾部的
2. 延迟加载
很多的业务逻辑并非每次都使用也不是要立即使用,首次加载过程中仅仅加载那些必须的,只有当必要的条件触发,才去加载请求必要的js,比如说权限验证通过,加载管理模块
3. 合并js,减少请求
请求多个小文件的效率远小于请求一个大文件的效率,因为需要多次DNS解析,多次连接,浏览器和server端也需要多次开启进程、权限验证和预处理,以及http请求在数据包传递上的一些问题
所以尽量避免在页面中加载一堆的js文件,将小的js合并成一个大的js文件统一输出,页面因此被卡住的时间肯定会减少很多
4. js压缩
此手段属前端特有,毕竟流量一味着速度,意味着金钱, 是在降低代码的可读性为前提。但事物的两面性告诉我们,可读性差也意味着安全,而且可读性可以通过保存压缩前的源文件解决
所谓的压缩,就是把长的变量名换成短的,去掉没用的空格和换行符,从而节省我们JS程序的长度,不过目前这种处理已经很成熟,通过搜索可以搜出很多相关的工具
经验值,能压缩50%以上,视程序与压缩工具而论
5. 尽量少用第三方库
在我的印象中,很多框架都是很庞大的20K以上,虽然很强大很方便,但如果不是做企业级应用,不要应用,因为我们也许只用了其中很少的一部分却加载了整个框架
6. 合并ajax请求
Ajax请求的数据,如果涉及到请求多种数据,尽量考虑将其合并
7. 合理的使用缓存
缓存似乎是server端的事儿,但是js中也是经常用的
8. 能静态化输出,尽量少用js渲染输出
页面制作
1.素材合并
尽量把页面中的图片合并在一起,利用css sprite切割,这样减少了请求的次数。通常合并成3张大的图片,一张是有固定宽高,另外两张是分别横向或者纵向平铺的
2.css预处理
道理同js压缩,也是很多工具可用
3.图片背景切割平铺
利用好雪碧图, background的各个方法
4.少用iframe和frameset
首先一点是frame会阻塞页面,第二,产生额外的请求,第三,如果涉及交互,增加开发维护成本,第四对搜索引擎优化不好
5.css尽量放到页面头部
浏览器只有等css下载完毕后,才会真正的显示页面,所以为了页面尽快有所输出,把css放在头部,而且浏览器对css处理时并行的,不会像js那也阻塞页面
网友评论