一次移动优化之旅_html/css_WEB-ITnose

在这里介绍移动App中嵌入网页，优化页面显示速度。

前言

最近在Boss的要求下，写组件模式的移动页面。这里选择的库是react。（为什么？ 入门简单 + JSX）。

在经过愉快的编写组件后，打包组件形成组件库文件，然后被页面引用。配置到 App 中后，run···，发现界面显示出来很慢，2s左右才会出现界面和数据。

不开心了，速度太慢。所以准备分析慢的原因。所以有了这篇笔记，新手，轻喷。

工具：Chrome developer tools

为什么2s左右才会出现，使用工具测试了下。 chrome dev tools下的 timeline分析工具很赞。

具体操作方法：

在 chrome浏览器地址栏输入 chrome://inspect这个是远程调试工具，调试 App 应用中的 html 神器。

选择 chrome下检查到的你的网页，点击 inspect 进入就行。

这里你的手机应该是连着电脑的。 

选中 timeline工具，打开分析，刷新网页。 结果就出来了

效果如图：

分析

1. 根据 url 加载 html 文件

读取 url 后，webkit 调用资源加载器加载 html 资源。在上图中可以看到触发了6个操作。

我们从时序上开始分析。

Send RequestReceive ResponseReceive DataRecaculate StyleFinish LoadingParse HTML 

步骤6在手机浏览器中，是会提前显示出来的，但是在 App 中怎么会不显示呢？（这个求大神解决下）

2. html文件弄好后，开始做里面的资源文件了

附上 html代码：

        Test                                     
Hello World

      
查看更多关于一次移动优化之旅_html/css_WEB-ITnose的详细内容...
        

          
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did112437