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
| var React = require('react/addons'); | |
| var ReactIgnore = { | |
| displayName: 'ReactIgnore', | |
| shouldComponentUpdate (){ | |
| return false; | |
| }, | |
| render (){ | |
| return React.Children.only(this.props.children); | |
| } |
На iOS устройствах числовые значения подчёркиваются синим. Эта проблема возникает из-за того, что iOS устройства по умолчанию считают все числа похожие на телефонные номера - телефонными номерами. Решается добавлением <meta name="format-detection" content="telephone=no" />
Тоже самое касается адреса: <meta name="format-detection" content="address=no" />
Пользователь может уменьшать и увеличивать приложение. Решается добавляением тега <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
Ссылки нажимаются с задержкой (примерно 300ms). Решается подпиской на событие touchstart и принудительной инициализацией события click после него. Если проблема всё равно возникает - ничего не поделать, надо облегчать dom. Как вариант - можно использовать библиотеку, посоветанную @adubovsky ниже в комментариях: https://gist.github.com/SerafimArts/de9900f99
| To enable window.gc() on Chrome browser console you just need to start Chrome like this: | |
| > /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --js-flags="--expose-gc" --enable-memory-info | |
| Those flags enable the following console API, very usefull to debug memory leaks: | |
| > console.memory // print memory information | |
| > window.gc() // force garbage collection |
| // Usage: | |
| // Put this in a separate file and load it as the first module | |
| // (See https://github.com/jrburke/requirejs/wiki/Internal-API:-onResourceLoad) | |
| // Methods available after page load: | |
| // rtree.map() | |
| // - Fills out every module's map property under rtree.tree. | |
| // - Print out rtree.tree in the console to see their map property. | |
| // rtree.toUml() | |
| // - Prints out a UML string that can be used to generate UML | |
| // - UML Website: http://yuml.me/diagram/scruffy/class/draw |
| (function($) { | |
| function parseImagesFromCSS(doc) { | |
| var i, j, | |
| rule, | |
| image, | |
| pattern = /url\((.*)\)/, | |
| properties = ['background-image', '-webkit-border-image'], | |
| images = {}; | |
| if (doc.styleSheets) { |
| <!doctype html> | |
| <!-- http://taylor.fausak.me/2015/01/27/ios-8-web-apps/ --> | |
| <html> | |
| <head> | |
| <title>iOS 8 web app</title> | |
| <!-- CONFIGURATION --> |
