前端性能
1.模块化
严格地说,代码模块化不能提高性能,但它仍然提出模块化,因为它非常重要,几乎所有的优化都与它密切相关.
常见的模块化方案有:AMD、CMD、UMD、ES6
网站建设公司" />
如何选择?
团队习惯
个人偏好
业务需要
如何把业务放在后面?
由于使用不同的模块化为使用不同的模块化方案而产生不同的结果.
而且软件开发中的以人为本,用在这里刚好合适,毕竟业务高于一切.
2.缓存
一定要加缓存!
因为CDN真的很贵.
没有CDN?那就更慢存了!
缓存的方法有很多,以下两种是常见的
浏览器304缓存
localstorage本地存储
关于304缓存和行业localstorage在这里,我们不讨论两者的区别或性能问题.
选择以业务为导向的方案,选择沙漠风localstorage.
可以这样做:
通过localstorage存储js、css资源;
资源版控制;
只要你愿意,localstorage还可以控制缓存时间!写一小段js实现代码;
活动期间可提前缓存活动相关资源localstorage,减少活动当天CDN在提高用户访问速度的同时,降低服务器端压力.
PS:localstorage开发环境确实有点不够脚踏实地,但你可以在框架底部写一个小代码来支持不同环境的缓存控制,例如:禁止缓存开发环境域名URL参数禁止缓存等.当然,你也可以写一个chrome控制缓存的插件,开心就好!
因此,建议使用沙漠风localstorage尽量使用localstorage.如果你无事可做,你就知道了CDN有多贵了.
3.懒加载
图片懒加载
如果你是做Hybrid开发,这真的有必要!
JS懒加载
模块化的好处之一是我们可以针对它js懒加载控制资源,RequireJS、SeaJS?
我们在这里采用的是RequireJS,问我为什么,也许是因为我们使用它AMD方案吧!
4.渲染前端模板
与拼接字符串相比,jQuery.append,我们有另一种选择,前端模板.
前端模板方案有很多.我在这里推荐腾讯tmodjs.他的优点是可以预编译前端模板js支持模块加载文件.
5.DOM怎么写很重要
浏览器有一种叫做重绘的机制,任何变化dom元素位置的操作会导致浏览器重绘操作,这是不可避免的.重绘是浏览器性能优化的重点,尤其是webview的优化.
既然我们无法避免,我们能做什么?
虽然我们不能避免浏览器重绘,但我们可以通过精确的控制dom为了降低浏览器的重绘范围,我们可以使用浏览器的开发者工具来调整页面.
客户端性能
代理webview发送ajax请求,据说这可以节省三次握手时间?
iOS中使用WKWebView代替UIWebview,UIWebview是iOS8.0以前的产品,针对iOS8.建议使用0后的系统WKWebView,实际测试后,性能可提高40%左右,稳定性大大提高,几乎是质的提高.
webview支持加载webp格式图片.
除静态资源预加载外,静态资源预加载localstorage我们还可以利用客户端缓存前端静态资源WIFI在环境下,我们可以提前将静态资源下载到当地.
服务端性能
1.服务端渲染
在一个将前后端分离为宝典的时代,提到服务端渲染显然是不合适的.
但是,如果考虑到客户端的弱爆炸,Webview,也许这是个不错的选择,毕竟服务端的性能要好得多.对于前后分离的项目,我们建议尝试使用Node.js对页面进行直出,也是不错的选择,Node.js我不需要在这里讨论性能!
Bytheway,屏幕数据服务端输出,懒加载,不要太酷.
2.快速响应接口
快速响应接口真的很重要!
通过优化代码,可以优化代码sql,优化缓存(redisOrmemcached?),优化Nginx配置?double服务器?
ComeOn总有一点能做的!
总之,不要局限于自己.
3.图片转webp
由于webp并非所有环境都支持格式图片。此时,需要与不同的客户动态返回相应格式的图片.