让JavaScript在V8引擎上跑得更快的技巧

  1. 对象属性们的顺序尽可能保持一致
  2. 在构造函数(constructor)里使动态属性(dynamic properties),而不要在对象实例(instantiation )后才给对象手动添加属性
  3. 提高函数的可复用性,减少函数的量
  4. 避免使用稀疏数组(spare array,例如”let array = []; array[2] = 3;”,array[0]与array[1]的值都是undefined,array是一个稀疏数组)
  5. 避免使用超过31 bits大小的数值(十进制就是2147483648

via How JavaScript works: inside the V8 engine + 5 tips on how to write optimized code

WPO & PWA 技巧与工具

PWA (Progressive Web App) 是WPO (Web Performance Optimization) 的一个模式。PWA是最近(2017)前端的热点,它能比较明显地促进销售额或转化率。


技巧

一、下载速度慢

  1. 渐进式下载 / (不影响用户体验的)预加载
    • 使用加载页面(loader)。归根到底,我们要提升的是体验,不是速度
    • 下载第一页的资源先,其他资源按需下载(On Demand Download)
    • 注意,不要在用户没同意的情况下烧别人的流量
    • 使用<link rel=”dns-prefetch” href=”https://www.foo.bar”>(预查DNS)
    • 使用<link rel=”prefetch” href=”https://www.foo.bar”>(只下html)
    • 使用<link rel=”prerender” href=”https://www.foo.bar”>(下html并无头地渲染网页)
    • 懒惰式的预加载(Lazy Load)资源
      • Multistage Download(根据网页的状态触发lazy loads)
      • First Scroll Download(页面首次被滚动式开始lazy load)
  2. 压缩数据
    • 尽量将单文件大小保持在14 Kb以下(超过14 Kb),以减少HTTP包的数量
    • 丑化(uglify)以及minify:JavaScript跟CSS还有HTML
    • 用zopfli算法压缩所有用于生产的图片(推荐使用advpng),很多网站都没有这样做,比如多数政府网站
    • gzip所有能gzip的数据。brotli可能是未来
  3. 减少请求
    • CSS/JS文件打包(bundle)
    • CSS:document.onload之前,只下载critical的CSS,并将它放到<head>里面
    • CSS:限定总文件大小;排查没用的class跟id;内联(inline)化;用速记(short hand)写法;用雪碧图(sprites);不要使用@import,不得以请用<link>
    • 尽可能缓存已下载的数据
    • (适量的固定)图像(img & svg etc.)内联化(data:[<mediatype>][;base64],<data>
    • 后端配置Etag(验证缓存)
  4. 优化网络
    • 使用HTTP2
    • 用CDN,尤其是三方JavaScript库,用户本地可能就有缓存
    • 三方智能图库,如WURFL
  5. 减少不必要的流量
    • 避免301等的跳转,零容忍404
    • 用没有cookies的子域名来存放不需要cookies的数据,比如图片,以减少不必要的cookies流量
    • 避免不必要的DNS查询
    • 避免跳转,比如aa.com >> mobile.aa.com/homepage/
    • 零容忍“<img src=””>”以及“var img = new Image(); img.src = “”;”,他们会触发无用的请求
    • 后端:Enable Keep Alive
  6. 优化代码
    1. 精简DOM元素的数量

二、渲染效果差

  1. 通过淡入与延迟,防止网页样式跳变
    <head>
    ...
    <style>
        body{
            opacity:0; 
            transition: opacity 600ms ease-in-out 80ms;
            /* 上面给了80毫秒的延迟,请斟酌! */
            animation: js-download-timeout 0s 8s 1 normal forwards;
        }
        @keyframes js-download-timeout {
            from{opacity:0;}
            to  {opacity:1;}
        }
    </style>
    <noscript>
        <style>
            body{opacity: 1;}
        </style>
    </noscript>
    ...
    </head>
    <body>
        ...
        <div id="place-holder-for-ad">
        </div>
        ...
    </body>
  2. 60 fps动画(16毫秒左右一帧)
  3. 精简操作元素的次数,建议用Shadow DOM,或者用Vue.js等利用Shadow DOM的库
  4. (如果下载速度够快),将CSS在<head>里尽可能靠前
  5. 将JavaScript放到</body>后,先跑CSS,再跑JS
  6. 用<link>不要用@import,这样有利于渐进式渲染
  7. 广告放iframe里面,以:1)防止广告的CSS与页面CSS冲突;2)防止样式的重新计算,降低CPU的负荷。iframe的src通过JavaScript来分派,减少window.onload类事件触发前的耗时。
  8. 不在CSS内使用JS / CSS表达式(比如,”background-color: expression( (new Date()).getHours()%2 ? “#B8D4FF” : “#F08A00” );”,这种东西也很少见了)
  9. 如果资源不够,避免使用CSS滤镜(filter)
  10. 跟网页设计师们商量一下Shadow等耗计算资源的效果可不可以取消掉
  11. 用<img>或base64编码,不用CSS background,因为background-image在结构加载完成后才开始加载

三、网页响应慢

  1. CSS动画尽量用Transform与Opacity,尽量避免width与height的动画
    因为GPU可以用很少的资源来计算Transform与Opacity,而width跟height的动画是需要CPU做的,总体效果不好。
  2. iOS的部分触屏情景系统响应延迟300毫秒(iOS 9.2已无此问题)
  3. 有比较复杂的运算时,用Worker
    1. 大app,不妨用gpu.js,或关注WebAssembly
  4. 不要使用window.onload,用:
    document.addEventListener("DOMContentLoaded", function() { // code... });
  5. 判定、计算并优化“Time to First Meaningful Interaction”
  6. 加载时间保持在1s之内
  7. 添加<meta>规则,去掉一般作用不大但是浏览器默认开启的功能
    <!-- disable iPhone number detection on iOS-->
    <meta content="telephone=no" name="format-detection"/>
    <!-- disable email detection on Android -->
    <meta content="email=no" name="format-detection" />

 

via Chen Shay: You don’t need AMP for that | JSConf EU 2017 et al.


工具

一、资源消费情况监测

  1. WebPagetest
  2. Pingdom Web Speed Test || Mobile Friendly Test
  3. Chrome Dev Tools > Network ( > Capture Screenshot)
  4. Charles || Fiddler

    二、优化建议

  5. Google PageSpeed Insights

杂志推荐:《Webuser》与《Web Designer》

英国人做的网页,跟他们做的电视剧有点像,很少有粗造滥制的东西。可惜也没有Google.com量级的网站(我也没见过《Game of Thrones》量级的英剧)。

在我做前端之前,我有幸成为地球上非主流的互联网用户。从13年开始,我开始追《Webuser》,一本给互联网用户的杂志。4年来,我一期没落。

《Webuser》两周一期,讲的事情都很实在,比如:
1,实用而且往往是免费的软件。他们推荐的软件跟小众软件,还有少数派这些国内网站不是一个圈子的,所以,你会在这里看到他们没有推荐的东西。
2,在互联网的大风向(勒索软件网络中立性等)下,个人用户的应对策略。

在我决定做前端后,我认识了《Web Designer》,杂志一年13期。杂志会给你推荐一些新库,这个我尤其喜欢。另外,不看杂志,一般还真的是很难知道前端高手有谁谁谁。知道他们的名字,搜索他们的博客就很简单了。

网上有一些人无视版权,请大家好好地监督他们:《Webuser》,《Web Designer》。

好用的SVG替補(fallback)

SVG格式的主要优势有:
1)可复用的完美像素;
2)比起一般网络图片格式,SVG格式占空间更小。值得一提的是,CSS的gradient也能做很多东西,Bennett Feely在他的博客上有很棒的演示
主要缺点有:
1)浏览器支持不足。

好用的SVG替补方法有:

  • <img>法:
<img 
    src="image.svg" 
    onerror="this.src='image.png'; this.onerror=null;">
  • <object>法:
<object 
    type="image/svg+xml" 
    data="svg-ok.svg">
    <img 
        src="svg-no.png" 
        alt="No SVG support">
</object>
  • CSS法:
body{ 
    background: url(fallback.png); 
    background: url(background.svg)
    , linear-gradient(transparent, transparent);
}
  • JavaScript法:
  1. SVGeezy
  2. SVGInjector
  3. Grunticon

是的,我的意思是,用Grunticon就好了。

另外,我们也应该给读屏器(screen reader)们备注一下:

<svg xmlns="http://www.w3.org/2000/svg" aria-labelledby="title">
    <title>The content here will be read by a screen reader if any</title>
    <circle cx="100" cy="100" r="50"/>
</svg>

ref 

  1. CSS-Tricks
  2. Creating Web Icons with SVG by  MOR10

纯CSS可以做,就给CSS做吧

因为:
1)性能优势:
一般情况下,CSS的性能比JS(JavaScript,下同)好很多(除非,比如,你去动画化box-shadow做出来的像素游戏,等)。当然,WebAssembly普及了,可能情况会不一样
2)可作替补:
CSS可以在JS无法正常运行(下载不了,有bug,JS被禁用等)的情况下照常工作

