m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-11-22 09:57:02 +01:00
Code

Serve CSS as an external file (#6894)

Browse Source 
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
This commit is contained in:
Mark Stacey 2019-07-23 14:10:13 -03:00 committed by GitHub
parent 437132bf25
commit 0f8a9a5d49
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 11 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
app/home.html
View File

@ -4,6 +4,7 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1 user-scalable=no"> <meta name="viewport" content="width=device-width, initial-scale=1 user-scalable=no">
<title>MetaMask</title> <title>MetaMask</title>
<link rel="stylesheet" type="text/css" href="./index.css">
</head> </head>
<body> <body>
<div id="app-content"></div> <div id="app-content"></div>

1
app/notification.html
View File

@ -28,6 +28,7 @@
margin-top: 1rem; margin-top: 1rem;
} }
</style> </style>
<link rel="stylesheet" type="text/css" href="./index.css">
</head> </head>
<body class="notification" style="height:600px;"> <body class="notification" style="height:600px;">
<div id="app-content"> <div id="app-content">

1
app/popup.html
View File

@ -4,6 +4,7 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1 user-scalable=no"> <meta name="viewport" content="width=device-width, initial-scale=1 user-scalable=no">
<title>MetaMask</title> <title>MetaMask</title>
<link rel="stylesheet" type="text/css" href="./index.css">
</head> </head>
<body style="width:357px; height:600px;"> <body style="width:357px; height:600px;">
<div id="app-content"></div> <div id="app-content"></div>

4
app/scripts/ui.js
View File

@ -1,5 +1,3 @@
const injectCss = require('inject-css')
const NewMetaMaskUiCss = require('../../ui/css')
const startPopup = require('./popup-core') const startPopup = require('./popup-core')
const PortStream = require('extension-port-stream') const PortStream = require('extension-port-stream')
const { getEnvironmentType } = require('./lib/util') const { getEnvironmentType } = require('./lib/util')
@ -53,8 +51,6 @@ async function start () {
global.platform.openExtensionInBrowser() global.platform.openExtensionInBrowser()
return return
} }
injectCss(NewMetaMaskUiCss())
}) })

10
development/mock-dev.js
View File

@ -56,13 +56,6 @@ function updateQueryParams (newView) {
} }
} }
//
// CSS
//
const MetaMaskUiCss = require('../ui/css')
const injectCss = require('inject-css')
// //
// MetaMask Controller // MetaMask Controller
// //
@ -99,9 +92,6 @@ function modifyBackgroundConnection (backgroundConnectionModifier) {
actions._setBackgroundConnection(modifiedBackgroundConnection) actions._setBackgroundConnection(modifiedBackgroundConnection)
} }
var css = MetaMaskUiCss()
injectCss(css)
// parse opts // parse opts
var store = configureStore(firstState) var store = configureStore(firstState)

4
gulpfile.js
View File

@ -85,6 +85,10 @@ createCopyTasks('vendor', {
source: './app/vendor/', source: './app/vendor/',
destinations: commonPlatforms.map(platform => `./dist/${platform}/vendor`), destinations: commonPlatforms.map(platform => `./dist/${platform}/vendor`),
}) })
createCopyTasks('css', {
source: './ui/app/css/output/',
destinations: commonPlatforms.map(platform => `./dist/${platform}`),
})
createCopyTasks('reload', { createCopyTasks('reload', {
devOnly: true, devOnly: true,
source: './app/scripts/', source: './app/scripts/',

5
package-lock.json
View File

@ -37003,11 +37003,6 @@
"integrity": "sha512-RZY5huIKCMRWDUqZlEi72f/lmXKMvuszcMBduliQ3nnWbx9X/ZBQO7DijMEYS9EhHBb2qacRUMtC7svLwe0lcw==", "integrity": "sha512-RZY5huIKCMRWDUqZlEi72f/lmXKMvuszcMBduliQ3nnWbx9X/ZBQO7DijMEYS9EhHBb2qacRUMtC7svLwe0lcw==",
"dev": true "dev": true
}, },
"inject-css": {
"version": "0.1.1",
"resolved": "https://registry.npmjs.org/inject-css/-/inject-css-0.1.1.tgz",
"integrity": "sha1-7z/8eOwCbJbiNV2g3zKRfjUmQVw="
},
"inline-style-prefixer": { "inline-style-prefixer": {
"version": "3.0.8", "version": "3.0.8",
"resolved": "https://registry.npmjs.org/inline-style-prefixer/-/inline-style-prefixer-3.0.8.tgz", "resolved": "https://registry.npmjs.org/inline-style-prefixer/-/inline-style-prefixer-3.0.8.tgz",

1
package.json
View File

@ -103,7 +103,6 @@
"fuse.js": "^3.2.0", "fuse.js": "^3.2.0",
"gaba": "^1.4.1", "gaba": "^1.4.1",
"human-standard-token-abi": "^2.0.0", "human-standard-token-abi": "^2.0.0",
"inject-css": "^0.1.1",
"jazzicon": "^1.2.0", "jazzicon": "^1.2.0",
"json-rpc-engine": "^4.0.0", "json-rpc-engine": "^4.0.0",
"json-rpc-middleware-stream": "^2.1.1", "json-rpc-middleware-stream": "^2.1.1",

4
ui/app/css/index.scss
View File

@ -16,3 +16,7 @@
@import './itcss/components/index.scss'; @import './itcss/components/index.scss';
@import './itcss/trumps/index.scss'; @import './itcss/trumps/index.scss';
@import '../../../node_modules/react-tooltip-component/dist/react-tooltip-component';
@import '../../../node_modules/react-select/dist/react-select';

25
ui/css.js
View File

@ -1,25 +0,0 @@
const fs = require('fs')
const path = require('path')
module.exports = bundleCss
var cssFiles = {
'index.css': fs.readFileSync(path.join(__dirname, '/app/css/output/index.css'), 'utf8'),
'react-tooltip-component.css': fs.readFileSync(path.join(__dirname, '..', 'node_modules', 'react-tooltip-component', 'dist', 'react-tooltip-component.css'), 'utf8'),
'react-css': fs.readFileSync(path.join(__dirname, '..', 'node_modules', 'react-select', 'dist', 'react-select.css'), 'utf8'),
}
function bundleCss () {
var cssBundle = Object.keys(cssFiles).reduce(function (bundle, fileName) {
var fileContent = cssFiles[fileName]
var output = String()
output += '/*========== ' + fileName + ' ==========*/\n\n'
output += fileContent
output += '\n\n'
return bundle + output
}, String())
return cssBundle
}