Pranab Mitra pranabmitra

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.

	import React from 'react';
	import { StyleSheet, Text, View, ScrollView, Button, Dimensions } from 'react-native';

	const { width, height } = Dimensions.get('window');

	let footerY;
	export default class App extends React.Component {
	render() {
	return (
	<View style={styles.container}>

	/* 5 Photos */
	<View style={{ width: width, height: width / 2}}>
	<View style = {{ flex: 1, flexDirection: 'row', height: '100%', width: '100%',paddingVertical: 20, paddingHorizontal: 20, borderRadius: 30}}>
	<View style={{ flex: 1, borderTopLeftRadius: 30, borderBottomLeftRadius: 30, overflow: 'hidden'}}>
	<Image
	style = {{ flex: 1, height: '100%', width: '100%', resizeMode: 'stretch' }}
	source={require('./assets/scenery-1.jpg')}
	/>
	</View>
	<View style={{ flex: 1, flexDirection: 'column', height: '100%', width: '100%'}}>

	const formattedRespose = (leg) => {
	let result = {},
	legInfo = leg \|\| response.routes[0].legs[0],
	basicInfo = {},
	resultantSteps = [],
	lastStep = {},
	nextPointInfo = {};

	basicInfo = {
	startAddress: legInfo.start_address,

	let { width, height } = Dimensions.get('window');
	const ASPECT_RATIO = width / height;
	const LATITUDE = 0;
	const LONGITUDE = 0;
	const LATITUDE_DELTA = 0.0922;
	const LONGITUDE_DELTA = LATITUDE_DELTA * ASPECT_RATIO;

	/* Component */
	constructor() {
	super();

	const repl = require('repl');
	repl.start({ prompt: '> ', eval: myEvalFunc, writer: outputFunc});

	function myEvalFunc(cmd, context, filename, callback) {
	callback(null, 'Hello!!');
	}

	function outputFunc(output) {
	return output;
	}

	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport"
	content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Canvas rendering</title>
	</head>
	<body>

	const server = require('net').createServer();
	let counter = 0,
	sockets = {};

	function getTimestamp() {
	const now = new Date();
	return `${now.getHours()}:${now.getMinutes()}`;
	}

	server.on('connection', socket => {