GitHub用户oskargustafsson有一个叫nojs的项目,大家不妨到他的展示页面看看。
我为了练手,在codepen上写了这个“纯CSS可以做,就给CSS做吧”系列。

需要注意的是,CSS会在JS没有正常运行的情况下还是会响应用户的操作。比如用户可能看到一个按钮被(CSS)按下去了,但是(通过JS实现的)功能却没有实验。
所以,有些功能的实现要不要让CSS做,请各位跟上级商量。

nvm-windows,Windows系统也能随心切换Node.js版本

需求来源:
Node.js官方没有nvm,换句话说,一台电脑只能装一个版本的Node,但是:
1)有的Node.js Package(Node.js包)需要非LTS(Long Term Support,即稳定版)版本的Node.js的支持,比如yun-playlist-downloader(网易云音乐 – 歌单 – 下载器);
2)不同的项目,往往也要求使用指定版本的Node.js;
3)Python都有installer,Node.js怎么可以没有呢!

解决方案:
开源软件nvm-windows(Node Version Manager (nvm) for Windows),能让你便捷地切换你Windows电脑上的Node.js的版本。
注意:软件运行需要管理员权限。

快速入门:

  1. 这里下载nvm-setup.zip
  2. 解压nvm-setup.zip,安装“nvm-setup.exe”
  3. 寻求帮助:
    $ nvm
  4. 安装不同版本的Node.js,比如:
    $ nvm install 6.11.2
    $ nvm install 8.4.0
  5. 切换不同版本的Node.js,比如:
    $ nvm use 6.11.2
    $ node -v

