H5 Crash 测验结果

测量检验结果:

  • 因而 opacity、animation、positon 等办法制造层,即正是 1w
    个,页面也从未分明转换;然而利用 transform 创立 2k~5k
    个层,页面会卡顿几秒后立时闪退;
  • 内部存款和储蓄器是条红线,测验开掘,一回性消耗 20M
    的内存,会招致客商端即时闪退;
  • 并发央浼也是存在响应难题的,Fetch API 和 CSS Resource 并发 1k
    央求未有现身难题,可是 XH奥德赛 和 Script Resource
    央求,难点非常扎眼,固然并没有导致页面闪退,不过页面已经进来了假死状态。

上述临界值还足以承袭标准。

渲染难题

定下尺寸,大家就足以「渲染数据」了。

可是现实中,总有个别意外的坑。canvas 也不例外:

<canvas id=”canvas” width=”100″ heigth=”100″></canvas>
<script> var ctx = canvas.getContext(‘2d’); // 写入的数量 var
bytes = [100, 101, 102, 103]; var buf = new Uint8ClampedArray(bytes);
var img = new ImageData(buf, 1, 1); ctx.putImageData(img, 0, 0); //
读取的数据 img = ctx.getImageData(0, 0, 1, 1); console.log(img.data); //
chrome [99, 102, 102, 103] // firefox [101, 101, 103, 103] // …
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<canvas id="canvas" width="100" heigth="100"></canvas>
<script>
  var ctx = canvas.getContext(‘2d’);
 
  // 写入的数据
  var bytes = [100, 101, 102, 103];
 
  var buf = new Uint8ClampedArray(bytes);
  var img = new ImageData(buf, 1, 1);
  ctx.putImageData(img, 0, 0);
 
  // 读取的数据
  img = ctx.getImageData(0, 0, 1, 1);
  console.log(img.data);
  // chrome  [99,  102, 102, 103]
  // firefox [101, 101, 103, 103]
  // …
</script>

读取的像素,居然和写入的有偏差!并且区别的浏览器,偏差还不一样。

原本,浏览器为了抓实渲染品质,有一个 Premultiplied Alpha
的体制。不过,那会捐躯局地精度!

就算视觉上并不料定,但用于数据存款和储蓄,就有失水准了。

怎么着禁止使用它?一番品尝都没得逞。于是,只好从数量上镌刻了。

尽管不使用 Alpha 通道,又会怎么?

// 写入的数据 var bytes = [100, 101, 102, 255]; …
console.log(img.data); // [100, 101, 102, 255]

1
2
3
4
  // 写入的数据
  var bytes = [100, 101, 102, 255];
  …
  console.log(img.data);  // [100, 101, 102, 255]

那般,倒是避开了难题。

如上所述,只可以从数据上出手,跳过 Alpha 通道:

// pixel 1 new_bytes[0] = bytes[0] // R new_bytes[1] =
bytes[1] // G new_bytes[2] = bytes[2] // B new_bytes[3] = 255
// A // pixel 2 new_bytes[4] = bytes[3] // R new_bytes[5] =
bytes[4] // G new_bytes[6] = bytes[5] // B new_bytes[7] = 255
// A …

1
2
3
4
5
6
7
8
9
10
11
12
13
// pixel 1
new_bytes[0] = bytes[0]     // R
new_bytes[1] = bytes[1]     // G
new_bytes[2] = bytes[2]     // B
new_bytes[3] = 255          // A
 
// pixel 2
new_bytes[4] = bytes[3]     // R
new_bytes[5] = bytes[4]     // G
new_bytes[6] = bytes[5]     // B
new_bytes[7] = 255          // A
 

那会儿,就不受 Premultiplied Alpha 的震慑了。

是因为轻巧,也足以 1 像素存 1 字节:

// pixel 1 new_bytes[0] = bytes[0] new_bytes[1] = 255
new_bytes[2] = 255 new_bytes[3] = 255 // pixel 2 new_bytes[4] =
bytes[1] new_bytes[5] = 255 new_bytes[6] = 255 new_bytes[7] =
255 …

1
2
3
4
5
6
7
8
9
10
11
12
13
// pixel 1
new_bytes[0] = bytes[0]
new_bytes[1] = 255
new_bytes[2] = 255
new_bytes[3] = 255
 
