shikelong shikelong

DOM Performance

How the browser renders the document
- Receives the data (bytes) from the server.
- Parses and converts into tokens (<, TagName, Attribute, AttributeValue, >).
- Turns tokens into nodes.
- Turns nodes into the DOM tree.
Builds CSSOM tree from the css rules.

TLDR: Use for...of instead of forEach in asynchronous code.

Array.prototype.forEach is not designed for asynchronous code. (It was not suitable for promises, and it is not suitable for async-await.)

For example, the following forEach loop might not do what it appears to do:

难度：★

var data = [
  {
    name: "Jamestown",
    population: 2047,
    temperatures: [-34, 67, 101, 87]

},

	import cherrypy
	import jwt
	import urllib.parse, urllib.request
	import json

	SPSECRET = 'gpYucHkODHOv6JxZJ89Kihl9ncTiTrUCAbOaF1N6uJE='

	cherrypy.config.update({'server.socket_port': 3005,
	'server.ssl_module': 'builtin',
	'server.ssl_certificate': 'cert.pem',

	import * as React from 'react';
	import configureMockStore from 'redux-mock-store'
	import thunk from 'redux-thunk'
	import { shallow, mount, render } from 'enzyme';
	import {Home} from '../src/common/components/home/Home';
	import {AxiosApi} from 'some-package'

	import { Provider } from 'react-redux';

	import MockAdapter from 'axios-mock-adapter';

	<!DOCTYPE html> <!-- 使用 HTML5 doctype，不区分大小写 -->
	<html lang="zh-cmn-Hans"> <!-- 更加标准的 lang 属性写法 http://zhi.hu/XyIa -->
	<head>
	<!-- 声明文档使用的字符编码 -->
	<meta charset='utf-8'>
	<!-- 优先使用 IE 最新版本和 Chrome -->
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
	<!-- 页面描述 -->
	<meta name="description" content="不超过150个字符"/>
	<!-- 页面关键词 -->

	const {PNG} = require('bundle.js');
	const {Button, ImageView, ui} = require('tabris');
	const base64 = require('base-64');

	function _arrayBufferToBase64( buffer ) {
	var binary = '';
	var bytes = new Uint8Array( buffer );
	var len = bytes.byteLength;
	for (var i = 0; i < len; i++) {
	binary += String.fromCharCode( bytes[ i ] );