xml地图|网站地图|网站标签 [设为首页] [加入收藏]
移动前端调试页面,Web图片资源的加载与渲染时
分类:web前端

Web图片资源的加载与渲染时机

2017/07/27 · JavaScript · 渲染

原文出处: Leechikit   

此文研究页面中的图片资源的加载和渲染时机,使得我们能更好的管理图片资源,避免不必要的流量和提高用户体验。

打造最舒适的 webview 调试环境

2015/11/11 · CSS · 4 评论

本文作者: 伯乐在线 - risker 。未经作者许可,禁止转载!
欢迎加入伯乐在线 专栏作者。

你在做移动web开发的时候是不是只是在Chrome下开启移动模式,然后就啪啪啪闷头敲代码了?如果你平时只是做做宣传页,Chrome的移动模式可能就能满足你。但是现在越来越多的应用采用Hybrid的开发方式,这样的话就可能在web页面上调用webview注入的函数,那么,这个页面在Chrome上只会报错,因为我们不在webview里,根本没有注入的那些函数。

以我现在做的项目为例,要在页面里判断在客户端有没有登录,可以这样写:

JavaScript

var isLogin = AndroidWebview.hasLogin() ;

1
2
var isLogin = AndroidWebview.hasLogin() ;
 

结果可想而知,AndroidWebview是客户端在webview里注入的方法,这里当然会报错了。

图片 1

移动前端调试页面–weinre

2015/07/30 · HTML5 · weinre, 调试

原文出处: 涂根华的博客   

一:远程调式工具—weinre

Weinre是什么?

Weinre是Web Inspector Remote的缩写(远程web检查器),它的作用就是相当于chrome的审查元素一样,界面和用法也基本一样,无非不同的是:weinre适合在移动端页面调试,比如手机访问页面的时候,我们可以使用chrome浏览器查看页面的html元素和css代码,我们可以对此进行更改,然后在手机端不需要刷新,立即可以看到效果;在移动端调式html和css比较方便。目前weiner也发布到npm上,我们可以使用npm进行安装;npm如下: 

二: 安装weinre

npm install -g weinre

1
npm install -g weinre

图片 2

安装完之后,需要在本地开启一个监听服务器,比如我现在的IP地址是:172.16.28.162

现在需要执行如下命令:

weinre –boundHost 172.16.28.162

可以开启本地监听服务器如下:

图片 3

如上面网址 http://172.16.28.162:8080  weinre默认使用8080端口,我们也可以使用如下命令进行更改端口号;如下命令:

图片 4

三: 访问weinre及在页面上调用

打开浏览器,访问如下地址: 172.16.28.162:8081 如下:

图片 5

如上截图页面;我们需要在调式的页面中加入远程调式所需要的JS代码即可,比如上图截图的最后一句JS代码:

JavaScript

<script src=";

1
<script src="http://172.16.28.162:8081/target/target-script-min.js#anonymous"></script>

引入到需要远程调式页面即可;

我们现在先访问页面 http://172.16.28.162:8081;如下所示:

图片 6

现在我们继续使用我手机来访问我本机上的网页后,在查看刚点击进去后的页面显示如下:

图片 7

如下:

图片 8

但weinre可以方便我们调式HTML元素及css代码,至于JS,我们可以使用Fiddler替换即可满足前端在移动端基本调式了;

四:多用户

Weinre的默认使用中,都是用anonymous作为id的;

比如上面的代码引用:

JavaScript

<script src=";

1
<script src="http://172.16.28.162:8081/target/target-script-min.js#anonymous"></script>

但是如果多个用户同时调式各自的页面会有问题,weinre使用多用户机制解决该问题。Weinre默认支持多用户的,这样一个局域网同事只需要一台电脑上安装weinre即可,不需要每个人都安装,多个用户同时使用时,每个用户使用自己的id来区分,每个用户调式信息可以独立,不会相互影响;

操作如下:

图片 9

图片 10

然后继续刷新设备中的页面,然后在电脑端就可以看到如下信息:

图片 11

就可以进行多用户调式了;

2 赞 2 收藏 评论

图片 12

浏览器的工作流程

要研究图片资源的加载和渲染,我们先要了解浏览器的工作原理。以Webkit引擎的工作流程为例:

图片 13

从上图可看出,浏览器加载一个HTML页面后进行如下操作:

  • 解析HTML —> 构建DOM树
  • 加载样式 —> 解析样式 —> 构建样式规则树
  • 加载javascript —> 执行javascript代码
  • 把DOM树和样式规则树匹配构建渲染树
  • 计算元素位置进行布局
  • 绘制

从上图我们不能很直观的看出图片资源从什么时候开始加载,下图标出图片加载和渲染的时机:

  • 解析HTML【遇到<img>标签加载图片】 —> 构建DOM树
  • 加载样式 —> 解析样式【遇到背景图片链接不加载】 —> 构建样式规则树
  • 加载javascript —> 执行javascript代码
  • 把DOM树和样式规则树匹配构建渲染树【加载渲染树上的背景图片】
  • 计算元素位置进行布局
  • 绘制【开始渲染图片】

真机测试

这种情况怎么开发呢?回顾一下以前的两种办法 :

  • 真机 + Chrome inspect :Chrome 版本必须高于 32,其次你的测试机 Android 系统高于 4.4
JavaScript

