Daily Archives: 12.05.2015
Css: высота элемента в 100% — 100px
Да, calc-ом оно делается ровно так (100%-100px). Но его не все браузеры до сих пор умеют, так что вот ещё один способ:
|
1 2 3 4 |
<body> <div class="header"></div> <div class="main"></div> </body> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
body { width: 100%; height: 100%; margin: 0; padding: 0; } .header { width: 100%; height: 100px; background-color: blue; box-sizing: border-box; padding: 0; } .main { position: absolute; top: 100px; right: 0; bottom: 0; left: 0; background-color: red; } |
Логирование времени загрузки страниц в piwik
В продолжение темы логирования ошибок в пивик. Неплохо было бы логировать в ту же систему и время загрузки страницы у реальных пользователей. Для этого в упомянутый в предыдущей статье логгер нужно добавить следующее:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
function logTimings() { setTimeout(function () { if (! window.performance || ! window.performance.timing) { return; } var timing = window.performance.timing; var perf = { dns_lookup: getTime(timing, 'domainLookupStart', 'domainLookupEnd'), ttfb: getTime(timing, 'requestStart', 'responseStart'), response: getTime(timing, 'responseStart', 'responseEnd'), dom_parse_and_js: getTime(timing, 'domLoading', 'domInteractive'), dom_ready_cbs: getTime(timing, 'domContentLoadedEventStart', 'domContentLoadedEventEnd'), to_dom_ready: getTime(timing, 'responseStart', 'domContentLoadedEventEnd'), to_load: getTime(timing, 'responseStart', 'domComplete') }; perf.type = 'timings'; perf.msg = perf.to_dom_ready; perf.ua = navigator && navigator.userAgent; perf.href = window.location.href; logToPiwik(perf); }, 5000); } function getTime(timing, from, to) { if (timing[from] && timing[to]) { return (timing[to] - timing[from]) / 1000; } return null; } |
И поправить window.onload на:
|
1 2 3 4 5 6 7 8 |
window.onload = function() { if (! window.__angularLoaded) { window.logError({type: 'app-not-started'}); } logTimings(); }; |
Подробнее об объекте window.performance.timing можно почитать тут — https://blog.bullgare.com/2014/12/%D0%BC%D0%BE%D0%BD%D0%B8%D1%82%D0%BE%D1%80%D0%B8%D0%BD%D0%B3-%D0%B7%D0%B0%D0%B3%D1%80%D1%83%D0%B7%D0%BA%D0%B8-%D1%81%D1%82%D1%80%D0%B0%D0%BD%D0%B8%D1%86%D1%8B-%D1%81-navigation-timing-api/ или сразу на mdn https://developer.mozilla.org/en-US/docs/Web/API/PerformanceTiming.