{"action":"created","issue":{"url":"https://api.github.com/repos/sveltejs/svelte/issues/455","repository_url":"https://api.github.com/repos/sveltejs/svelte","labels_url":"https://api.github.com/repos/sveltejs/svelte/issues/455/labels{/name}","comments_url":"https://api.github.com/repos/sveltejs/svelte/issues/455/comments","events_url":"https://api.github.com/repos/sveltejs/svelte/issues/455/events","html_url":"https://github.com/sveltejs/svelte/issues/455","id":219679616,"number":455,"title":"Set style attributes directly instead of using cssText for inline styles","user":{"login":"ccampbell","id":259316,"avatar_url":"https://avatars1.githubusercontent.com/u/259316?v=3","gravatar_id":"","url":"https://api.github.com/users/ccampbell","html_url":"https://github.com/ccampbell","followers_url":"https://api.github.com/users/ccampbell/followers","following_url":"https://api.github.com/users/ccampbell/following{/other_user}","gists_url":"https://api.github.com/users/ccampbell/gists{/gist_id}","starred_url":"https://api.github.com/users/ccampbell/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/ccampbell/subscriptions","organizations_url":"https://api.github.com/users/ccampbell/orgs","repos_url":"https://api.github.com/users/ccampbell/repos","events_url":"https://api.github.com/users/ccampbell/events{/privacy}","received_events_url":"https://api.github.com/users/ccampbell/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":6,"created_at":"2017-04-05T18:49:03Z","updated_at":"2017-04-05T19:57:29Z","closed_at":null,"body":"I am working on an app where there is a lot of motion and positions that are updated dynamically based on the state. \r\n\r\nI threw together a very crude demo here:\r\nhttps://svelte.technology/repl?version=1.13.2&gist=ac946b7b6802e16d0e963d3043c5d1d2\r\n\r\nAnyway, I noticed thate the generated code uses `element.style.cssText`. I didn’t really think much of it, but I thought I would throw together a jsperf test to compare it to setting the styles attributes directly. (I found a few existing jsperf tests, but they were just setting the same property/value over and over, so I didn’t really trust the results)\r\n\r\nhttps://jsperf.com/csstext-vs-style-moving-element\r\n\r\nIt looks like `cssText` is approximately 15-30% slower in Chrome (in Safari it is around 50% slower). \r\n\r\nAlso I threw a test in there using `cssText` with unchanged styles and that makes the performance quite a bit worse. I am not 100% sure about what svelte is doing, but I believe it is rendering out the full style attribute string every time it re-renders an element.\r\n\r\nI think it would be nice to update svelte so that it sets style properties directly. Not only would that be a bit faster, but it would allow the generated code to only update the styles that have changed vs. resetting the entire style attribute string each time.\r\n\r\nI am sure that is quite a bit of work, but perhaps this could be considered a performance optimization for the future!"},"comment":{"url":"https://api.github.com/repos/sveltejs/svelte/issues/comments/291978905","html_url":"https://github.com/sveltejs/svelte/issues/455#issuecomment-291978905","issue_url":"https://api.github.com/repos/sveltejs/svelte/issues/455","id":291978905,"user":{"login":"ccampbell","id":259316,"avatar_url":"https://avatars1.githubusercontent.com/u/259316?v=3","gravatar_id":"","url":"https://api.github.com/users/ccampbell","html_url":"https://github.com/ccampbell","followers_url":"https://api.github.com/users/ccampbell/followers","following_url":"https://api.github.com/users/ccampbell/following{/other_user}","gists_url":"https://api.github.com/users/ccampbell/gists{/gist_id}","starred_url":"https://api.github.com/users/ccampbell/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/ccampbell/subscriptions","organizations_url":"https://api.github.com/users/ccampbell/orgs","repos_url":"https://api.github.com/users/ccampbell/repos","events_url":"https://api.github.com/users/ccampbell/events{/privacy}","received_events_url":"https://api.github.com/users/ccampbell/received_events","type":"User","site_admin":false},"created_at":"2017-04-05T19:57:29Z","updated_at":"2017-04-05T19:57:29Z","body":"Ah okay I gotcha. Technically that could be compiled to something like this if that string was parsed also:\r\n\r\n```\r\nisNew ? setStyleAttribute(element, 'perspective', width + 'px') : '';\r\n```\r\n\r\nbut probably that is a lot more effort than it is worth.\r\n\r\nI like the `style:top=\"{{ top }}px\"` syntax. Binding directly to properties is cool too, but I find that more often than not the properties I am setting are integers, so having to add the `px` every time to do the `:style:top` shorthand I don’t think would really be super helpful for me."}}
{"actor":{"display_login":"ccampbell"}}