1. 先用数据线将 Android
测试机连接到电脑上。需要打开测试机上面“开发者选项”中的 “USB
调试”功能。

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5b8f631a36a36329472806-1">
1
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f631a36a36329472806-2">
2
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5b8f631a36a36329472806-1" class="crayon-line">
1.  先用数据线将 Android 测试机连接到电脑上。需要打开测试机上面“开发者选项”中的 “USB 调试”功能。
</div>
<div id="crayon-5b8f631a36a36329472806-2" class="crayon-line crayon-striped-line">
 
</div>
</div></td>
</tr>
</tbody>
</table>

1.  在PC的Chrome上打开`Chrome://inspect`即可找到你的设备
2.  手机进入一个webview页面,即可在Chrome上看到调试台了![](http://jbcdn2.b0.upaiyun.com/2015/11/f93b8bbbac89ea22bac0bf188ba49a612.png)可以看到,第一个记录是手机里的浏览器的;第二个是记录是手机助手里的webview。
  • 真机 + weinre : 在你本地创建一个监听服务器,并提供一个JS脚本,需要在需要测试的页面中加载这段 JS,就可以被 Weinre 监听到,在 Inspect 面板中调试你这个页面。
JavaScript

1. 安装 weinre `npm install -g weinre`

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5b8f631a36a3a189287013-1">
1
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f631a36a3a189287013-2">
2
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5b8f631a36a3a189287013-1" class="crayon-line">
1.  安装 weinre `npm install -g weinre`
</div>
<div id="crayon-5b8f631a36a3a189287013-2" class="crayon-line crayon-striped-line">
 
</div>
</div></td>
</tr>
</tbody>
</table>

1.  开启 weinre `weinre --httpPort 8888 --boundHost -all-`
2.  浏览器打开 `localhost:8888` :
    ![](http://jbcdn2.b0.upaiyun.com/2015/11/28c8edde3d61a0411511d3b1866f06365.png)
3.  将 “2” 这段脚本加载到调试的页面最后,手机进入页面,然后进入 “1”
    ,就可以看到控制台了
    ![](http://jbcdn2.b0.upaiyun.com/2015/11/665f644e43731ff9db3d341da5c827e14.png)

这两种办法都需要真机测试,你可以想像一下你在开发、调试时的流程:

  1. 写代码
  2. 拿起手机,进入页面
  3. 有BUG,重复1、2
  4. 开发新功能,重复1、2、3

然后你的手不停地在键盘和手机之间切换,多么痛苦。后来,我遇到了Genymotion

图片加载与渲染规则

页面中不是所有的<img>标签图片和样式表背景图片都会加载。

Genymotion

这是一款安卓模拟器,有了它我们可以在电脑上开启一个安卓机。具体使用我就不细说了,很简单请自行搜索。

这是我在模拟器上安装的手机助手:

图片 14

而且使用 Chrome inspect 是直接可以调试模拟器中的webview的:

图片 15

这样,我们就可以不用手忙脚乱地写代码、看手机了,一切都在PC上调试。但是我们在模拟器上看到的是线上代码,我们加一个新功能还要发布代码才能看到效果?

display:none

JavaScript

<style> .img-purple { background-image: url(../image/purple.png); } </style> <img src="../image/pink.png" style="display:none"> <div class="img-purple" style="display:none"></div>

1
2
3
4
5
6
7
<style>
.img-purple {
    background-image: url(../image/purple.png);
}
</style>
<img src="../image/pink.png" style="display:none">
<div class="img-purple" style="display:none"></div>

图片资源请求如下:图片 16

设置了display:none属性的元素,图片不会渲染出来,但会加载。

原理

把DOM树和样式规则树匹配构建渲染树时,会把可渲染元素上的所有属性(如display:none属性和background-image属性)结合一起产出到渲染树。

当解析渲染树时会加载<img>标签元素上的图片,发现元素上有background-image属性时会加载背景图片。

当绘制时发现元素上有display:none属性,则不计算该元素位置,也不会绘制该元素。

JavaScript

<style> .img-yellow { background-image: url(../image/yellow.png); } </style> <div style="display:none"> <img src="../image/red.png"> <div class="img-yellow"></div> </div>

1
2
3
4
5
6
7
8
9
<style>
.img-yellow {
    background-image: url(../image/yellow.png);
}
</style>
<div style="display:none">
    <img src="../image/red.png">
    <div class="img-yellow"></div>
</div>

图片资源请求如下:
图片 17

设置了display:none属性元素的子元素,样式表中的背景图片不会渲染出来,也不会加载;而<img>``标签的图片不会渲染出来,但会加载。

原理

正如上面所说的,构建渲染树时,只会把可渲染元素产出到渲染树,这就意味有不可渲染元素,当匹配DOM树和样式规则树时,若发现一个元素的属性上有display:none,浏览器会认为该元素的子元素是不可渲染的,因此不会把该元素的子元素产出到渲染树上。

当解析渲染树时渲染树上没有设置了display:none属性元素的子元素,因此不会加载该元素中子元素的背景图片。

当绘制时也因为渲染树上没有设置了display:none属性元素的子元素,因此该元素中子元素的背景图片不会渲染出来。

Charles / Fiddler

幸好有Charles这样的工具(Windows下请使用Fiddler),Charles会在本地开启一个代理服务,默认接口8888。通过这个代理,模拟器上的请求会被转移到电脑上,我们可以任意地去替换请求文件让我们更加方便地调试页面。

本文由澳门新葡亰手机版发布于web前端,转载请注明出处:移动前端调试页面,Web图片资源的加载与渲染时

上一篇:腾讯微云黑色遮罩引导蒙版更好的CSS实现方式, 下一篇:这可能是史上最全的CSS自适应布局总结,移动前
猜你喜欢
热门排行
精彩图文