一次移动优化之旅_html/css_WEB-ITnose-html教學-PHP中文網

首頁

web前端

html教學

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:16 AM

在这里介绍移动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代码：

<!doctype html><html><head>    <title>Test</title>    <meta charset="utf-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>    <meta name="format-detection" content="telephone=no" />    <meta name="apple-mobile-web-app-capable" content="yes" />    <meta name="apple-mobile-web-app-status-bar-style" content="white" />    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />    <link rel="stylesheet" type="text/css" href="../../tlibs/style.css"></head><body style="overflow: hidden;margin:0;"><div id="app"><p style="color: red;">Hello World</p></div><div id="mask"></div></body><script type="text/javascript" src="../../libs/jquery-1.11.2.min.js"></script><script type="text/javascript" src="../../libs/highcharts.js"></script><script type="text/javascript" src="../../tlibs/connect.js"></script><script type="text/javascript" src="../../tlibs/__tdx_vendor.js"></script><script type="text/javascript" src="../../tlibs/__tdx_client.js"></script><script type="text/javascript" src="./index_config.js"></script><script type="text/javascript" src="./index_func.js"></script></html>

html页面中有节点 script, link遇到这些 Webkit又要调用资源加载器来加载资源了。效果图如下：

可以看到，这些资源请求是异步的，就是说请求资源的请求是同时发出去的，没有等上个资源返回后再发送。

资源的加载重复上面加载 html 页面的过程: send request -> receive data -> caculate (scripting 部分) -> finish。

在当前情形下， jquery回来后，开始 scripting, 接着是 highcharts, ···

scriping这个部分是线性的，javascript 的特性。

3. css，js文件解析过程中

css, js文件解析过程中，又有 url 链接图片什么的，又是请求发送。

4. 在App中出现页面的最后时刻

在 App 中出现页面的最后一刻，有个 scriping的过程，这里的触发事件在左侧显示为 GC Event, 这个是什么东西？？？

优化思路

通过上面的分析，优化页面显示的时间，个人认为主要有几个方向：

Send Request 71fb34173e4ee87dab1f85dc1c283a44 Receive Response, Receive Data

这个过程中，如果你的页面是远程服务器上，那么这个就和网络有关了，网络要好，文件要压缩变小。对于多个文件是否要合并为一个文件，从 `timeline` 时序上看，请求是并行的，如果带宽和请求链接数没有限制的话，个人感觉分开请求比较好。当然也不能太多了，每个文件几k，这样就合并就没有天理了。

scripting阶段，这个是读js代码逻辑，就是把js文件执行一遍。这里的优化就看你的业务逻辑了。
图片资源，动态图下载，图片请求的 Send Request Receive Response之间的响应太长了，
```
中间还涉及了一个 `GC Event`, 这个有什么用？？？如图：
```

对于目前个人的需求，文件放在本地，所以

优化1，这里合并文件效果不大。

优化2，

对于外部引用，可以去掉外部引用组件逻辑，例如 jquery, highcharts 这些，或者找个好点的库。

对于自身的逻辑，最好分析下流程，看看哪里耗时

优化3，那个 GC Event的作用还不怎么清楚，研究中。

还有一个想法是调用 React中 server的 renderToString方法，先生成静态页面，显示内容。这里就是在载入 html 页面后，直接显示。

设想的结果：

载入html，显示出来
现在js，css，图片等资源文件，准备好后更新页面

这样可以消除页面准备过程中，空白的问题。想法很好，但是现实很骨感。在 App 中载入 html 页面尽然没有显示出来，非要等js准备好后，才显示界面，

这是为什么？？？（设想结果1没有）

在手机的浏览器中就么有这个问题？？？ why ？？？

个人代码部分分析

手机App中，看到有2个js文件耗时很大: __tdx_vendor.js, __tdx_client.js

这是2个什么文件，总的来说，我这边文件引入的库是 React，所有的文件通过 webpack 打包形成这2个文件。

具体的时序图，在 chrome://inspect中看不到，我们直接在浏览器中打开分析：