借助App “Remote Keyboard”通过电脑键盘控制安卓手机输入

  1. 请把你的安卓手机跟电脑连接到同一个Wi-Fi下
  2. 安卓手机,请安装“Remote Keyboard (by Onyxbits)”,打开App,并记住上面提及的安卓手机在你局域网下的IP,这个IP一般以“192.168.”开头,下文称之为“<安卓IP>”
  3. Windows电脑,请确保这个功能已打开:“Turn Windows features on or off > Telnet Client”
  4. Windows电脑,打开CMD (Command Prompt),运行以下指令就可以了:
    telnet <安卓IP> 2323
    直接连上了?你还是赶紧设置一个密码:“Remote Keyboard > Settings > Password Protection”。
    如果你设置了密码的话,手机会跟你要密码。命令行软件有个习惯,出于安全的考虑,不显示你输入的密码的长度。请输入密码后按回车就可以了。

如何在Windows的CMD里面通过“subl”来使用Sublime Text 3

Github的Atom允许你在安装了它之后,就可以直接在命令行里通过“atom .”来打开当前文件夹。Sublime Text 3怎么才可以也这样呢?

答案:修改系统环境变量。举例,Windows 10:

1.  哪里设置?
按下<Win>键,输入“system env”,点选“edit system environment variables”
点“Environment Variables…”,在“User variable for [yourUserName]”下的Variable一栏找到“PATH”或者“Path”这个变量,双击它或者点击“Edit”按钮。

2. 怎么设置
请点击“New”,然后添加你Sublime Text 3所在的路径。比如安装版默认的“C:\Program Files\Sublime Text 3”。
这样过后,你当前的用户就可以在命令行(比如Command Prompt或者PowerShell)工具里,无论你当前文件夹是哪个,都可以直接调用Sublime Text 3安装文件夹下的“subl.exe”这个程序了。
一般大家习惯在“environment variable”的最后一行留给当前文件夹,也就是“.”,建议你也这样做。

3. 试一试
用Sublime编辑当前文件夹:“subl .”
获取帮助:“subl –help”或者“subl -h”

🙂