// pixel 2
new_bytes[4] = bytes[1]
new_bytes[5] = 255
new_bytes[6] = 255
new_bytes[7] = 255
 

那般,整个图片最多唯有 256 色。假若能导出成「索引型
PNG」的话,也是足以品味的。

什么盘算前端开拓者面试

2015/04/06 · CSS,
HTML5,
JavaScript ·
面试

本文由 伯乐在线 –
cucr
翻译,黄利民
校稿。未经许可,禁止转发!
阿拉伯语出处:blog.jixee.me。迎接参预翻译组。

图片 1

职业面试很让人高烧。说真的。每种人都痛恨面试。纵然潜能的劳作机缘并不一定能获得,但那并不意味你在那上边会做的很倒霉。因而,这里给出了一些如何策动 前端开采者面试的本事。

率先料定一下,比很多面试因公司、公司层面、面试官以及你获取面试资格的水渠而各异。小编一度经历过这么的面试,在面试官坐下前,他分明并从未看过(只怕记得)笔者的简历内容。另一方面,笔者也经历过另外一些面试,面试官在面试前已经早期明白了有关自己的上上下下。因而,你对前面一个开采者面试计划,在骨子里面试前早先。

面试前,应该若是一上面试官将会深刻考查你。确认保障您的网络文章集和连锁的人脉圈互连网内容都以最新的。无论是个人网址、Behance、还是Dribbble,确定保证给人的第一映疑似好的。那或多或少居然足以在您踏向房间在此以前就会影响到面试官对你的意见。

世事多变,这种筹划而不是全盘的。将那个主题素材作为参谋,同有时候必将记得——放松。

图片 2

图形源于NBC《老友记》截屏

期望你的面试官有一点经验,不会用以下那样的难点开场。避防万一,照旧希图一些答案。

  • 为啥选拔技术员那么些专门的学业生涯?
  • 直至近些日子,你所从事的品种中最垂怜的是哪个?
  • 陈诉一下您期望中的研究开发项目。

别的一些面试官会问一些通用的手艺难点,来测量试验你的技术力量。有希望某人不知底那几个标题是什么样看头,而单单是在考察你的本事/竞争力。基于面试官的才本领量等第的不相同,你的答案也会迥然不一样。这一个难点总结易答,因而把那一个主题材料记下来。

  • 汇报一下创设三个新网页的进度
  • 什么样收缩页面加载时间?
  • 业内和规范体(standards and standards bodies)为啥主要?
  • 您使用什么二个经过来组织代码?
  • 您垂怜用什么工具来测量试验代码质量?

既然如此您从事前端职业,精通CSS会相当的重大。因而这里为您准备了一些大规模的CSS难题。那是体现你知识储备的第一同来。那些并非最深刻也许着重的标题,若是不能够答应出来,将对您很不利于。

  • CSS 中的 resetting 和 normalizing 之间的界别有何?
  • 怎么是floats,它是怎么着专业的?
  • absolute、relative、fixed 和 static 定位的区分是何等?
  • 释疑visiblity hidden和display none之间的界别
  • 您是哪些修复特定浏览器暗中认可样式的难点?
  • 你是否用过网格系统?目标是?
  • 若是总结CSS权重?
  • 表达怎么样优化CSS接纳器。
  • 缘何供给选拔预编译器?
  • 您是怎么着测验网址的跨浏览器包容性?

图片 3

图片来源Aftercollege.com

今昔大家最基本的职务完毕了。哪个人都能死记硬背这一个答案来应付以上难点。纵然是菜鸟前端开辟者也能好好地回应抢先二成主题素材。然则要是想实在让你的面试官印象浓厚并表明您的底蕴深厚,就把下边那些问题牢记在心。

  • 前端开垦最佳的框架是怎么样?
  • 响应式web app和原生应用程序的区分是怎样?
  • 原生app绝对web app的长处是什么?
  • 客商端和服务器端开荒的分别是什么样?
  • 怎么着是SASS和LESS?它们是怎么行事的?

面试官会越多关注你是哪些表明对那些难点的表明。他们会追问援救您的答案的职业案例。前边的主题素材你大概能够经过纪念而过关,你大概还大概会遇到这几个难点的扩展,但那么些答案的纵深,将令你独特。通过你到场过的莫过于项目,来展现你的思虑进度。

 图片 4

