{"action":"created","issue":{"url":"https://api.github.com/repos/codemirror/CodeMirror/issues/5653","repository_url":"https://api.github.com/repos/codemirror/CodeMirror","labels_url":"https://api.github.com/repos/codemirror/CodeMirror/issues/5653/labels{/name}","comments_url":"https://api.github.com/repos/codemirror/CodeMirror/issues/5653/comments","events_url":"https://api.github.com/repos/codemirror/CodeMirror/issues/5653/events","html_url":"https://github.com/codemirror/CodeMirror/issues/5653","id":378698217,"node_id":"MDU6SXNzdWUzNzg2OTgyMTc=","number":5653,"title":"forEachCodeMirror is heavy when window resize on plenty of CodeMirror instance","user":{"login":"futurist","id":159167,"node_id":"MDQ6VXNlcjE1OTE2Nw==","avatar_url":"https://avatars0.githubusercontent.com/u/159167?v=4","gravatar_id":"","url":"https://api.github.com/users/futurist","html_url":"https://github.com/futurist","followers_url":"https://api.github.com/users/futurist/followers","following_url":"https://api.github.com/users/futurist/following{/other_user}","gists_url":"https://api.github.com/users/futurist/gists{/gist_id}","starred_url":"https://api.github.com/users/futurist/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/futurist/subscriptions","organizations_url":"https://api.github.com/users/futurist/orgs","repos_url":"https://api.github.com/users/futurist/repos","events_url":"https://api.github.com/users/futurist/events{/privacy}","received_events_url":"https://api.github.com/users/futurist/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":1,"created_at":"2018-11-08T11:52:12Z","updated_at":"2018-12-05T09:10:28Z","closed_at":"2018-11-20T11:02:21Z","author_association":"NONE","body":"When there're plenty of CodeMirror instance in a document then `window resize` event will trigger below line:\r\n\r\nhttps://github.com/codemirror/CodeMirror/blob/87702cf2eb53cabd25e4f994354ea9fc9e2c1d97/src/edit/global_events.js#L29\r\n\r\n### That is a heavy operation like the demo below (with 150+ CodeMirror cells):\r\n\r\n![not-ok](https://user-images.githubusercontent.com/159167/48196792-891c6200-e38e-11e8-8efc-678990970624.gif)\r\n\r\nThe chrome performance panel shows this:\r\n\r\n![image](https://user-images.githubusercontent.com/159167/48197093-99810c80-e38f-11e8-99f9-236f9e0fae4a.png)\r\n\r\n\r\n### Here you can compare with just 5 CodeMirror cells:\r\n\r\n![ok](https://user-images.githubusercontent.com/159167/48196826-a7825d80-e38e-11e8-9579-d8eb1f7454ef.gif)\r\n\r\n\r\n\r\n### Recommended to use some way to distribute the resize into frames like using below:\r\n\r\nhttps://github.com/GoogleChromeLabs/idlize\r\n"},"comment":{"url":"https://api.github.com/repos/codemirror/CodeMirror/issues/comments/444412491","html_url":"https://github.com/codemirror/CodeMirror/issues/5653#issuecomment-444412491","issue_url":"https://api.github.com/repos/codemirror/CodeMirror/issues/5653","id":444412491,"node_id":"MDEyOklzc3VlQ29tbWVudDQ0NDQxMjQ5MQ==","user":{"login":"futurist","id":159167,"node_id":"MDQ6VXNlcjE1OTE2Nw==","avatar_url":"https://avatars0.githubusercontent.com/u/159167?v=4","gravatar_id":"","url":"https://api.github.com/users/futurist","html_url":"https://github.com/futurist","followers_url":"https://api.github.com/users/futurist/followers","following_url":"https://api.github.com/users/futurist/following{/other_user}","gists_url":"https://api.github.com/users/futurist/gists{/gist_id}","starred_url":"https://api.github.com/users/futurist/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/futurist/subscriptions","organizations_url":"https://api.github.com/users/futurist/orgs","repos_url":"https://api.github.com/users/futurist/repos","events_url":"https://api.github.com/users/futurist/events{/privacy}","received_events_url":"https://api.github.com/users/futurist/received_events","type":"User","site_admin":false},"created_at":"2018-12-05T09:10:28Z","updated_at":"2018-12-05T09:10:28Z","author_association":"NONE","body":"After tested with the patch, the performance is improved, but still have noticeable lag.\r\n\r\nCan it be better for below?\r\n\r\n- for old browsers, keep it as is\r\n\r\n- for modern browsers, use modern way\r\n\r\n1. Before resize, check cell visibility, e.g. using \r\nhttps://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API\r\n\r\n2. Only resize visible cells, keep others untouched\r\n\r\n3. When cell scroll into viewport, trigger a `resize` event to itself\r\n\r\nJust a note for this issue, priority is very low....\r\n\r\n\r\n\r\n"}}
{"actor":{"display_login":"futurist"}}