实践一下前端性能分析

下面通过Chrom的工具查看下：

再来看看ui.png这个请求的详细情况，可以参考下Google中的文档，不过需要翻一下才能看到。

Stalled：浏览器得到要发出这个请求的指令，到请求可以发出的等待时间，一般是代理协商、以及等待可复用的TCP连接释放的时间，不包括DNS查询、建立TCP连接等时间等。

Request sent：请求第一个字节发出前到最后一个字节发出后的时间，也就是上传时间。

Waiting（TTFB） ：请求发出后，到收到响应的第一个字节所花费的时间(Time To First Byte)。

Content Download：收到响应的第一个字节，到接受完最后一个字节的时间，新航道托福就是下载时间。

的确出现了延时下载，我将“script”标签去掉后，看到的确是并行下载的。

三、图像优化

平时就会做图像优化，例如制作Sprite图等。这里是介绍下压缩图片。

关于压缩的原理，涉及到些算法，可以上网查询下。

网友Jia在《图片原理与优化》说：

常见的格式中JPG、PNG、GIF亦属于位图，所以它们的数据结构大致相同，只是每一种图片格式都有不同的压缩算法，不同的扫描方式，但是优化的方法都有一个共同点，都是围绕着每个像素颜色值来下手。

1）工具

公司现在开发都用gulp构建工具，里面就有个插件“gulp-image”，用这个工具压png图片，能压掉很多，jpg就不多了。

关于构建工具可以参考《前端自动化构建工具gulp记录》

网上还提供很多在线工具，例如国外的tinypng，国内的tuhaokuai。

下图来自于tinypng网，国宝熊猫帮我压缩了54%的质量，不过这个网站我上了好久才上去。

2）webP

WebP，是一种支持有损压缩和无损压缩的图片文件格式，派生自图像编码格式 VP8。

根据 Google 的测试，无损压缩后的 WebP 比 PNG 文件少了 45％ 的文件大小，即使这些 PNG 文件经过其他压缩工具压缩之后，WebP 还是可以减少 28％ 的文件大小。

兼容性方面，Android兼容性较好，毕竟是自己的东西，不过IOS Safrai完全不支持，下图中显示中国的浏览器已经覆盖到了67.37%。

四、iframe

在多年前曾经写过一篇基础概念的iframe，叫《iframe的一些记录》。

一直能看到iframe的种种缺点，但是并没有通过数据表达出来，这次用数据说明一下。

1）阻塞onload事件

在“Iframes Blocking”这个页面中，通过iframe加载一个页面，这个页面要4秒后才加载完，直接导致的父页面也要4秒后才能加载成功。

2）脚本位于iframe之前

在“Script Before Iframe”这个页面中，script脚本标签写在了iframe之前。

图中红色框框中的就是iframe中的内容，的确被阻塞了。

后面又试验了一下将CSS放在iframe之前或之后，并不会被阻塞。

3）iframe中连接共享

在“Parent and Iframe Connections”这个页面中，父页面和iframe中的页面都包含了5张图片。

这五张图片并不是并行下载，而是有先后顺序的，红色方框中的图片来自于iframe。

五、CSS选择符

下面这些就是CSS选择符：

#toc { margin-left: 20px; }.chapter { font-weight: bold; }A { text-decoration: none; }H1 + #toc { margin-top: 40px; }#toc > LI { font-weight: bold; }#toc A { color: #444; }* { font-family: Arial; }[href="#index"] { font-style: italic; }[title~="Index"] { font-style: italic; }A:hover { text-decoration: underline; }

归纳下来有5种选择符，元素、关系、属性、伪类和伪对象选择符。

CSS选择符是从右向左匹配的，在MDN的《编写高效的 CSS》中介绍了几种高效CSS指南。

1）选择器测试结构

在“Selector Tests”页面中有6种写好的，页面中1000个那种结构。

1. Baseline设置了CSS类，但不会匹配

2. Tag就多了个A标签CSS设置

3. Class设置了A中的class属性

4. Child使用了关系选择符中的子选择符“>”

5. Descendant使用了关系选择符中的包含选择符

6. Universal使用了通配符

  

    
 
 0001 
 
    ...    
 
 1000 
 
  

2）耗时记录

 还有一个“create your own”自定义类：

还附赠了4个选择器：“A.class DIV”，“id > A”，“.class [href]”，“DIV:first-child”。