Denis Savenok designeng

## hidden-classes-in-js-and-inline-caching.md

      
              1 file
            
          
              0 forks
            
          
              0 comments
            
          
              0 stars
            
          
                designeng
                / hidden-classes-in-js-and-inline-caching.md
            
            
              Created
              February 22, 2020 19:52
                — forked from twokul/hidden-classes-in-js-and-inline-caching.md
            
              
                Hidden classes in JavaScript and Inline Caching
              
          
    Hidden classes in JavaScript and Inline Caching

Knowing how internals work is always a good. Pretty much for everything. Cars, trains, computers, you name it. It gives you an insight on what happens under the hood. You also act/react differently based on this knowledge.
As you might have guessed, it’s also true for web development. Knowledge of CSS transitions allows you to achieve better performance and not to use JavaScript in most cases. Knowledge of V8 internals allows you to write more performant JavaScript code. So let’s talk about V8 a little.
A little about V8

V8 is a JavaScript engine built by Google. Firefox built SpiderMonkey, Opera built Carakan and Microsoft built Chakra. One very important difference between V8 and other JavaScript engines is that V8 doesn’t generate any intermediate code. It compiles JavaScr

  
## Gulpfile.js
// NOTE: I previously suggested doing this through Grunt, but had plenty of problems with
// my set up. Grunt did some weird things with scope, and I ended up using nodemon. This
// setup is now using Gulp. It works exactly how I expect it to and is WAY more concise.
var gulp = require('gulp'),
    spawn = require('child_process').spawn,
    node;

/**
 * $ gulp server
 * description: launch the server. If there's a server already running, kill it.

## gist:b6610ff59ce36cef9dd919f416c73348
window.onload = function() {

    var v0 = new Vertex("0");
    var v1 = new Vertex("1");
    var v2 = new Vertex("2");
    var v3 = new Vertex("3");
    var v4 = new Vertex("4");
    var v5 = new Vertex("5");
    var v6 = new Vertex("6");
    var v7 = new Vertex("7");

## gist:feb653aad8442d3969e34fd929766c87
window.onload = function() {

    var v0 = new Vertex("0");
    var v1 = new Vertex("1");
    var v2 = new Vertex("2");
    var v3 = new Vertex("3");
    var v4 = new Vertex("4");
    var v5 = new Vertex("5");
    var v6 = new Vertex("6");
    var v7 = new Vertex("7");

## resize.js
// modules
var lwip = require('lwip'),
    path = require('path'),
      fs = require('fs'),
 rstream = require('stream').Readable;

// config
var placesPath = '/Users/apx/Downloads/places';

// helper

## removeSitemapFiles.js
import chalk from 'chalk';
import prompt from 'prompt';
import when from 'when';
let Promise = when.promise;

import wire from 'essential-wire';
import wireDebugPlugin from 'essential-wire/source/debug';
import connectToDatabase from '../plugins/connectToDatabase';

import { sitemapDbUrl } from '../../config/database/urls';

## Virtual DOM vs Handlebars
<!DOCTYPE html>
<html>
  <head>
    <title></title>
  </head>
  <body>
    <div id="output_h"></div>
    <div id="output_v"></div>
    <script src="virtual-dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.min.js"></script>

## html5-dataset.js
/**
 * Add dataset support to elements
 * No globals, no overriding prototype with non-standard methods,
 *   handles CamelCase properly, attempts to use standard
 *   Object.defineProperty() (and Function bind()) methods,
 *   falls back to native implementation when existing
 * Inspired by http://code.eligrey.com/html5/dataset/
 *   (via https://github.com/adalgiso/html5-dataset/blob/master/html5-dataset.js )
 * Depends on Function.bind and Object.defineProperty/Object.getOwnPropertyDescriptor (polyfills below)
 * All code below is Licensed under the X11/MIT License

## template.js
    /**
     * Map object keys in string to its values
     *
     * @param {String} text
     * @param {Object} data
     * @return {String}
     */
    template: function (text, data) {
        return !text ? '' : text.replace(/\{([^\}]+)\}/g, function (value, key) {
            return key in data ? data[key] : value;

## function.ast.json
"type": "Program",
    "body": [
        {
            "type": "FunctionDeclaration",
            "id": {
                "type": "Identifier",
                "name": "f"
            },
            "params": [
                {
	// NOTE: I previously suggested doing this through Grunt, but had plenty of problems with
	// my set up. Grunt did some weird things with scope, and I ended up using nodemon. This
	// setup is now using Gulp. It works exactly how I expect it to and is WAY more concise.
	var gulp = require('gulp'),
	spawn = require('child_process').spawn,
	node;

	/**
	* $ gulp server
	* description: launch the server. If there's a server already running, kill it.
	window.onload = function() {

	var v0 = new Vertex("0");
	var v1 = new Vertex("1");
	var v2 = new Vertex("2");
	var v3 = new Vertex("3");
	var v4 = new Vertex("4");
	var v5 = new Vertex("5");
	var v6 = new Vertex("6");
	var v7 = new Vertex("7");
	// modules
	var lwip = require('lwip'),
	path = require('path'),
	fs = require('fs'),
	rstream = require('stream').Readable;

	// config
	var placesPath = '/Users/apx/Downloads/places';

	// helper
	import chalk from 'chalk';
	import prompt from 'prompt';
	import when from 'when';
	let Promise = when.promise;

	import wire from 'essential-wire';
	import wireDebugPlugin from 'essential-wire/source/debug';
	import connectToDatabase from '../plugins/connectToDatabase';

	import { sitemapDbUrl } from '../../config/database/urls';
	<!DOCTYPE html>
	<html>
	<head>
	<title></title>
	</head>
	<body>
	<div id="output_h"></div>
	<div id="output_v"></div>
	<script src="virtual-dom.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.min.js"></script>
	/**
	* Add dataset support to elements
	* No globals, no overriding prototype with non-standard methods,
	* handles CamelCase properly, attempts to use standard
	* Object.defineProperty() (and Function bind()) methods,
	* falls back to native implementation when existing
	* Inspired by http://code.eligrey.com/html5/dataset/
	* (via https://github.com/adalgiso/html5-dataset/blob/master/html5-dataset.js )
	* Depends on Function.bind and Object.defineProperty/Object.getOwnPropertyDescriptor (polyfills below)
	* All code below is Licensed under the X11/MIT License
	/**
	* Map object keys in string to its values
	*
	* @param {String} text
	* @param {Object} data
	* @return {String}
	*/
	template: function (text, data) {
	return !text ? '' : text.replace(/\{([^\}]+)\}/g, function (value, key) {
	return key in data ? data[key] : value;
	"type": "Program",
	"body": [
	{
	"type": "FunctionDeclaration",
	"id": {
	"type": "Identifier",
	"name": "f"
	},
	"params": [
	{