mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-23 09:52:26 +01:00
0f8a9a5d49
The CSS is now served as an external file instead of being injected. This was done to improve performance. Ideally we would come to a middle ground between this and the former behaviour by injecting only the CSS that was required for the initial page load, then lazily loading the rest. However that change would be more complex. The hope was that making all CSS external would at least be a slight improvement. Performance metrics were collected before and after this change to determine whether this change actually helped. The metrics collected were the timing events provided by Chrome DevTools: * DOM Content Loaded (DCL) [1] * Load (L) [2] * First Paint (FP) [3] * First Contentful Paint (FCP) [3] * First Meaningful Paint (FMP) [3] Here are the results (units in milliseconds): Injected CSS: | Run | DCL | L | FP | FCP | FMP | | :--- | ---: | ---: | ---: | ---: | ---: | | 1 | 1569.45 | 1570.97 | 1700.36 | 1700.36 | 1700.36 | | 2 | 1517.37 | 1518.84 | 1630.98 | 1630.98 | 1630.98 | | 3 | 1603.71 | 1605.31 | 1712.56 | 1712.56 | 1712.56 | | 4 | 1522.15 | 1523.72 | 1629.3 | 1629.3 | 1629.3 | | **Min** | 1517.37 | 1518.84 | 1629.3 | 1629.3 | 1629.3 | | **Max** | 1603.71 | 1605.31 | 1712.56 | 1712.56 | 1712.56 | | **Mean** | 1553.17 | 1554.71 | 1668.3 | 1668.3 | 1668.3 | | **Std. dev.** | 33.41 | 33.43 | 38.16 | 38.16 | 38.16 | External CSS: | Run | DCL | L | FP | FCP | FMP | | :--- | ---: | ---: | ---: | ---: | ---: | | 1 | 1595.4 | 1598.91 | 284.97 | 1712.86 | 1712.86 | | 2 | 1537.55 | 1538.99 | 199.38 | 1633.5 | 1633.5 | | 3 | 1571.28 | 1572.74 | 268.65 | 1677.03 | 1677.03 | | 4 | 1510.98 | 1512.33 | 206.72 | 1607.03 | 1607.03 | | **Min** | 1510.98 | 1512.33 | 199.38 | 1607.03 | 1607.03 | | **Max** | 1595.4 | 1598.91 | 284.97 | 1712.86 | 1712.86 | | **Mean** | 1553.8025 | 1555.7425 | 239.93 | 1657.605 | 1657.605 | | **Std. dev.** | 29.5375 | 30.0825 | 36.88 | 37.34 | 37.34 | Unfortunately, using an external CSS file made no discernible improvement to the overall page load time. DCM and L were practically identical, and FCP and FMP were marginally better (well within error margins). However, the first paint time was _dramatically_ improved. This change seems worthwhile for the first paint time improvement alone. It also allows us to delete some code and remove a dependency. The old `css.js` module included two third-party CSS files as well, so those have been imported into the main Sass file. This was easier than bundling them in the gulpfile. The resulting CSS bundle needs to be served from the root because we're using a few `@include` rules that make this assumption. We could move this under `/css/` if desired, but we'd need to update each of these `@include` rules. Relates to #6646 [1]: https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded [2]: https://developer.mozilla.org/en-US/docs/Web/Events/load [3]: https://developers.google.com/web/fundamentals/performance/user-centric-performance-metrics
72 lines
2.3 KiB
JavaScript
72 lines
2.3 KiB
JavaScript
const startPopup = require('./popup-core')
|
|
const PortStream = require('extension-port-stream')
|
|
const { getEnvironmentType } = require('./lib/util')
|
|
const { ENVIRONMENT_TYPE_NOTIFICATION, ENVIRONMENT_TYPE_FULLSCREEN } = require('./lib/enums')
|
|
const extension = require('extensionizer')
|
|
const ExtensionPlatform = require('./platforms/extension')
|
|
const NotificationManager = require('./lib/notification-manager')
|
|
const notificationManager = new NotificationManager()
|
|
const setupSentry = require('./lib/setupSentry')
|
|
const log = require('loglevel')
|
|
|
|
start().catch(log.error)
|
|
|
|
async function start () {
|
|
|
|
// create platform global
|
|
global.platform = new ExtensionPlatform()
|
|
|
|
// setup sentry error reporting
|
|
const release = global.platform.getVersion()
|
|
setupSentry({ release, getState })
|
|
// provide app state to append to error logs
|
|
function getState () {
|
|
// get app state
|
|
const state = window.getCleanAppState()
|
|
// remove unnecessary data
|
|
delete state.localeMessages
|
|
delete state.metamask.recentBlocks
|
|
// return state to be added to request
|
|
return state
|
|
}
|
|
|
|
// identify window type (popup, notification)
|
|
const windowType = getEnvironmentType(window.location.href)
|
|
global.METAMASK_UI_TYPE = windowType
|
|
closePopupIfOpen(windowType)
|
|
|
|
// setup stream to background
|
|
const extensionPort = extension.runtime.connect({ name: windowType })
|
|
const connectionStream = new PortStream(extensionPort)
|
|
|
|
// start ui
|
|
const container = document.getElementById('app-content')
|
|
startPopup({ container, connectionStream }, (err, store) => {
|
|
if (err) return displayCriticalError(err)
|
|
|
|
const state = store.getState()
|
|
const { metamask: { completedOnboarding } = {} } = state
|
|
|
|
if (!completedOnboarding && windowType !== ENVIRONMENT_TYPE_FULLSCREEN) {
|
|
global.platform.openExtensionInBrowser()
|
|
return
|
|
}
|
|
})
|
|
|
|
|
|
function closePopupIfOpen (windowType) {
|
|
if (windowType !== ENVIRONMENT_TYPE_NOTIFICATION) {
|
|
// should close only chrome popup
|
|
notificationManager.closePopup()
|
|
}
|
|
}
|
|
|
|
function displayCriticalError (err) {
|
|
container.innerHTML = '<div class="critical-error">The MetaMask app failed to load: please open and close MetaMask again to restart.</div>'
|
|
container.style.height = '80px'
|
|
log.error(err.stack)
|
|
throw err
|
|
}
|
|
|
|
}
|