Sergey ufocoder

`<script> async, defer, async defer, module, nomodule, src, inline` - the cheat sheet

This document is a comparison of various ways the <script> tags in HTML are processed depending on the attributes set.

If you ever wondered when to use inline <script async type="module"> and when <script nomodule defer src="...">, you're in the good place!

Note that this article is about <script>s inserted in the HTML; the behavior of <script>s inserted at runtime is slightly different - see Deep dive into the murky waters of script loading by Jake Archibald (2013)

What forces layout / reflow

All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout. This is also called reflow or layout thrashing, and is common performance bottleneck.

Element

Box metrics

elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent
elem.clientLeft, elem.clientTop, elem.clientWidth, elem.clientHeight
elem.getClientRects(), elem.getBoundingClientRect()

	import { useLayoutEffect, useCallback, useState } from 'react'

	export const useRect = (ref) => {
	const [rect, setRect] = useState(getRect(ref ? ref.current : null))

	const handleResize = useCallback(() => {
	if (!ref.current) {
	return
	}

	'use strict';

	// HOOKS EXAMPLE START

	var counter = 0;
	var currentId = 0;

	var hooks = {
	init: [],
	before: [],

	export default scope => {
	// match the filter on autofilled elements in Firefox
	const mozFilterMatch = /^grayscale\(.+\) brightness\((1)?.*\) contrast\(.+\) invert\(.+\) sepia\(.+\) saturate\(.+\)$/

	scope.addEventListener('animationstart', onAnimationStart)
	scope.addEventListener('input', onInput)
	scope.addEventListener('transitionstart', onTransitionStart)

	function onAnimationStart(event) {
	// detect autofills in Chrome and Safari by:

	<!doctype html>
	<!-- This is just a very slightly modified tracking.js demo: https://trackingjs.com/examples/face_camera.html -->
	<html>
	<head>
	<meta charset="utf-8">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/tracking.js/1.1.3/tracking-min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/tracking.js/1.1.3/data/face-min.js"></script>
	<style>
	video, canvas {
	margin-left: 100px;

	module Idea where

	data Person = Person String (Maybe Gender)
	data Gender = Male \| Female \| Other String

	Person is like String :*: Maybe Gender
	Gender is like NoFields :+: NoFields :+: String

	data Pet = Dog String
	\| Cat Color String

	/**
	* Copyright (c) 2018, Tiernan Cridland
	*
	* Permission to use, copy, modify, and/or distribute this software for any purpose with or without fee is hereby
	* granted, provided that the above copyright notice and this permission notice appear in all copies.
	*
	* THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH REGARD TO THIS SOFTWARE INCLUDING ALL
	* IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
	* INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER
	* IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR

	Файл настройки: ~/.vimrc
	Можно редактировать файлы через сеть, например
	:e <scp\|ftp\|ftps>://user@host/path/to/the/file.txt
	:Ex или :e ./ - файловый менеджер

	== Основы ==
	hjkl перемещение в разные стороны
	i режим вставки
	I добавление в начало строки
	a режим добавления

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>JS Bin</title>
	</head>
	<body>
	<p>Enter your name:</p>
	<input ng-model="name">

Sergey ufocoder

<script> async, defer, async defer, module, nomodule, src, inline - the cheat sheet

What forces layout / reflow

Element

Box metrics

`<script> async, defer, async defer, module, nomodule, src, inline` - the cheat sheet