DOM優化 · Javascript核心基礎

[toc] ## 普通js操作與dom操作的性能對比 ![](https://box.kancloud.cn/09912fc8bdcffbfc16a4f4de50cb8551_537x364.png) 使用dom方法是十分耗性能的 ![](https://box.kancloud.cn/00627b1c0ac0ac964b1b8b128de276e5_457x257.png) 整合成一次 ![](https://box.kancloud.cn/4f39f63fe10bcc7542279a1db1be5e1a_413x296.png) ### innerHTML和其它dom方法對比 ![](https://box.kancloud.cn/6c0ee3a3ecae32aa158dd6aeb2bf7328_450x191.png) 提升 15%左右 ![](https://box.kancloud.cn/3190f1fc4c57d73bb71d7405eb83e130_321x164.png) 但值得注意的是，在chrome下，dom方法要比innerHTML要好（上圖為firefox） ## 減少dom操作 ![](https://box.kancloud.cn/cb3283e60afb06f62a9cefd9b35e319d_432x358.png) ### 使用克隆 ![](https://box.kancloud.cn/11213bbb17b45f8dcefabbb92d827466_395x203.png) 20%左右的提升 ![](https://box.kancloud.cn/3901b89e8857242a73f4201635888a5a_371x134.png) ### 使用局部變量 ![](https://box.kancloud.cn/bc2dcb2078f31f530ea945dafc9646f1_414x320.png) 緩存length，一點點的提升 ![](https://box.kancloud.cn/07e8a75404ea48f13c791c880adad867_308x241.png) ### 不同場景選擇不同的domAPI ![](https://box.kancloud.cn/59fdc0b8c854baf11058511ae59cd4af_279x101.png) ![](https://box.kancloud.cn/6c6797ea27f475529dc78b2d17c0f6f7_409x93.png) ## 重排與重繪，瀏覽器相關 ![](https://box.kancloud.cn/15e9cf4b086ce0b11c3554903065e6c8_422x399.png) ### 在DOM插入之前設置其內容 ![](https://box.kancloud.cn/af2aa8d7d52312510b791fbcd484df08_387x177.png) 將近一半的提升 ![](https://box.kancloud.cn/aa5b328c0513845677c7b134944ab9a8_425x195.png) ### 使用cssText降低重繪消耗 ![](https://box.kancloud.cn/1a55467c58981f47e20b89a4703db3c5_406x254.png) ### 緩存布局信息 ![](https://box.kancloud.cn/0309e239466c50b65415266cb36f8720_346x212.png) ### 使用文檔碎片減少重排 ![](https://box.kancloud.cn/788906f6013cfdac95f92443d066bac9_426x169.png) ![](https://box.kancloud.cn/e4ff44c21637c4cc63fa8c3ab08cb9f6_421x201.png) ## 其它 ![](https://box.kancloud.cn/2b47f33f8e31ace91b0d003fe6411a8a_505x222.png)