{"action":"created","issue":{"url":"https://api.github.com/repos/filamentgroup/loadCSS/issues/85","labels_url":"https://api.github.com/repos/filamentgroup/loadCSS/issues/85/labels{/name}","comments_url":"https://api.github.com/repos/filamentgroup/loadCSS/issues/85/comments","events_url":"https://api.github.com/repos/filamentgroup/loadCSS/issues/85/events","html_url":"https://github.com/filamentgroup/loadCSS/issues/85","id":102466611,"number":85,"title":"Performance of invalidating all stylesheets","user":{"login":"paulirish","id":39191,"avatar_url":"https://avatars.githubusercontent.com/u/39191?v=3","gravatar_id":"","url":"https://api.github.com/users/paulirish","html_url":"https://github.com/paulirish","followers_url":"https://api.github.com/users/paulirish/followers","following_url":"https://api.github.com/users/paulirish/following{/other_user}","gists_url":"https://api.github.com/users/paulirish/gists{/gist_id}","starred_url":"https://api.github.com/users/paulirish/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/paulirish/subscriptions","organizations_url":"https://api.github.com/users/paulirish/orgs","repos_url":"https://api.github.com/users/paulirish/repos","events_url":"https://api.github.com/users/paulirish/events{/privacy}","received_events_url":"https://api.github.com/users/paulirish/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":4,"created_at":"2015-08-21T21:36:45Z","updated_at":"2015-08-24T15:47:50Z","closed_at":null,"body":"### Background\r\nBrowsers are built to optimize appending new styles to the end. That's why when you apply an inline style, browsers don't have to recompute the styles of the world in order to apply it.\r\nThe model is built to cheaply apply additive style rules; the browser takes the current CSSOM (basically) and applies the new css on top of it. It's cool.\r\n\r\nBecause CSS order matters, if new CSS is added in the middle (let's say halfway down), then the browser invalidates the style computation of 50% of the styles and has to recompute due to the potential cascade changes. \r\n\r\n\r\n### Current state\r\nloadCSS injects the script like so:\r\n```js\r\nvar ref = before || window.document.getElementsByTagName( \"script\" )[ 0 ];\r\nref.parentNode.insertBefore( ss, ref );\r\n```\r\nThis injection is better than adding to the very top of the head, but there's a good chance it is before other styles. \r\n\r\nIn discussions with Flipkart, the performance disadvantage they encountered with this was significant. I would expect similar results amongst publishers with plenty of DOM, the folks that typically would be eager to use loadCSS.\r\n\r\n### Proposal\r\nI'd recommend placing the injected sheet at the end of all recognized styles. (Bonus: subsequent loadCSS calls will be generally placed after eachother, which is probably what folks would expect)\r\n\r\nSo I'd go for something like this:\r\n```js\r\nvar elems = document.querySelectorAll('style,link[rel=stylesheet]');\r\nvar ref = elems.item(elems.length - 1);\r\nref.parentNode.insertBefore(ss, ref.nextSibling);\r\n```\r\n\r\nIt finds all external stylesheets and inline styles, gets the last one (in DOM order), then adds our `ss` right *after* it.\r\n<hr>\r\nhows that sound?"},"comment":{"url":"https://api.github.com/repos/filamentgroup/loadCSS/issues/comments/134257098","html_url":"https://github.com/filamentgroup/loadCSS/issues/85#issuecomment-134257098","issue_url":"https://api.github.com/repos/filamentgroup/loadCSS/issues/85","id":134257098,"user":{"login":"scottjehl","id":214783,"avatar_url":"https://avatars.githubusercontent.com/u/214783?v=3","gravatar_id":"","url":"https://api.github.com/users/scottjehl","html_url":"https://github.com/scottjehl","followers_url":"https://api.github.com/users/scottjehl/followers","following_url":"https://api.github.com/users/scottjehl/following{/other_user}","gists_url":"https://api.github.com/users/scottjehl/gists{/gist_id}","starred_url":"https://api.github.com/users/scottjehl/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/scottjehl/subscriptions","organizations_url":"https://api.github.com/users/scottjehl/orgs","repos_url":"https://api.github.com/users/scottjehl/repos","events_url":"https://api.github.com/users/scottjehl/events{/privacy}","received_events_url":"https://api.github.com/users/scottjehl/received_events","type":"User","site_admin":false},"created_at":"2015-08-24T15:47:50Z","updated_at":"2015-08-24T15:47:50Z","body":"Okay, @paulirish : how's this PR look? \r\nhttps://github.com/filamentgroup/loadCSS/pull/87"}}