先不考虑外部文件的效率。

webpack 打包后的文件，需要读取的时候，每个都要花费这么长的时间？？？

在 __tdx_vendor.js 中只有 react 和 react-dom 的 dist 文件。内容如下：

这里只是贴了前面的部分，所有的module都在这个自执行函数的参数中。一个个的参数开始执行并缓存下来。

问题

感觉说的有点乱，目前存在的问题：

html加载完成，js，css等文件没有finish的时候，在浏览器中会先显示html原有的内容，然后再更新。但是在 App 中的 WebView 组件为什么没有这样的显示逻辑。

测试代码:

// index.html<!DOCTYPE html><html><head>    <title>Test</title>    <meta charset="utf-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>    <meta name="format-detection" content="telephone=no" />    <meta name="apple-mobile-web-app-capable" content="yes" />    <meta name="apple-mobile-web-app-status-bar-style" content="white" />    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" /></head><body><h1 id="This-is-a-static-page">This is a static page</h1></body><script type="text/javascript" src="./index.js"></script></html>// index.js!function() {    var date = new Date();    var curDate = null;    do {        curDate = new Date();    } while (curDate - date < 5000);    setTimeout(function() {        var el = document.getElementById("page");        el.innerHTML = "This is a second page";    }, 5000)}()

如果后面找到解决方案，会更新到后面。

20160602-2002

我的问题，这个地方浏览器和移动App的显示效果是一样的。初次加载的时候，都会卡顿5s，等 index.js执行完成后页面才会出来。

Sorry

参考

使用Chrome DevTools的Timeline分析页面性能

Webkit技术笔记(2):详解 webkit 网页渲染过程

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

了解HTML，CSS和JavaScript：初學者指南Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。

HTML的角色：構建Web內容Apr 11, 2025 am 12:12 AM

HTML的作用是通過標籤和屬性定義網頁的結構和內容。 1.HTML通過到、等標籤組織內容，使其易於閱讀和理解。 2.使用語義化標籤如、等增強可訪問性和SEO。 3.優化HTML代碼可以提高網頁加載速度和用戶體驗。

HTML和代碼：仔細觀察術語Apr 10, 2025 am 09:28 AM

htmlisaspecifictypefodyfocusedonstructuringwebcontent，而“代碼” badlyLyCludEslanguagesLikeLikejavascriptandPytyPythonForFunctionality.1）htmldefineswebpagertuctureduseTags.2）“代碼”代碼“ code” code code code codeSpassSesseseseseseseseAwiderRangeLangeLangeforLageforLogageforLogicIctInterract

HTML，CSS和JavaScript：Web開發人員的基本工具Apr 09, 2025 am 12:12 AM

HTML、CSS和JavaScript是Web開發的三大支柱。 1.HTML定義網頁結構，使用標籤如、等。 2.CSS控製網頁樣式，使用選擇器和屬性如color、font-size等。 3.JavaScript實現動態效果和交互，通過事件監聽和DOM操作。

HTML，CSS和JavaScript的角色：核心職責Apr 08, 2025 pm 07:05 PM

HTML定義網頁結構，CSS負責樣式和佈局，JavaScript賦予動態交互。三者在網頁開發中各司其職，共同構建豐富多彩的網站。

HTML容易為初學者學習嗎？Apr 07, 2025 am 12:11 AM

HTML適合初學者學習，因為它簡單易學且能快速看到成果。 1)HTML的學習曲線平緩，易於上手。 2)只需掌握基本標籤即可開始創建網頁。 3)靈活性高，可與CSS和JavaScript結合使用。 4)豐富的學習資源和現代工具支持學習過程。

HTML中起始標籤的示例是什麼？Apr 06, 2025 am 12:04 AM

AnexampleOfAstartingTaginHtmlis，beginSaparagraph.startingTagSareEssentialInhtmlastheyInitiateEllements，defiteTheeTheErtypes，andarecrucialforsstructuringwebpages wepages webpages andConstructingthedom。