Blake Bowen OSUblake

Why imperative imports are slower than declarative imports

A lot of people misunderstood Top-level await is a footgun, including me. I thought the primary danger was that people would be able to put things like AJAX requests in their top-level await expressions, and that this was terrible because await strongly encourages sequential operations even though a lot of the asynchronous activity we're talking about should actually happen concurrently.

But that's not the worst of it. Imperative module loading is intrinsically bad for app startup performance, in ways that are quite subtle.

Consider an app like this:

// main.js

Stuff I wish I'd known sooner about service workers

I recently had several days of extremely frustrating experiences with service workers. Here are a few things I've since learned which would have made my life much easier but which isn't particularly obvious from most of the blog posts and videos I've seen.

I'll add to this list over time – suggested additions welcome in the comments or via twitter.com/rich_harris.

Use Canary for development instead of Chrome stable

~~Chrome 51 has some pretty wild behaviour related to console.log in service workers. Canary doesn't, and it has a load of really good service worker related stuff in devtools.~~

	// UPDATE: In 2023, you should probably stop using this! The narrow version of Safari that
	// does not support `nomodule` is probably not being used anywhere. The code below is left
	// for posterity.

	/**
	* Safari 10.1 supports modules, but does not support the `nomodule` attribute - it will
	* load <script nomodule> anyway. This snippet solve this problem, but only for script
	* tags that load external code, e.g.: <script nomodule src="nomodule.js"></script>
	*
	* Again: this will not prevent inline script, e.g.:

	// ３つのオブジェクト(前面からp1, p2, o)が選択されているとき、
	// p1の中心からp2の中心へ反時計回りに弧を描く。
	// o の中心を弧の中心とする。
	// ----------------------------------------------
	// 点
	// x, y : float
	var Point = function(x, y){
	this.x = x;
	this.y = y;
	}

	<!DOCTYPE html>
	<html>

	<head>
	<title>Sine Wave</title>
	<script type="text/javascript">
	function showAxes(ctx,axes) {
	var width = ctx.canvas.width;
	var height = ctx.canvas.height;
	var xMin = 0;

	{
	"name": "project-name",
	"description": "Template for static sites",
	"version": "1.0.0",
	"homepage": "http://www.project-name.com",
	"author": {
	"name": "Adam Reis",
	"url": "http://adam.reis.nz"
	},
	"license": "UNLICENSED",

	//@include "~/ailib/rhill-voronoi-core.js"

	// Adobe Illustrator script
	// 選択した各オブジェクトの中心の座標を元にボロノイ図を描画します。
	// 描画範囲は選択オブジェクト中で面積が最大のものを使用します。
	// （このため、外枠となるオブジェクトも選択範囲に含めてください。
	// 外枠はボロノイ計算の対象外です。）
	// 描画した線はグループ化されています。
	// 塗りのある面を描画しない場合は、スクリプト冒頭の
	// DRAW_POLYGONS を false にしてください。

	// initializing
	var renderer = PIXI.autoDetectRenderer(800, 600, { antialias: true, backgroundColor : 0xf7f7f7 });
	renderer.view.style.borderStyle = "solid";
	renderer.view.style.borderColor = "#bbbbbb";
	renderer.view.style.borderWidth = "1px";
	document.body.appendChild(renderer.view);

	// create the root of the scene graph
	var stage = new PIXI.Container();
	stage.interactive = true;

	class ViewZoom {

	project: paper.Project;
	factor = 1.25;

	private _minZoom: number;
	private _maxZoom: number;
	private mouseNativeStart: paper.Point;
	private viewCenterStart: paper.Point;