认识达内从这里开始

随着互联网的不断发展，越来越多的人都在通过参加达内IT培训课程来实现互联网行业的转型发展，下面我们就通过案例分析来简单了解一下，移动端编程性能优化都有哪些关注点。

1、综述

前端优化分为两个切入点：网络传输与DOM操作，而网络传输是制约一个网站速度的主要因素。

网络传输的优化要点是，零请求，无流量，其意是大程度的减少请求数，降低请求量。

我们应该避免页面长时间白页，这个时候便提出了fake页的概念。页面渲染只需要完整的HTML以及CSS，这个便是一个优化点。

从数据请求数以及请求量来说，webapp页的响应应该比较慢，若是任由js加载完成再渲染页面，用户很有可能失去耐心。

但是从DOMContentLoaded来看，页事实上页面响应比较迅速，所以这个加载结束后页面一屏便渲染结束，然后再异步加载js，当js改变后再动态改变dom结构中的一些关键点

这个时候一个静态HTML页面，装载屏的基本内容，让页快速显示

然后js加载结束后会马上重新渲染整个页面，这个样子，用户就可以很快的看到页面响应，给用户一个快的错觉，给人感觉快得多。

2、降低请求数

由webapp页来说，不可避免的使用的js文件较多，这些文件分为两类：

①框架js-css

②各个业务团队js-css

所以可以限定每个业务团队只会加载这四个文件，以小降低请求数，这里又涉及到并行加载，数量与容量有一个临界值，如何取这个临界值需要各位自己去实验

3、降低请求量

虽说图片压缩是不必说的事情，但是总会有些时候你会发现一些网站的图片尺寸很大，这个需要处理，而且必须处理。

以框架库为例，除了核心包以外，不需要的UI或者功能库可以剔除，用到了再动态加载，减少次加载量，这个一开始就得做好，做不好后期就不好改

以业务团队为例，次加载的js与html模板会将常用的几个页面压缩合并，其它页面访问时再请求，若是想提升屏加载便可以只下载需要的页面文件。

另外，以下两点尤其需要注意：

①若是你们是要的还是jQuery库的话，可以考虑换成zepto了

②勿胡乱引用三方库，若是要引用一定是读懂源码的情况下重写使用之，这样的好处是，吃得透，万一有问题，能改，而不是没办法又换库

4、缓存Ajax/localstorage

该方案的原理与前面类似，我们发送Ajax请求时候，应该缓存一些非实时数据，比如城市信息和常用联系人，但是我们只能缓存非敏感信息，

产品搜索页至列表页的请求数据会缓存30s-60s，若是过期时间内用户回到列表页的话不会重新请求数据

这对服务器压力，页面响应皆是有利的，这个在30s内事实上意义不大，可以减少一次请求。

另外，对于get和post的效率，曾经有人做过一次测试：

get100次平均耗时323ms;post100次平均耗时589ms，所以post方式是比get慢的，但post请求的优点是安全，并且参数没有长度限制。

是选择post还是选择get，皆需要处理，避免截断url，或者处处post。

【免责声明】：本内容转载于网络，转载目的在于传递信息。文章内容为作者个人意见，本平台对文中陈述、观点保持中立，不对所包含内容的准确性、可靠性与完整性提供形式地保证。请读者仅作参考。更多内容请加danei0707学习了解。欢迎关注“达内在线”参与分销，赚更多好礼。