js循环调用innerHTML操作的时候，由于这是对页面的dom进行操作，如果数据量过多的时候会导致浏览器卡死。
innerHTML是一个JavaScript访问dom的API,由于js和dom时两个相互独立的功能只要通过接口彼此连接，就会产生消耗。所以访问dom元素的有代价的，修改元素则更为昂贵，因为他会导致浏览器重新计算页面的几何变化。
1.解决办法：
当循环长度超过100，就应该先用变量缓存起来，在for结束之后再一次过 html，否则每循环一次，就让页面重新渲染一次，多数都是要崩。所以不要循环操作dom，先将数据用变量循环接值，后一次操作dom。
在select框中拼接option时也是同样的操作。
循环加入content
select拼接option这样的操作能够将性能提高，但是数据量太多，还是会导致浏览器卡死，这个时候可以考虑将数据量减少的操作，可以将数据量通过模糊查找，或者加筛选条件将要展示的数据量减少。
2.可以考虑用jsrender（还在学习，后期补上）
js循环调用innerHTML操作的时候，由于这是对页面的dom进行操作，如果数据量过多的时候会导致浏览器卡死。 ...
js性能小贴士——优化循环 前端网页与js性能优化 我总结的js性能优化的小知识 提高 web 应用性能之 Jav...
js性能小贴士——优化循环 前端网页与js性能优化 我总结的js性能优化的小知识 提高 web 应用性能之 Jav...
1.用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能 2.少用全局变量 3.图...
优化JS代码性能 优化循环 我们来看一段段代码 这段代码循环footballTeam中的members数组，然后打...
js 性能优化利器：prepack 1. js 性能优化 js 性能优化不外乎从三个角度入手： 1.1 开发者在编...
tableView性能优化 - cell的循环利用方式1 tableView性能优化 - cell的循环利用方式2...
tableView性能优化 - cell的循环利用方式1 tableView性能优化 - cell的循环利用方式2...
tableView性能优化 - cell的循环利用方式1 tableView性能优化 - cell的循环利用方式2...
tableView性能优化 - cell的循环利用方式1 tableView性能优化 - cell的循环利用方式2...
本文标题：js循环调用innerHTML操作，性能优化
本文链接：https://www.haomeiwen.com/subject/hrylqqtx.html
网友评论