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.
elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent| import { Component } from 'react' | |
| import 'react-dom' | |
| import throttle from 'lodash/throttle' | |
| const PI_2 = Math.PI * 2 | |
| const X_CNT = 30, Y_CNT = 30, SCALE = 200 | |
| // source: three.js official demo | |
| // modified by shu |
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Canvas</title> | |
| <style> | |
| body { font-size: 0 } | |
| canvas { | |
| display: none; | |
| } |
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Canvas</title> | |
| <style> | |
| canvas { | |
| display: none; | |
| } | |
| #image { |
| import React from 'react' | |
| class ContainerComponent extends React.Component { | |
| constructor(props) { | |
| super(props) | |
| this.state = { | |
| loaded: false | |
| } | |
| } |
| var i = 0; | |
| var iteration = function () { | |
| cloudfront.getInvalidation({ | |
| DistributionId: dist, | |
| Id: invalidationId | |
| }, function (err, res) { | |
| if (err) {return callback(err);} | |
| if (res.Invalidation.Status === "Completed") { | |
| return callback(); |
| #!/bin/bash | |
| AWS_ACCESS_KEY_ID=my_key \ | |
| AWS_SECRET_ACCESS_KEY=my_secret \ | |
| AWS_DEFAULT_REGION=us-west-2 \ | |
| S3_BUCKET=my_bucket \ | |
| MYSQL_HOST=host \ | |
| MYSQL_PORT=port \ | |
| MYSQL_USER=myuser \ | |
| MYSQL_PASS=pass \ | |
| MYSQL_DB=db \ |
| #!/bin/bash | |
| cd /tmp | |
| file=$(date +%a).sql | |
| mysqldump \ | |
| --host ${MYSQL_HOST} \ | |
| --port ${MYSQL_PORT} \ | |
| -u ${MYSQL_USER} \ | |
| --password="${MYSQL_PASS}" \ | |
| ${MYSQL_DB} > ${file} | |
| if [ "${?}" -eq 0 ]; then |
| def factorial(number: Int) : Int = { | |
| def factorialWithAccumulator(accumulator: Int, number: Int) : Int = { | |
| if (number == 1) | |
| return accumulator | |
| else | |
| factorialWithAccumulator(accumulator * number, number - 1) | |
| } | |
| factorialWithAccumulator(1, number) | |
| } | |
| println(factorial(5)) |
| class FunctorObject { | |
| constructor (obj) { | |
| this.value = obj; | |
| } | |
| map (func) { | |
| const obj = {}; | |
| for (const key of Object.keys(this.value)) { | |
| obj[key] = func(this.value[key]); | |
| } |