最近,我们的APP上线了一个聚会功能,对于内容呈现部分都采用移动WEB来实现,这样做的好处是减少重复工作量。确定的是体验会打折扣,那么有没有办法把聚会详情页面性能进一步提高呢?(例如页面加载速度)需要考虑哪些可以提高性能的方面?

提这个问题,一方面想要了解,另一个方面,让在校学前端的学生知道我们在工作中遇到了哪些实际问题。 『虢鹏』

讨论

静态文件打包到客户端里面去,ajax取数据,比每次都请求html、css、js要好很多。缺点是,更新不方便,需要实现一套更新本地 静态文件的机制。 『晴天』

同上。local模板,更新机制。 『jaskang』

更新本地 静态文件机制?有栗子吗?举个栗子 『瘦狒狒』

每日看点新闻详情页面就是这么干的,大的APP最早应该是支付宝这么干。更新方式其实也简单,从服务端下载一个文件包,直接解压覆盖本地目录。每日看点的数据 还不是ajax 请求的,native请求的接口,然后 通过webview 传给js的。 『晴天』

这个文件包里面有神马?html css js?你说的这个方式和我们现在聚会详情页的实现有神马区别呀? 『瘦狒狒』

你现在做的有4部分,html、css、js、数据,我说的方案是将 html、css、js 都放在本地,不需要请求网页直接打开,渲染后ajax 请求服务端的数据,生成页面。

你可以了解下 打开浏览器输入网址回车到你网页呈现在你面前的过程,简单的说,需要先通过域名查询dns,然后要 tcp 三次握手建立 socket 连接,并将http 请求的协议传输过去,服务器收到 http的最终协议后,做服务端处理,将页面输出,再传送到浏览器里面,这个时候浏览器才能解析html。对于html中包含的图片、css和js文件,都需要发起一个类似上面的请求获取内容,再交给浏览器来渲染展现。

网络请求耗时是最大的,native 嵌 web页面体验差主要就是这个原因。 『晴天』

你是说填充进去的数据全部用ajax请求 然后用js填进去? 『瘦狒狒』

是的。前端也有 mvc,也有模板引擎。 『晴天』

那用模板引擎也得引进模板语言 还有模板引擎解析也有时间消耗吧,还有安全问题 『瘦狒狒』

js 的模板引擎 多了去了,没有安全问题。模板引擎的时间消耗跟 网络传输造成的时间消耗 相比 完全能忽略。这个是成熟的技术方案,很多都这么干的。新浪sae的移动云,就可以直接将前端代码打包到 一个webview的壳里面,12年的时候,这个就是成熟方案了。 『晴天』

本地调用,那pc访问是怎么处理的?类似于h5安全中心 『昱北』

native app 里面混的 web页面 干嘛要pc访问。确实要的话,单独做一套。

h5安全中心 的直接嵌的web页面,跟虢鹏的APP现在的一样,但是虢鹏不是想解决体验不好的问题么。方案就是 前端代码 打包放在app里面。

尤其是手机端 很多都是 移动网络,直接请求网页 会特别慢,还造成流量消耗。想想每点一次按钮,给下载一个 几十K的 jquery文件,还有图片、样式、html等等,如果你是移动网络的用户,你愿意接受不? 『晴天』

不愿意。我们公司的客户端也是打包js在客户端的 『阮胜』

现在很多大APP都没有这么干了,主要也是现在的网络好了。微信、手Q 里 都是直接嵌的 网页 『晴天』

同上。赞。你要是页面写得精简 也不需要这些,一个页面没多少内容和交互,jq啥的都不用。好好优化一下就是了。 『jaskang』

声明

以上内容整理自新叶学习QQ群。

本文链接:http://tabalt.net/blog/improve-performance-of-the-html5-page-embedded-in-the-native-app/,转载请注明。