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
| /* | |
| * Let's see if I can do dns prefetching correctly | |
| */ | |
| add_action('wp_head', 'dns_prefetch'); | |
| function dns_prefetch() { | |
| echo '<link rel="dns-prefetch" href="//fonts.gstatic.com" />'; | |
| echo '<link rel="dns-prefetch" href="//google-analytics.com" />'; | |
| echo '<link rel="dns-prefetch" href="//google.com" />'; | |
| echo '<link rel="dns-prefetch" href="//stats.g.doubleclick.net" />'; |
| <div itemscope itemtype="http://schema.org/Product"> | |
| <span itemprop="name">Kenmore White 17" Microwave</span> | |
| <img src="kenmore-microwave-17in.jpg" alt='Kenmore 17" Microwave' /> | |
| <div itemprop="aggregateRating" | |
| itemscope itemtype="http://schema.org/AggregateRating"> | |
| Rated <span itemprop="ratingValue">3.5</span>/5 | |
| based on <span itemprop="reviewCount">11</span> customer reviews | |
| </div> | |
| <div itemprop="offers" itemscope itemtype="http://schema.org/Offer"> | |
| <!--price is 1000, a number, with locale-specific thousands separator |
| <?php | |
| /** | |
| * Echo an image, no matter what. | |
| * | |
| * @param string $size the image size you want to echo | |
| */ | |
| function wds_do_post_image( $size = 'thumbnail' ) { | |
| // If featured image is present, use that | |
| if ( has_post_thumbnail() ) { |
| // This is the page template file |
| <?php | |
| $url = urlencode( get_permalink() ); | |
| $img = urlencode( genesis_get_image( array( 'format' => 'url' ) ) ); | |
| $title = urlencode( get_the_title() ); | |
| echo '<a href="http://www.facebook.com/sharer/sharer.php?u=' . $url . '&t=' . $title .'" class="share-button facebook" target="_blank">Share on Facebook</a>'; | |
| echo '<a href="http://www.twitter.com/intent/tweet?url=' . $url . '&text=' . $title . '" class="share-button twitter" target="_blank">Tweet Me!</a>'; | |
| echo '<a href="http://pinterest.com/pin/create/button/?url=' . $url . '&media=' . $img . ' &description=' . $title . '" class="share-button pinterest" target="_blank">Pinterest</a>'; | |
| echo '<a href="http://plus.google.com/share?url=' . $url . '" class="share-button google" target="_blank">Google+</a>'; | |
| echo '<a href="http://www.linkedin.com/shareArticle?mini=true&url=' . $url . '" class="share-button linkedin" target="_blank">LinkedIn</a>'; | |
| echo '<a href="http://www.reddit.com/submit?url=' . $url . '" class="share-button reddit" target="_blank">LinkedIn</ |
| /* | |
| LayoutBreakpoints - Sync JS with your CSS media queries - yay! | |
| After painfully discovering that there is no hope for IE7 (and others) to read | |
| content properties with generated content, I resolved to this solution. | |
| If it doesn't work for you, you could easily change getElementsByTagName to | |
| getElementsById and pop an ID attribute onto an element of your choosing. | |
| See an example here: http://replete.github.io/FitTextNow/example.html (view-source) |
| # | |
| # CORS header support | |
| # | |
| # One way to use this is by placing it into a file called "cors_support" | |
| # under your Nginx configuration directory and placing the following | |
| # statement inside your **location** block(s): | |
| # | |
| # include cors_support; | |
| # | |
| # As of Nginx 1.7.5, add_header supports an "always" parameter which |
| var device = function () { | |
| return 'ontouchstart' in window ? 'touchstart' : 'click'; | |
| }; | |
| element.on(device(), myFunction); |
| // Just before switching jobs: | |
| // Add one of these. | |
| // Preferably into the same commit where you do a large merge. | |
| // | |
| // This started as a tweet with a joke of "C++ pro-tip: #define private public", | |
| // and then it quickly escalated into more and more evil suggestions. | |
| // I've tried to capture interesting suggestions here. | |
| // | |
| // Contributors: @r2d2rigo, @joeldevahl, @msinilo, @_Humus_, | |
| // @YuriyODonnell, @rygorous, @cmuratori, @mike_acton, @grumpygiant, |