图表来源于《美利坚联邦合众国精神病者》的截屏

当面试(或当您在面试进度中)难点会变得越发切实。你在演说、援用实例、注明经验教训表现地越来越好,你更或许会从别的面试者中平地而起。在这一个点上,并不只是你的答案,而是答案的来头。你在原生app和响应式网址间做出决择的案由是何许?三种答案都以还行的,但通晓您的逻辑,会扶助面试官做出准确的调整并聘请你!

赞 6 收藏
评论

H5 Crash 研究

2016/05/31 · HTML5 ·
Crash

原稿出处:
小胡子哥(@Barret托塔天王)   

咱俩知晓,支撑页面在 webview 上出色运行的前提是装有三个快速况兼稳固的
webview
容器,而容器的迅猛牢固不止由容器提供方来保证,也必要容器使用者遵守一些基本法规,不然就有望出现页面
Crash
的图景,那些轨道是什么?什么样的上层代码会唤起容器万分退出?那是本文供给演说的剧情。

JavaScript

Flash 渐渐淘汰,但替代的 HTML5,却不曾提供压缩 API。只好和睦用 JS
达成。

这纵然实惠,但运营速度就慢多了,何况相应的 JS 也相当大。

倘使代码有 50kb,而数据压缩后只小 10kb,那就不足了。除非量大,才有含义。

至于小编:cucr

图片 5

今日头条和讯:@hop_ping
个人主页 ·
笔者的稿子 ·
17

图片 6

H5 Crash 难点大致

下图是 H5 Crash 的概况流程图:

图片 7

鉴于前端不可能捕捉到页面 Crash 的事态和储藏室,可是 H5
页面上爆发的荒谬会传送到 Java 和更底层的 Native
直到容器相当退出,在剥离的那一刻,容器会将仓库写入到日志中,当下一次开辟容器时(也或许是定期报告)就能够反映那几个货仓音讯。

其他

可不可以不要 JS,而是选用某些接口,直接完毕减弱?

事实上,在 HTML5 刚面世时,就留神到了多个功能:canvas 导出图片。能够生成
jpg、png 等格式。

假定在揣摩的话,相信您也想到了。没有错,正是 png —— 它是无损压缩的。

我们把一般数据当成像素点,画到 canvas 上,然后导出成
png,就是三个新鲜的削减包了~


上面伊始切磋。。。

小结

本文主假如对 H5 Crash
做了一个预备性商讨,测量检验恐怕存在许多相对误差,测量试验方法也亟需改正,但是沿着这个的笔触考究会相比较便于找到结论。

接轨会付给比较有含义的边际数据以及探测工具。

 

1 赞 3 收藏
评论

图片 6

最终效果

综合,大家简要演示下:Demo

找一个大块的文本测量检验。举个例子 qq.com 首页 HTML,有 637,101 字节。

先选拔「每像素 1 字节」的编码,种种浏览器生成的 PNG 大小:

Chrome FireFox Safari
体积 289,460 203,276 478,994
比率 45.4% 31.9% 75.2%

其中火狐压缩率最高,降低了 2/3 的体量。

调换的 PNG 看起来是如此的:

图片 9

而是可惜的是,全部浏览器生成的图样,都不是「256 色索引」的。


再测量检验「每像素 3 字节」,看看会不会有革新:

Chrome FireFox Safari
体积 297,239 202,785 384,183
比率 46.7% 31.8% 60.3%

Safari 有了数不清的腾飞,不过 Chrome 却更糟了。

FireFox 有多少的晋级,压缩率仍是参天的。

图片 10

一样可惜的是,即便全部图片并未接纳 Alpha 通道,但转换的 PNG 仍是 三十六位的。

还要,也爱莫能助设置压缩等第,使得这种压缩格局,效用并不高。

相比较之下 Flash 压缩,差别就多数了:

deflate 压缩 lzma 压缩
体积 133,660 108,015
比率 21.0% 17.0%

再者 Flash 生成的是通用格式,后端解码时,使用规范库就能够。

而 PNG 还得位图解码、像素管理等步骤,很费力。

所以,现实中依旧预先利用 Flash,本文只是开脑洞而已。

发表评论

电子邮件地址不会被公开。 必填项已用*标注