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
| # Change YOUR_TOKEN to your prerender token | |
| # Change example.com (server_name) to your website url | |
| # Change /path/to/your/root to the correct value | |
| server { | |
| listen 80; | |
| server_name example.com; | |
| root /path/to/your/root; | |
| index index.html; |
| // for multiple requests | |
| let isRefreshing = false; | |
| let failedQueue = []; | |
| const processQueue = (error, token = null) => { | |
| failedQueue.forEach(prom => { | |
| if (error) { | |
| prom.reject(error); | |
| } else { | |
| prom.resolve(token); |
People
 :bowtie: |
😄 :smile: |
😆 :laughing: |
|---|---|---|
😊 :blush: |
😃 :smiley: |
:relaxed: |
😏 :smirk: |
😍 :heart_eyes: |
😘 :kissing_heart: |
😚 :kissing_closed_eyes: |
😳 :flushed: |
😌 :relieved: |
😆 :satisfied: |
😁 :grin: |
😉 :wink: |
😜 :stuck_out_tongue_winking_eye: |
😝 :stuck_out_tongue_closed_eyes: |
😀 :grinning: |
😗 :kissing: |
😙 :kissing_smiling_eyes: |
😛 :stuck_out_tongue: |
| # Version key/value should be on his own line | |
| PACKAGE_VERSION=$(cat package.json \ | |
| | grep version \ | |
| | head -1 \ | |
| | awk -F: '{ print $2 }' \ | |
| | sed 's/[",]//g') | |
| echo $PACKAGE_VERSION |
I recently had several days of extremely frustrating experiences with service workers. Here are a few things I've since learned which would have made my life much easier but which isn't particularly obvious from most of the blog posts and videos I've seen.
I'll add to this list over time – suggested additions welcome in the comments or via twitter.com/rich_harris.
Chrome 51 has some pretty wild behaviour related to console.log in service workers. Canary doesn't, and it has a load of really good service worker related stuff in devtools.
| const http2 = require('http2'); | |
| const fs = require('fs'); | |
| const path = require('path'); | |
| const zlib = require('zlib'); | |
| const brotli = require('brotli'); // npm package | |
| const PORT = 3032; | |
| const BROTLI_QUALITY = 11; // slow, but we're caching so who cares | |
| const STATIC_DIRECTORY = path.resolve(__dirname, '../dist/'); | |
| const cache = {}; |
| var mediaJSON = { "categories" : [ { "name" : "Movies", | |
| "videos" : [ | |
| { "description" : "Big Buck Bunny tells the story of a giant rabbit with a heart bigger than himself. When one sunny day three rodents rudely harass him, something snaps... and the rabbit ain't no bunny anymore! In the typical cartoon tradition he prepares the nasty rodents a comical revenge.\n\nLicensed under the Creative Commons Attribution license\nhttp://www.bigbuckbunny.org", | |
| "sources" : [ "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" ], | |
| "subtitle" : "By Blender Foundation", | |
| "thumb" : "images/BigBuckBunny.jpg", | |
| "title" : "Big Buck Bunny" | |
| }, | |
| { "description" : "The first Blender Open Movie from 2006", | |
| "sources" : [ "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4" ], |
| sudo: required #is required to use docker service in travis | |
| language: php #can be any language, just php for example | |
| services: | |
| - docker # required, but travis uses older version of docker :( | |
| install: | |
| - echo "install nothing!" # put your normal pre-testing installs here |