Max D plugn

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.

Generally, all APIs that synchronously provide layout metrics will trigger forced reflow / layout. Read on for additional cases and details.

Element APIs

Getting box metrics

elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent

https://developer.microsoft.com/en-us/microsoft-edge/tools/vms/

Gist Search Cheatsheet

Enter this in the search box along with your search terms:

Get all gists from the user santisbon.
user:orenbochman

Find all gists with a .yml extension.
extension:yml

	var through = require('through2').obj;

	/**
	* tools
	*/
	function dumpVFS (stream) {
	return stream.pipe(through(function(file, encoding, done) {
	console.log(' * ', file.path); //, file.inspect(), file.contents.toString());
	done(null, file);
	}));

	window.getAllEventListeners = () => {
	return Array.from(document.querySelectorAll('*')).map(element => {
	const listeners = getEventListeners(element);

	return {
	element: element,
	listeners: Object.keys(listeners).map(key => {

	return {
	event: key,

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>JS Bin</title>
	<style id="jsbin-css">
	.clearfix::after {
	display: table;
	content: "";

	function realMetrics () {

	var bbox3 = {
	lat: 64.68632,
	lng: 97.74531,
	nw_lat: 81.413933,
	nw_lng: -25.3125,
	se_lat: 22.43134,
	se_lng: 220.429688
	};

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>JS Bin</title>
	<script src="https://code.jquery.com/jquery-3.1.0.js"></script>

	<script src="http://cdn.jsdelivr.net/npm/[email protected]/lodash.min.js"></script>

	<template>
	<div class="ui icon input">
	<input
	:placeholder="placeholder"
	:value="value"
	@input="onInput"
	@blur="onBlur"
	ref="input"
	/><i
	class="icon" :class="value ? 'close link' : icon"