127.0.0.1:9200<br>URL: http://127.0.0.1:9200/likecs_art_db/_search<br>REQUEST:<pre>Array
(
    [query] => Array
        (
            [match] => Array
                (
                    [text] => Array
                        (
                            [query] => 你真的了解回流和重绘吗
                        )

                )

        )

    [highlight] => Array
        (
            [fields] => Array
                (
                    [text] => stdClass Object
                        (
                        )

                )

            [pre_tags] => #em#
            [post_tags] => #/em#
        )

    [size] => 8
    [from] => 0
)
</pre>RESPONSE:<pre>string(7737) "{"took":27,"timed_out":false,"_shards":{"total":1,"successful":1,"skipped":0,"failed":0},"hits":{"total":{"value":10000,"relation":"gte"},"max_score":47.27001,"hits":[{"_index":"likecs_art_db","_type":"_doc","_id":"43620","_score":47.27001,"_source":{"id":"43620","text":"\u4f60\u771f\u7684\u4e86\u89e3\u56de\u6d41\u548c\u91cd\u7ed8\u5417","intro":"\u76ee\u5f55\n\nECharts\n\u5f02\u6b65\u52a0\u8f7d\n\n\n\nECharts\r\n\u6570\u636e\u53ef\u89c6\u5316\u5728\u8fc7\u53bb\u51e0\u5e74\u4e2d\u53d6\u5f97\u4e86\u5de8\u5927\u8fdb\u5c55\u3002\u5f00\u53d1\u4eba\u5458\u5bf9\u53ef\u89c6\u5316\u4ea7\u54c1\u7684\u671f\u671b\u4e0d\u518d\u662f\u7b80\u5355\u7684\u56fe\u8868\u521b\u5efa\u5de5\u5177\uff0c\u800c\u662f\u5728\u4ea4\u4e92\u3001\u6027\u80fd\u3001\u6570\u636e\u5904\u7406\u7b49\u65b9\u9762\u6709\u66f4\u9ad8\u7684\u8981\u6c42\u3002\r\nchart.setOption({\r\n    color: [\r\n        ","username":"chenjg","tagsname":"","tagsid":"[]","catesname":"","catesid":"[]","createtime":"1544454865"},"highlight":{"text":["#em#你#/em##em#真#/em##em#的#/em##em#了#/em##em#解#/em##em#回#/em##em#流#/em##em#和#/em##em#重#/em##em#绘#/em##em#吗#/em#"]}},{"_index":"likecs_art_db","_type":"_doc","_id":"48070","_score":41.545025,"_source":{"id":"48070","text":"\u3010\u5f00\u53d1\u5fc5\u770b\u3011\u4f60\u771f\u7684\u4e86\u89e3\u56de\u6d41\u548c\u91cd\u7ed8\u5417\uff1f","intro":"\u76ee\u5f55\n\nECharts\n\u5f02\u6b65\u52a0\u8f7d\n\n\n\nECharts\r\n\u6570\u636e\u53ef\u89c6\u5316\u5728\u8fc7\u53bb\u51e0\u5e74\u4e2d\u53d6\u5f97\u4e86\u5de8\u5927\u8fdb\u5c55\u3002\u5f00\u53d1\u4eba\u5458\u5bf9\u53ef\u89c6\u5316\u4ea7\u54c1\u7684\u671f\u671b\u4e0d\u518d\u662f\u7b80\u5355\u7684\u56fe\u8868\u521b\u5efa\u5de5\u5177\uff0c\u800c\u662f\u5728\u4ea4\u4e92\u3001\u6027\u80fd\u3001\u6570\u636e\u5904\u7406\u7b49\u65b9\u9762\u6709\u66f4\u9ad8\u7684\u8981\u6c42\u3002\r\nchart.setOption({\r\n    color: [\r\n        ","username":"qcloud1001","tagsname":"","tagsid":"[]","catesname":"","catesid":"[]","createtime":"1547437233"},"highlight":{"text":["【开发必看】#em#你#/em##em#真#/em##em#的#/em##em#了#/em##em#解#/em##em#回#/em##em#流#/em##em#和#/em##em#重#/em##em#绘#/em##em#吗#/em#？"]}},{"_index":"likecs_art_db","_type":"_doc","_id":"66159","_score":29.095745,"_source":{"id":"66159","text":"\u4f60\u771f\u7684\u4e86\u89e3 Cookie \u548c Session \u5417","intro":"\u76ee\u5f55\n\nECharts\n\u5f02\u6b65\u52a0\u8f7d\n\n\n\nECharts\r\n\u6570\u636e\u53ef\u89c6\u5316\u5728\u8fc7\u53bb\u51e0\u5e74\u4e2d\u53d6\u5f97\u4e86\u5de8\u5927\u8fdb\u5c55\u3002\u5f00\u53d1\u4eba\u5458\u5bf9\u53ef\u89c6\u5316\u4ea7\u54c1\u7684\u671f\u671b\u4e0d\u518d\u662f\u7b80\u5355\u7684\u56fe\u8868\u521b\u5efa\u5de5\u5177\uff0c\u800c\u662f\u5728\u4ea4\u4e92\u3001\u6027\u80fd\u3001\u6570\u636e\u5904\u7406\u7b49\u65b9\u9762\u6709\u66f4\u9ad8\u7684\u8981\u6c42\u3002\r\nchart.setOption({\r\n    color: [\r\n        ","username":"justdojava","tagsname":"","tagsid":"[]","catesname":"java","catesid":"[\"107\"]","createtime":"1563895116"},"highlight":{"text":["#em#你#/em##em#真#/em##em#的#/em##em#了#/em##em#解#/em# Cookie #em#和#/em# Session #em#吗#/em#"]}},{"_index":"likecs_art_db","_type":"_doc","_id":"136887","_score":29.095745,"_source":{"id":"136887","text":"\u4f60\u771f\u7684\u4e86\u89e3 Session \u548c Cookie \u5417\uff1f","intro":"\u76ee\u5f55\n\nECharts\n\u5f02\u6b65\u52a0\u8f7d\n\n\n\nECharts\r\n\u6570\u636e\u53ef\u89c6\u5316\u5728\u8fc7\u53bb\u51e0\u5e74\u4e2d\u53d6\u5f97\u4e86\u5de8\u5927\u8fdb\u5c55\u3002\u5f00\u53d1\u4eba\u5458\u5bf9\u53ef\u89c6\u5316\u4ea7\u54c1\u7684\u671f\u671b\u4e0d\u518d\u662f\u7b80\u5355\u7684\u56fe\u8868\u521b\u5efa\u5de5\u5177\uff0c\u800c\u662f\u5728\u4ea4\u4e92\u3001\u6027\u80fd\u3001\u6570\u636e\u5904\u7406\u7b49\u65b9\u9762\u6709\u66f4\u9ad8\u7684\u8981\u6c42\u3002\r\nchart.setOption({\r\n    color: [\r\n        ","username":"luciochn","tagsname":"","tagsid":"[]","catesname":"\u540e\u7aef\u6280\u672f","catesid":"[\"9755\"]","createtime":"1626575212"},"highlight":{"text":["#em#你#/em##em#真#/em##em#的#/em##em#了#/em##em#解#/em# Session #em#和#/em# Cookie #em#吗#/em#？"]}},{"_index":"likecs_art_db","_type":"_doc","_id":"203290730","_score":29.095745,"_source":{"id":"203290730","text":"\u4f60\u771f\u7684\u4e86\u89e3127.0.0.1\u548c0.0.0.0\u5417\uff5e","intro":"\u76ee\u5f55\n\nECharts\n\u5f02\u6b65\u52a0\u8f7d\n\n\n\nECharts\r\n\u6570\u636e\u53ef\u89c6\u5316\u5728\u8fc7\u53bb\u51e0\u5e74\u4e2d\u53d6\u5f97\u4e86\u5de8\u5927\u8fdb\u5c55\u3002\u5f00\u53d1\u4eba\u5458\u5bf9\u53ef\u89c6\u5316\u4ea7\u54c1\u7684\u671f\u671b\u4e0d\u518d\u662f\u7b80\u5355\u7684\u56fe\u8868\u521b\u5efa\u5de5\u5177\uff0c\u800c\u662f\u5728\u4ea4\u4e92\u3001\u6027\u80fd\u3001\u6570\u636e\u5904\u7406\u7b49\u65b9\u9762\u6709\u66f4\u9ad8\u7684\u8981\u6c42\u3002\r\nchart.setOption({\r\n    color: [\r\n        ","username":"","tagsname":null,"tagsid":"","catesname":null,"catesid":"","createtime":"1633165013"},"highlight":{"text":["#em#你#/em##em#真#/em##em#的#/em##em#了#/em##em#解#/em#127.0.0.1#em#和#/em#0.0.0.0#em#吗#/em#～"]}},{"_index":"likecs_art_db","_type":"_doc","_id":"203290733","_score":29.095745,"_source":{"id":"203290733","text":"\u4f60\u771f\u7684\u4e86\u89e3weight\u548cweightSum\u5417\uff1f","intro":"\u76ee\u5f55\n\nECharts\n\u5f02\u6b65\u52a0\u8f7d\n\n\n\nECharts\r\n\u6570\u636e\u53ef\u89c6\u5316\u5728\u8fc7\u53bb\u51e0\u5e74\u4e2d\u53d6\u5f97\u4e86\u5de8\u5927\u8fdb\u5c55\u3002\u5f00\u53d1\u4eba\u5458\u5bf9\u53ef\u89c6\u5316\u4ea7\u54c1\u7684\u671f\u671b\u4e0d\u518d\u662f\u7b80\u5355\u7684\u56fe\u8868\u521b\u5efa\u5de5\u5177\uff0c\u800c\u662f\u5728\u4ea4\u4e92\u3001\u6027\u80fd\u3001\u6570\u636e\u5904\u7406\u7b49\u65b9\u9762\u6709\u66f4\u9ad8\u7684\u8981\u6c42\u3002\r\nchart.setOption({\r\n    color: [\r\n        ","username":"","tagsname":null,"tagsid":"","catesname":null,"catesid":"","createtime":"1619105364"},"highlight":{"text":["#em#你#/em##em#真#/em##em#的#/em##em#了#/em##em#解#/em#weight#em#和#/em#weightSum#em#吗#/em#？"]}},{"_index":"likecs_art_db","_type":"_doc","_id":"1015171","_score":28.986877,"_source":{"id":"1015171","text":"\u56de\u6d41\u548c\u91cd\u7ed8","intro":"\u76ee\u5f55\n\nECharts\n\u5f02\u6b65\u52a0\u8f7d\n\n\n\nECharts\r\n\u6570\u636e\u53ef\u89c6\u5316\u5728\u8fc7\u53bb\u51e0\u5e74\u4e2d\u53d6\u5f97\u4e86\u5de8\u5927\u8fdb\u5c55\u3002\u5f00\u53d1\u4eba\u5458\u5bf9\u53ef\u89c6\u5316\u4ea7\u54c1\u7684\u671f\u671b\u4e0d\u518d\u662f\u7b80\u5355\u7684\u56fe\u8868\u521b\u5efa\u5de5\u5177\uff0c\u800c\u662f\u5728\u4ea4\u4e92\u3001\u6027\u80fd\u3001\u6570\u636e\u5904\u7406\u7b49\u65b9\u9762\u6709\u66f4\u9ad8\u7684\u8981\u6c42\u3002\r\nchart.setOption({\r\n    color: [\r\n        ","username":"cjie","tagsname":"","tagsid":"","catesname":null,"catesid":"","createtime":"1641012941"},"highlight":{"text":["#em#回#/em##em#流#/em##em#和#/em##em#重#/em##em#绘#/em#"]}},{"_index":"likecs_art_db","_type":"_doc","_id":"203328868","_score":28.986877,"_source":{"id":"203328868","text":"\u56de\u6d41\u548c\u91cd\u7ed8","intro":"\u76ee\u5f55\n\nECharts\n\u5f02\u6b65\u52a0\u8f7d\n\n\n\nECharts\r\n\u6570\u636e\u53ef\u89c6\u5316\u5728\u8fc7\u53bb\u51e0\u5e74\u4e2d\u53d6\u5f97\u4e86\u5de8\u5927\u8fdb\u5c55\u3002\u5f00\u53d1\u4eba\u5458\u5bf9\u53ef\u89c6\u5316\u4ea7\u54c1\u7684\u671f\u671b\u4e0d\u518d\u662f\u7b80\u5355\u7684\u56fe\u8868\u521b\u5efa\u5de5\u5177\uff0c\u800c\u662f\u5728\u4ea4\u4e92\u3001\u6027\u80fd\u3001\u6570\u636e\u5904\u7406\u7b49\u65b9\u9762\u6709\u66f4\u9ad8\u7684\u8981\u6c42\u3002\r\nchart.setOption({\r\n    color: [\r\n        ","username":"","tagsname":null,"tagsid":"","catesname":null,"catesid":"","createtime":"1626464039"},"highlight":{"text":["#em#回#/em##em#流#/em##em#和#/em##em#重#/em##em#绘#/em#"]}}]}}"
</pre>127.0.0.1:9200<br>URL: http://127.0.0.1:9200/likecs_art_db/_search<br>REQUEST:<pre>Array
(
    [query] => Array
        (
            [match] => Array
                (
                    [text] => Array
                        (
                            [query] => 你真的了解回流和重绘吗
                        )

                )

        )

    [highlight] => Array
        (
            [fields] => Array
                (
                    [text] => stdClass Object
                        (
                        )

                )

            [pre_tags] => #em#
            [post_tags] => #/em#
        )

    [size] => 8
    [from] => 8
)
</pre>RESPONSE:<pre>string(7349) "{"took":28,"timed_out":false,"_shards":{"total":1,"successful":1,"skipped":0,"failed":0},"hits":{"total":{"value":10000,"relation":"gte"},"max_score":47.27001,"hits":[{"_index":"likecs_art_db","_type":"_doc","_id":"203428685","_score":28.986877,"_source":{"id":"203428685","text":"\u56de\u6d41\u548c\u91cd\u7ed8","intro":"\u76ee\u5f55\n\nECharts\n\u5f02\u6b65\u52a0\u8f7d\n\n\n\nECharts\r\n\u6570\u636e\u53ef\u89c6\u5316\u5728\u8fc7\u53bb\u51e0\u5e74\u4e2d\u53d6\u5f97\u4e86\u5de8\u5927\u8fdb\u5c55\u3002\u5f00\u53d1\u4eba\u5458\u5bf9\u53ef\u89c6\u5316\u4ea7\u54c1\u7684\u671f\u671b\u4e0d\u518d\u662f\u7b80\u5355\u7684\u56fe\u8868\u521b\u5efa\u5de5\u5177\uff0c\u800c\u662f\u5728\u4ea4\u4e92\u3001\u6027\u80fd\u3001\u6570\u636e\u5904\u7406\u7b49\u65b9\u9762\u6709\u66f4\u9ad8\u7684\u8981\u6c42\u3002\r\nchart.setOption({\r\n    color: [\r\n        ","username":"","tagsname":null,"tagsid":"","catesname":null,"catesid":"","createtime":"1620206788"},"highlight":{"text":["#em#回#/em##em#流#/em##em#和#/em##em#重#/em##em#绘#/em#"]}},{"_index":"likecs_art_db","_type":"_doc","_id":"203428686","_score":28.986877,"_source":{"id":"203428686","text":"\u91cd\u7ed8\u548c\u56de\u6d41","intro":"\u76ee\u5f55\n\nECharts\n\u5f02\u6b65\u52a0\u8f7d\n\n\n\nECharts\r\n\u6570\u636e\u53ef\u89c6\u5316\u5728\u8fc7\u53bb\u51e0\u5e74\u4e2d\u53d6\u5f97\u4e86\u5de8\u5927\u8fdb\u5c55\u3002\u5f00\u53d1\u4eba\u5458\u5bf9\u53ef\u89c6\u5316\u4ea7\u54c1\u7684\u671f\u671b\u4e0d\u518d\u662f\u7b80\u5355\u7684\u56fe\u8868\u521b\u5efa\u5de5\u5177\uff0c\u800c\u662f\u5728\u4ea4\u4e92\u3001\u6027\u80fd\u3001\u6570\u636e\u5904\u7406\u7b49\u65b9\u9762\u6709\u66f4\u9ad8\u7684\u8981\u6c42\u3002\r\nchart.setOption({\r\n    color: [\r\n        ","username":"","tagsname":null,"tagsid":"","catesname":null,"catesid":"","createtime":"1630903296"},"highlight":{"text":["#em#重#/em##em#绘#/em##em#和#/em##em#回#/em##em#流#/em#"]}},{"_index":"likecs_art_db","_type":"_doc","_id":"203328877","_score":28.247732,"_source":{"id":"203328877","text":"\u91cd\u7ed8\u548c\u91cd\u6392\uff08\u56de\u6d41\uff09","intro":"\u76ee\u5f55\n\nECharts\n\u5f02\u6b65\u52a0\u8f7d\n\n\n\nECharts\r\n\u6570\u636e\u53ef\u89c6\u5316\u5728\u8fc7\u53bb\u51e0\u5e74\u4e2d\u53d6\u5f97\u4e86\u5de8\u5927\u8fdb\u5c55\u3002\u5f00\u53d1\u4eba\u5458\u5bf9\u53ef\u89c6\u5316\u4ea7\u54c1\u7684\u671f\u671b\u4e0d\u518d\u662f\u7b80\u5355\u7684\u56fe\u8868\u521b\u5efa\u5de5\u5177\uff0c\u800c\u662f\u5728\u4ea4\u4e92\u3001\u6027\u80fd\u3001\u6570\u636e\u5904\u7406\u7b49\u65b9\u9762\u6709\u66f4\u9ad8\u7684\u8981\u6c42\u3002\r\nchart.setOption({\r\n    color: [\r\n        ","username":"","tagsname":null,"tagsid":"","catesname":null,"catesid":"","createtime":"1630916640"},"highlight":{"text":["#em#重#/em##em#绘#/em##em#和#/em##em#重#/em#排（#em#回#/em##em#流#/em#）"]}},{"_index":"likecs_art_db","_type":"_doc","_id":"70604","_score":28.15456,"_source":{"id":"70604","text":"\u4f60\u771f\u7684\u4e86\u89e3setState()\u5417\uff1f","intro":"\u76ee\u5f55\n\nECharts\n\u5f02\u6b65\u52a0\u8f7d\n\n\n\nECharts\r\n\u6570\u636e\u53ef\u89c6\u5316\u5728\u8fc7\u53bb\u51e0\u5e74\u4e2d\u53d6\u5f97\u4e86\u5de8\u5927\u8fdb\u5c55\u3002\u5f00\u53d1\u4eba\u5458\u5bf9\u53ef\u89c6\u5316\u4ea7\u54c1\u7684\u671f\u671b\u4e0d\u518d\u662f\u7b80\u5355\u7684\u56fe\u8868\u521b\u5efa\u5de5\u5177\uff0c\u800c\u662f\u5728\u4ea4\u4e92\u3001\u6027\u80fd\u3001\u6570\u636e\u5904\u7406\u7b49\u65b9\u9762\u6709\u66f4\u9ad8\u7684\u8981\u6c42\u3002\r\nchart.setOption({\r\n    color: [\r\n        ","username":"dreamcc","tagsname":"","tagsid":"[]","catesname":"","catesid":"[]","createtime":"1566733753"},"highlight":{"text":["#em#你#/em##em#真#/em##em#的#/em##em#了#/em##em#解#/em#setState()#em#吗#/em#？"]}},{"_index":"likecs_art_db","_type":"_doc","_id":"84495","_score":28.15456,"_source":{"id":"84495","text":"\u4f60\u771f\u7684\u4e86\u89e3foreach\u5417\uff1f","intro":"\u76ee\u5f55\n\nECharts\n\u5f02\u6b65\u52a0\u8f7d\n\n\n\nECharts\r\n\u6570\u636e\u53ef\u89c6\u5316\u5728\u8fc7\u53bb\u51e0\u5e74\u4e2d\u53d6\u5f97\u4e86\u5de8\u5927\u8fdb\u5c55\u3002\u5f00\u53d1\u4eba\u5458\u5bf9\u53ef\u89c6\u5316\u4ea7\u54c1\u7684\u671f\u671b\u4e0d\u518d\u662f\u7b80\u5355\u7684\u56fe\u8868\u521b\u5efa\u5de5\u5177\uff0c\u800c\u662f\u5728\u4ea4\u4e92\u3001\u6027\u80fd\u3001\u6570\u636e\u5904\u7406\u7b49\u65b9\u9762\u6709\u66f4\u9ad8\u7684\u8981\u6c42\u3002\r\nchart.setOption({\r\n    color: [\r\n        ","username":"aizai846","tagsname":"","tagsid":"[]","catesname":"","catesid":"[]","createtime":"1575627721"},"highlight":{"text":["#em#你#/em##em#真#/em##em#的#/em##em#了#/em##em#解#/em#foreach#em#吗#/em#？"]}},{"_index":"likecs_art_db","_type":"_doc","_id":"85075","_score":28.15456,"_source":{"id":"85075","text":"\u4f60\u771f\u7684\u4e86\u89e3JMM\u5417\uff1f","intro":"\u76ee\u5f55\n\nECharts\n\u5f02\u6b65\u52a0\u8f7d\n\n\n\nECharts\r\n\u6570\u636e\u53ef\u89c6\u5316\u5728\u8fc7\u53bb\u51e0\u5e74\u4e2d\u53d6\u5f97\u4e86\u5de8\u5927\u8fdb\u5c55\u3002\u5f00\u53d1\u4eba\u5458\u5bf9\u53ef\u89c6\u5316\u4ea7\u54c1\u7684\u671f\u671b\u4e0d\u518d\u662f\u7b80\u5355\u7684\u56fe\u8868\u521b\u5efa\u5de5\u5177\uff0c\u800c\u662f\u5728\u4ea4\u4e92\u3001\u6027\u80fd\u3001\u6570\u636e\u5904\u7406\u7b49\u65b9\u9762\u6709\u66f4\u9ad8\u7684\u8981\u6c42\u3002\r\nchart.setOption({\r\n    color: [\r\n        ","username":"9dragon","tagsname":"","tagsid":"[]","catesname":"","catesid":"[]","createtime":"1576024325"},"highlight":{"text":["#em#你#/em##em#真#/em##em#的#/em##em#了#/em##em#解#/em#JMM#em#吗#/em#？"]}},{"_index":"likecs_art_db","_type":"_doc","_id":"14970","_score":28.15456,"_source":{"id":"14970","text":"HashMap \u4f60\u771f\u7684\u4e86\u89e3\u5417\uff1f","intro":"\u76ee\u5f55\n\nECharts\n\u5f02\u6b65\u52a0\u8f7d\n\n\n\nECharts\r\n\u6570\u636e\u53ef\u89c6\u5316\u5728\u8fc7\u53bb\u51e0\u5e74\u4e2d\u53d6\u5f97\u4e86\u5de8\u5927\u8fdb\u5c55\u3002\u5f00\u53d1\u4eba\u5458\u5bf9\u53ef\u89c6\u5316\u4ea7\u54c1\u7684\u671f\u671b\u4e0d\u518d\u662f\u7b80\u5355\u7684\u56fe\u8868\u521b\u5efa\u5de5\u5177\uff0c\u800c\u662f\u5728\u4ea4\u4e92\u3001\u6027\u80fd\u3001\u6570\u636e\u5904\u7406\u7b49\u65b9\u9762\u6709\u66f4\u9ad8\u7684\u8981\u6c42\u3002\r\nchart.setOption({\r\n    color: [\r\n        ","username":"GodHeng","tagsname":"","tagsid":"[]","catesname":"","catesid":"[]","createtime":"1524138523"},"highlight":{"text":["HashMap #em#你#/em##em#真#/em##em#的#/em##em#了#/em##em#解#/em##em#吗#/em#？"]}},{"_index":"likecs_art_db","_type":"_doc","_id":"30632","_score":28.15456,"_source":{"id":"30632","text":"\u4f60\u771f\u7684\u4e86\u89e3Scrum\u5417\uff1f","intro":"\u76ee\u5f55\n\nECharts\n\u5f02\u6b65\u52a0\u8f7d\n\n\n\nECharts\r\n\u6570\u636e\u53ef\u89c6\u5316\u5728\u8fc7\u53bb\u51e0\u5e74\u4e2d\u53d6\u5f97\u4e86\u5de8\u5927\u8fdb\u5c55\u3002\u5f00\u53d1\u4eba\u5458\u5bf9\u53ef\u89c6\u5316\u4ea7\u54c1\u7684\u671f\u671b\u4e0d\u518d\u662f\u7b80\u5355\u7684\u56fe\u8868\u521b\u5efa\u5de5\u5177\uff0c\u800c\u662f\u5728\u4ea4\u4e92\u3001\u6027\u80fd\u3001\u6570\u636e\u5904\u7406\u7b49\u65b9\u9762\u6709\u66f4\u9ad8\u7684\u8981\u6c42\u3002\r\nchart.setOption({\r\n    color: [\r\n        ","username":"bootsagile","tagsname":"","tagsid":"","catesname":"","catesid":"","createtime":"1629742527"},"highlight":{"text":["#em#你#/em##em#真#/em##em#的#/em##em#了#/em##em#解#/em#Scrum#em#吗#/em#？"]}}]}}"
</pre>127.0.0.1:9200<br>URL: http://192.168.101.128/searchcore/index.php/cihere_cn_db/_search<br>REQUEST:<pre>Array
(
    [query] => Array
        (
            [match] => Array
                (
                    [title] => Array
                        (
                            [query] => 你真的了解回流和重绘吗
                        )

                )

        )

    [highlight] => Array
        (
            [fields] => Array
                (
                    [title] => stdClass Object
                        (
                        )

                )

            [pre_tags] => #em#
            [post_tags] => #/em#
        )

    [from] => 0
)
</pre>RESPONSE:<pre>bool(false)
</pre>127.0.0.1:9200<br>URL: http://127.0.0.1:9200/likecs_down_db/_search<br>REQUEST:<pre>Array
(
    [query] => Array
        (
            [bool] => Array
                (
                    [must] => Array
                        (
                            [0] => Array
                                (
                                    [match] => Array
                                        (
                                            [title] => Array
                                                (
                                                    [query] => 你真的了解回流和重绘吗
                                                )

                                        )

                                )

                        )

                    [must_not] => Array
                        (
                            [0] => Array
                                (
                                    [term] => Array
                                        (
                                            [cate1] => 电子书籍
                                        )

                                )

                        )

                )

        )

    [highlight] => Array
        (
            [fields] => Array
                (
                    [title] => stdClass Object
                        (
                        )

                )

            [pre_tags] => #em#
            [post_tags] => #/em#
        )

    [size] => 5
    [from] => 0
)
</pre>RESPONSE:<pre>string(3046) "{"took":7,"timed_out":false,"_shards":{"total":1,"successful":1,"skipped":0,"failed":0},"hits":{"total":{"value":8077,"relation":"eq"},"max_score":16.062756,"hits":[{"_index":"likecs_down_db","_type":"_doc","_id":"52011","_score":16.062756,"_source":{"id":"52011","title":"html5 canvas\u7ed8\u5236\u7684\u903c\u771f3D\u7011\u5e03\u6d41\u52a8\u753b\u7279\u6548\u6e90\u7801","spidertime":"1623056505","contenttime":"1669805149","pageimage":"https:\/\/img.jbzj.com\/do\/uploads\/litimg\/170324\/152924361609.jpg","tag":"HTML5|Canvas|3d|\u52a8\u753b|\u6e90\u7801","cate1":"html5","attr1":"77KB"},"highlight":{"title":["html5 canvas#em#绘#/em#制#em#的#/em#逼#em#真#/em#3D瀑布#em#流#/em#动画特效源码"]}},{"_index":"likecs_down_db","_type":"_doc","_id":"154770","_score":15.735925,"_source":{"id":"154770","title":"\u9047\u89c1\u4f60\u771f\u597d \u9047\u89c1\u4f60\u771f\u597d\u5b57\u4f53,\u9047\u89c1\u4f60\u771f\u597d\u5b57\u4f53\u4e0b\u8f7d","spidertime":"0","contenttime":"1635862459","pageimage":"2020415\/1586946310162.ttf","cate1":"\u5b57\u4f53\u4e0b\u8f7d","attr1":"\u9047\u89c1\u4f60\u771f\u597d","attr2":"8870952","attr3":"1","attr5":"\u9047\u89c1\u4f60\u771f\u597d"},"highlight":{"title":["遇见#em#你#/em##em#真#/em#好 遇见#em#你#/em##em#真#/em#好字体,遇见#em#你#/em##em#真#/em#好字体下载"]}},{"_index":"likecs_down_db","_type":"_doc","_id":"224615","_score":13.388518,"_source":{"id":"224615","title":"\u6708\u5149\u548c\u4f60 Regular\u5b57\u4f53,\u6708\u5149\u548c\u4f60\u5b57\u4f53\u4e0b\u8f7d","spidertime":"0","contenttime":"1672024962","pageimage":"202086\/1596681785401.ttf","cate1":"\u5b57\u4f53\u4e0b\u8f7d","attr1":"\u6708\u5149\u548c\u4f60","attr2":"8975810","attr3":"1","attr5":"\u6708\u5149\u548c\u4f60"},"highlight":{"title":["月光#em#和#/em##em#你#/em# Regular字体,月光#em#和#/em##em#你#/em#字体下载"]}},{"_index":"likecs_down_db","_type":"_doc","_id":"53148","_score":13.291418,"_source":{"id":"53148","title":"\u7eafCSS\u7ed8\u5236\u5e26\u9634\u5f71\u548c\u9ad8\u4eae\u5149\u6548\u7684\u903c\u771f3D\u7403\u4f53\u6548\u679c\u6e90\u7801","spidertime":"1623058042","contenttime":"1672281040","pageimage":"https:\/\/img.jbzj.com\/do\/uploads\/litimg\/190223\/142U63E218.jpg","tag":"\u7eafCSS|\u7ed8\u5236|3D\u7403\u4f53|\u6e90\u7801","cate1":"CSS\u7279\u6548","attr1":"5KB"},"highlight":{"title":["纯CSS#em#绘#/em#制带阴影#em#和#/em#高亮光效#em#的#/em#逼#em#真#/em#3D球体效果源码"]}},{"_index":"likecs_down_db","_type":"_doc","_id":"37448","_score":13.090284,"_source":{"id":"37448","title":"HTML5+WebGL Three.js\u5b9e\u73b0\u8d85\u903c\u771f\u7684\u6d41\u52a8\u6c34\u6d41\u52a8\u753b\u6548\u679c\u6e90\u7801","spidertime":"1622962877","contenttime":"1622962877","pageimage":"https:\/\/img.jbzj.com\/do\/uploads\/litimg\/170831\/145501361Y9.jpg","tag":"WebGL|HTML5|\u6e90\u7801|\u52a8\u753b","cate1":"html5","attr1":"132KB"},"highlight":{"title":["HTML5+WebGL Three.js实现超逼#em#真#/em##em#的#/em##em#流#/em#动水#em#流#/em#动画效果源码"]}}]}}"
</pre><!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="content-language" content="zh-CN" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
    <title>你真的了解回流和重绘吗 - 爱码网</title>
     
<meta name="keywords" content="你真的了解回流和重绘吗" />
<meta name="description" content="目录ECharts异步加载ECharts
数据可视化在过去几年中取得了巨大进展。开发人员对可视化产品的期望不再是简单的图表创建工具，而是在交互、性能、数据处理等方面有更高的要求。
chart.setOption({
    color: [" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="/statics/css/base.css?v=2.7" />
<script src="/statics/js/detail.min.js?v=2.2"></script>   
<script>
   $(document).ready(function () { 
		$("img").error(function () {
			$(this).hide();
		}); 
	}); 
</script>
</head>
<body class="home-template dtpg">
<nav class="main-nav clearfix">
    <div class="inner">
        <ul class="nav">
            <li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-886"><a href="/" title="爱码网">首页</a></li>
                        <li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-886"><a href="/nav/1.html" title="前端技术">前端技术</a></li>
                        <li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-886"><a href="/nav/9.html" title="编程语言">编程语言</a></li>
                        <li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-886"><a href="/nav/31.html" title="人工智能">人工智能</a></li>
                        <li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-886"><a href="/nav/41.html" title="运维知识">运维知识</a></li>
                        <li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-886"><a href="/nav/52.html" title="资源下载">资源下载</a></li>
                        <li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-886"><a href="/nav/68.html" title="常用小工具">常用小工具</a></li>
                        <li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-886"><a href="/nav/72.html" title="技术问答">技术问答</a></li>
                    </ul>            
	 
    </div>
</nav><div class="site-wrapper">
 
    <header style="height: auto;padding: 10px 0px;" class="main-header">
        <div style="max-width:910px" class="main-header-content inner">
                        <h1 class="page-title"><a href="/show-43620.html" title="你真的了解回流和重绘吗">你真的了解回流和重绘吗</a></h1>
            
        </div>

    </header>
    <main class="content" role="main">
	

        <div class="leftbox">
    <article class="post tag-uifont tag-webview">
        <header class="post-header">
            <footer class="tc"> chenjg 
                <time class="post-date" datetime="2018-12-10">2018-12-10</time>
            </footer>
        </header>
        <section class="post-content">
            <div class="contentbef">  
                  
                              </div>

            
                                    
<!--done-->
<div id="topics">
	<div class="post">
		
		
		<div class="postBody">
			<div id="likecs_post_body" class="blogpost-body cnblogs-markdown">
<p>回流和重绘可以说是每一个web开发者都经常听到的两个词语，我也不例外，可是一直不是很清楚这两步具体做了什么事情。最近由于部门内部要做分享，所以对其进行了一些研究，看了一些博客和书籍，整理了一些内容并且结合自己的体会，写了这篇文章，希望可以帮助到大家。</p>
<h3 id="浏览器的渲染过程">浏览器的渲染过程</h3>
<p>本文先从浏览器的渲染过程来从头到尾的讲解一下回流重绘，如果大家想直接看如何减少回流和重绘，可以跳到后面。（这个渲染过程来自<a href="https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-tree-construction?hl=zh-cn" rel="nofollow" target="_blank">MDN</a>）</p>
<p><img src="/default/index/img?u=aHR0cHM6Ly9jYW1vLmdpdGh1YnVzZXJjb250ZW50LmNvbS85NzI5MzcxNmE4YjZkZDJmY2ZjNGFlNTM2NGUzN2Y4ZjU1YWZmYWE0LzY4NzQ3NDcwNzMzYTJmMmY3NTczNjU3MjJkNjc2ZjZjNjQyZDYzNjQ2ZTJlNzg2OTc0NzUyZTY5NmYyZjMyMzAzMTM4MmYzOTJmMzMyZjMxMzYzNTM5NjQ2MjMxMzQ2NTM3MzczMzY2Mzk2MzYzM2Y3NzNkMzYzMjM0MjY2ODNkMzIzODM5MjY2NjNkNzA2ZTY3MjY3MzNkMzQzMTMwMzUzNw==" alt="webkit渲染过程"></p>
<p>从上面这个图上，我们可以看到，浏览器渲染过程如下：</p>
<ol>
<li>解析HTML，生成DOM树，解析CSS，生成CSSOM树</li>
<li>将DOM树和CSSOM树结合，生成渲染树(Render Tree)</li>
<li>Layout(回流):根据生成的渲染树，进行回流(Layout)，得到节点的几何信息（位置，大小）</li>
<li>Painting(重绘):根据渲染树以及回流得到的几何信息，得到节点的绝对像素</li>
<li>Display:将像素发送给GPU，展示在页面上。（这一步其实还有很多内容，比如会在GPU将多个合成层合并为同一个层，并展示在页面中。而css3硬件加速的原理则是新建合成层，这里我们不展开，之后有机会会写一篇博客）</li>
</ol>
<p>渲染过程看起来很简单，让我们来具体了解下每一步具体做了什么。</p>
<h3 id="生成渲染树">生成渲染树</h3>
<p><img src="/default/index/img?u=L2RlZmF1bHQvaW5kZXgvaW1nP3U9YUhSMGNITTZMeTlwYldjeU1ERTRMbU51WW14dlozTXVZMjl0TDJKc2IyY3ZPVGt6TXpRekx6SXdNVGd4TWk4NU9UTXpORE10TWpBeE9ERXlNVEF5TXpFeU5UQTJNakF0TVRjd09UazJORE15TUM1d2JtYz0="></p>
<p>为了构建渲染树，浏览器主要完成了以下工作：</p>
<ol>
<li>从DOM树的根节点开始遍历每个可见节点。</li>
<li>对于每个可见的节点，找到CSSOM树中对应的规则，并应用它们。</li>
<li>根据每个可见节点以及其对应的样式，组合生成渲染树。</li>
</ol>
<p>第一步中，既然说到了要遍历可见的节点，那么我们得先知道，什么节点是不可见的。不可见的节点包括：</p>
<ul>
<li>一些不会渲染输出的节点，比如script、meta、link等。</li>
<li>一些通过css进行隐藏的节点。比如display:none。注意，利用visibility和opacity隐藏的节点，还是会显示在渲染树上的。只有display:none的节点才不会显示在渲染树上。</li>
</ul>
<p><strong>注意：渲染树只包含可见的节点</strong></p>
<h3 id="回流">回流</h3>
<p>前面我们通过构造渲染树，我们将可见DOM节点以及它对应的样式结合起来，可是我们还需要计算它们在设备视口(viewport)内的确切位置和大小，这个计算的阶段就是回流。</p>
<p>为了弄清每个对象在网站上的确切大小和位置，浏览器从渲染树的根节点开始遍历，我们可以以下面这个实例来表示：</p>
<pre class="html"><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;meta name="viewport" content="width=device-width,initial-scale=1"&gt;
    &lt;title&gt;Critial Path: Hello world!&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div style="width: 50%"&gt;
      &lt;div style="width: 50%"&gt;Hello world!&lt;/div&gt;
    &lt;/div&gt;
  &lt;/body&gt;
&lt;/html&gt;</code></pre>
<p>我们可以看到，第一个div将节点的显示尺寸设置为视口宽度的50%，第二个div将其尺寸设置为父节点的50%。而在回流这个阶段，我们就需要根据视口具体的宽度，将其转为实际的像素值。（如下图）</p>
<p><img src="/default/index/img?u=L2RlZmF1bHQvaW5kZXgvaW1nP3U9YUhSMGNITTZMeTlwYldjeU1ERTRMbU51WW14dlozTXVZMjl0TDJKc2IyY3ZPVGt6TXpRekx6SXdNVGd4TWk4NU9UTXpORE10TWpBeE9ERXlNVEF5TXpFeU16STJNRFV0T0RnNU5EQTFNREkwTG5CdVp3PT0="></p>
<h3 id="重绘">重绘</h3>
<p>最终，我们通过构造渲染树和回流阶段，我们知道了哪些节点是可见的，以及可见节点的样式和具体的几何信息(位置、大小)，那么我们就可以将渲染树的每个节点都转换为屏幕上的实际像素，这个阶段就叫做重绘节点。</p>
<p>既然知道了浏览器的渲染过程后，我们就来探讨下，何时会发生回流重绘。</p>
<h3 id="何时发生回流重绘">何时发生回流重绘</h3>
<p>我们前面知道了，回流这一阶段主要是计算节点的位置和几何信息，那么当页面布局和几何信息发生变化的时候，就需要回流。比如以下情况：</p>
<ul>
<li>添加或删除可见的DOM元素</li>
<li>元素的位置发生变化</li>
<li>元素的尺寸发生变化（包括外边距、内边框、边框大小、高度和宽度等）</li>
<li>内容发生变化，比如文本变化或图片被另一个不同尺寸的图片所替代。</li>
<li>页面一开始渲染的时候（这肯定避免不了）</li>
<li>浏览器的窗口尺寸变化（因为回流是根据视口的大小来计算元素的位置和大小的）</li>
</ul>
<p><strong>注意：回流一定会触发重绘，而重绘不一定会回流</strong></p>
<p>根据改变的范围和程度，渲染树中或大或小的部分需要重新计算，有些改变会触发整个页面的重排，比如，滚动条出现的时候或者修改了根节点。</p>
<h3 id="浏览器的优化机制">浏览器的优化机制</h3>
<p>现代的浏览器都是很聪明的，由于每次重排都会造成额外的计算消耗，因此大多数浏览器都会通过队列化修改并批量执行来优化重排过程。浏览器会将修改操作放入到队列里，直到过了一段时间或者操作达到了一个阈值，才清空队列。但是！<strong>当你获取布局信息的操作的时候，会强制队列刷新</strong>，比如当你访问以下属性或者使用以下方法：</p>
<ul>
<li>offsetTop、offsetLeft、offsetWidth、offsetHeight</li>
<li>scrollTop、scrollLeft、scrollWidth、scrollHeight</li>
<li>clientTop、clientLeft、clientWidth、clientHeight</li>
<li>getComputedStyle()</li>
<li>getBoundingClientRect</li>
<li>具体可以访问这个网站：<a href="https://gist.github.com/paulirish/5d52fb081b3570c81e3a" class="uri" rel="nofollow" target="_blank">https://gist.github.com/paulirish/5d52fb081b3570c81e3a</a>
</li>
</ul>
<p>以上属性和方法都需要返回最新的布局信息，因此浏览器不得不清空队列，触发回流重绘来返回正确的值。因此，我们在修改样式的时候，<strong>最好避免使用上面列出的属性，他们都会刷新渲染队列。</strong>如果要使用它们，最好将值缓存起来。</p>
<h3 id="减少回流和重绘">减少回流和重绘</h3>
<p>好了，到了我们今天的重头戏，前面说了这么多背景和理论知识，接下来让我们谈谈如何减少回流和重绘。</p>
<h3 id="最小化重绘和重排">最小化重绘和重排</h3>
<p>由于重绘和重排可能代价比较昂贵，因此最好就是可以减少它的发生次数。为了减少发生次数，我们可以合并多次对DOM和样式的修改，然后一次处理掉。考虑这个例子</p>
<pre class="javascript"><code>const el = document.getElementById('test');
el.style.padding = '5px';
el.style.borderLeft = '1px';
el.style.borderRight = '2px';</code></pre>
<p>例子中，有三个样式属性被修改了，每一个都会影响元素的几何结构，引起回流。当然，大部分现代浏览器都对其做了优化，因此，只会触发一次重排。但是如果在旧版的浏览器或者在上面代码执行的时候，有其他代码访问了布局信息(上文中的会触发回流的布局信息)，那么就会导致三次重排。</p>
<p>因此，我们可以合并所有的改变然后依次处理，比如我们可以采取以下的方式：</p>
<ul>
<li>
<p>使用cssText</p>
<pre class="javascript"><code>const el = document.getElementById('test');
el.style.cssText += 'border-left: 1px; border-right: 2px; padding: 5px;';</code></pre>
</li>
<li>
<p>修改CSS的class</p>
<pre class="javascript"><code>const el = document.getElementById('test');
el.className += ' active';</code></pre>
</li>
</ul>
<h3 id="批量修改dom">批量修改DOM</h3>
<p>当我们需要对DOM对一系列修改的时候，可以通过以下步骤减少回流重绘次数：</p>
<ol>
<li>使元素脱离文档流</li>
<li>对其进行多次修改</li>
<li>将元素带回到文档中。</li>
</ol>
<p>该过程的第一步和第三步可能会引起回流，但是经过第一步之后，对DOM的所有修改都不会引起回流，因为它已经不在渲染树了。</p>
<p>有三种方式可以让DOM脱离文档流：</p>
<ul>
<li>隐藏元素，应用修改，重新显示</li>
<li>使用文档片段(document fragment)在当前DOM之外构建一个子树，再把它拷贝回文档。</li>
<li>将原始元素拷贝到一个脱离文档的节点中，修改节点后，再替换原始的元素。</li>
</ul>
<p>考虑我们要执行一段批量插入节点的代码：</p>
<pre class="javascript"><code>function appendDataToElement(appendToElement, data) {
    let li;
    for (let i = 0; i &lt; data.length; i++) {
        li = document.createElement('li');
        li.textContent = 'text';
        appendToElement.appendChild(li);
    }
}

const ul = document.getElementById('list');
appendDataToElement(ul, data);</code></pre>
<p>如果我们直接这样执行的话，由于每次循环都会插入一个新的节点，会导致浏览器回流一次。</p>
<p>我们可以使用这三种方式进行优化:</p>
<p><strong>隐藏元素，应用修改，重新显示</strong></p>
<p>这个会在展示和隐藏节点的时候，产生两次重绘</p>
<pre class="javascript"><code>function appendDataToElement(appendToElement, data) {
    let li;
    for (let i = 0; i &lt; data.length; i++) {
        li = document.createElement('li');
        li.textContent = 'text';
        appendToElement.appendChild(li);
    }
}
const ul = document.getElementById('list');
ul.style.display = 'none';
appendDataToElement(ul, data);
ul.style.display = 'block';</code></pre>
<p><strong>使用文档片段(document fragment)在当前DOM之外构建一个子树，再把它拷贝回文档</strong></p>
<pre class="javascript"><code>const ul = document.getElementById('list');
const fragment = document.createDocumentFragment();
appendDataToElement(fragment, data);
ul.appendChild(fragment);</code></pre>
<p><strong>将原始元素拷贝到一个脱离文档的节点中，修改节点后，再替换原始的元素。</strong></p>
<pre class="javascript"><code>const ul = document.getElementById('list');
const clone = ul.cloneNode(true);
appendDataToElement(clone, data);
ul.parentNode.replaceChild(clone, ul);</code></pre>
<p>对于上述那种情况，我写了一个<a href="https://chenjigeng.github.io/example/share/%E9%81%BF%E5%85%8D%E5%9B%9E%E6%B5%81%E9%87%8D%E7%BB%98/%E6%89%B9%E9%87%8F%E4%BF%AE%E6%94%B9DOM.html" rel="nofollow" target="_blank">demo</a>来测试修改前和修改后的性能。然而实验结果不是很理想。</p>
<p><strong>原因：原因其实上面也说过了，浏览器会使用队列来储存多次修改，进行优化，所以对这个优化方案，我们其实不用优先考虑。</strong></p>
<h3 id="避免触发同步布局事件">避免触发同步布局事件</h3>
<p>上文我们说过，当我们访问元素的一些属性的时候，会导致浏览器强制清空队列，进行强制同步布局。举个例子，比如说我们想将一个p标签数组的宽度赋值为一个元素的宽度，我们可能写出这样的代码：</p>
<pre class="javascript"><code>function initP() {
    for (let i = 0; i &lt; paragraphs.length; i++) {
        paragraphs[i].style.width = box.offsetWidth + 'px';
    }
}</code></pre>
<p>这段代码看上去是没有什么问题，可是其实会造成很大的性能问题。在每次循环的时候，都读取了box的一个offsetWidth属性值，然后利用它来更新p标签的width属性。这就导致了每一次循环的时候，浏览器都必须先使上一次循环中的样式更新操作生效，才能响应本次循环的样式读取操作。每一次循环都会强制浏览器刷新队列。我们可以优化为:</p>
<pre class="javascript"><code>const width = box.offsetWidth;
function initP() {
    for (let i = 0; i &lt; paragraphs.length; i++) {
        paragraphs[i].style.width = width + 'px';
    }
}</code></pre>
<p>同样，我也写了个<a rel="nofollow" target="_blank">demo</a>来比较两者的性能差异。你可以自己点开这个demo体验下。这个对比差距就比较明显。</p>
<h3 id="对于复杂动画效果使用绝对定位让其脱离文档流">对于复杂动画效果,使用绝对定位让其脱离文档流</h3>
<p>对于复杂动画效果，由于会经常的引起回流重绘，因此，我们可以使用绝对定位，让它脱离文档流。否则会引起父元素以及后续元素频繁的回流。这个我们就直接上个<a href="https://chenjigeng.github.io/example/share/%E9%81%BF%E5%85%8D%E5%9B%9E%E6%B5%81%E9%87%8D%E7%BB%98/%E5%B0%86%E5%A4%8D%E6%9D%82%E5%8A%A8%E7%94%BB%E6%B5%AE%E5%8A%A8%E5%8C%96.html" rel="nofollow" target="_blank">例子</a>。</p>
<p>打开这个例子后，我们可以打开控制台，控制台上会输出当前的帧数(虽然不准)。</p>
<p><img src="/default/index/img?u=L2RlZmF1bHQvaW5kZXgvaW1nP3U9YUhSMGNITTZMeTlwYldjeU1ERTRMbU51WW14dlozTXVZMjl0TDJKc2IyY3ZPVGt6TXpRekx6SXdNVGd4TWk4NU9UTXpORE10TWpBeE9ERXlNVEF5TXpFd05EZzJNRGt0TmpFNU1ESXlORGswTG5CdVp3PT0="></p>
<p>从上图中，我们可以看到，帧数一直都没到60。这个时候，只要我们点击一下那个按钮，把这个元素设置为绝对定位，帧数就可以稳定60。</p>
<h3 id="css3硬件加速gpu加速">css3硬件加速（GPU加速）</h3>
<p>比起考虑如何减少回流重绘，我们更期望的是，根本不要回流重绘。这个时候，css3硬件加速就闪亮登场啦！！</p>
<p><strong>划重点：使用css3硬件加速，可以让transform、opacity、filters这些动画不会引起回流重绘 。但是对于动画的其它属性，比如background-color这些，还是会引起回流重绘的，不过它还是可以提升这些动画的性能。</strong></p>
<p>本篇文章只讨论如何使用，暂不考虑其原理，之后有空会另外开篇文章说明。</p>
<h4 id="如何使用">如何使用</h4>
<p>常见的触发硬件加速的css属性：</p>
<ul>
<li>transform</li>
<li>opacity</li>
<li>filters</li>
<li>Will-change</li>
</ul>
<h4 id="效果">效果</h4>
<p>我们可以先看个<a href="https://chenjigeng.github.io/example/share/%E5%AF%B9%E6%AF%94gpu%E5%8A%A0%E9%80%9F/gpu%E5%8A%A0%E9%80%9F-transform.html" rel="nofollow" target="_blank">例子</a>。我通过使用chrome的Performance捕获了一段时间的回流重绘情况，实际结果如下图：</p>
<p><img src="/default/index/img?u=L2RlZmF1bHQvaW5kZXgvaW1nP3U9YUhSMGNITTZMeTlwYldjeU1ERTRMbU51WW14dlozTXVZMjl0TDJKc2IyY3ZPVGt6TXpRekx6SXdNVGd4TWk4NU9UTXpORE10TWpBeE9ERXlNVEF5TXpBNU5UazVPRGN0TVRReE9UTTBPRFkwTkM1d2JtYz0="></p>
<p>从图中我们可以看出，在动画进行的时候，没有发生任何的回流重绘。如果感兴趣你也可以自己做下实验。</p>
<h4 id="重点">重点</h4>
<ul>
<li>使用css3硬件加速，可以让transform、opacity、filters这些动画不会引起回流重绘</li>
<li>对于动画的其它属性，比如background-color这些，还是会引起回流重绘的，不过它还是可以提升这些动画的性能。</li>
</ul>
<h4 id="css3硬件加速的坑">css3硬件加速的坑</h4>
<ul>
<li><p>如果你为太多元素使用css3硬件加速，会导致内存占用较大，会有性能问题。</p></li>
<li><p>在GPU渲染字体会导致抗锯齿无效。这是因为GPU和CPU的算法不同。因此如果你不在动画结束的时候关闭硬件加速，会产生字体模糊。</p></li>
</ul>
<h3 id="总结">总结</h3>
<p>本文主要讲了浏览器的渲染过程、浏览器的优化机制以及如何减少甚至避免回流和重绘，希望可以帮助大家更好的理解回流重绘。</p>
<h3 id="参考文献">参考文献</h3>
<ul>
<li><a href="https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-tree-construction?hl=zh-cn" rel="nofollow" target="_blank">渲染树构建、布局及绘制</a></li>
<li>高性能Javascript</li>
</ul>
</div>




		</div>
		
	</div>
	</div>
<!--end: topics 文章、评论容器-->
 
                    
            
                <div style="margin-top: 10px;">
                  </div> 
        </section>
	 
        <footer class="post-footer">
            <section class="author">
                                <p>分类：</p> 
                                                                <p>技术点：</p>
                                            </section>
        </footer>
        <p class="mt10">相关文章：</p>
        <div style="width: 100%;" class="contentcard">
      
            <div style="width: 100%;height: auto;" class="carditem litem clearfix"> 
                    <ul style="padding-left: 0rem;" class="cardcont">
                                                    <li>
                                <a  title="重绘和回流" href='/show-203428686.html' target="_blank"></a> 
                                <span>2021-09-06</span>
                            </li>
                                                        <li>
                                <a  title="重绘和重排（回流）" href='/show-203328877.html' target="_blank"></a> 
                                <span>2021-09-06</span>
                            </li>
                                                        <li>
                                <a  title="你真的了解setState()吗？" href='/show-70604.html' target="_blank"></a> 
                                <span>2019-08-25</span>
                            </li>
                                                        <li>
                                <a  title="你真的了解foreach吗？" href='/show-84495.html' target="_blank"></a> 
                                <span>2019-12-06</span>
                            </li>
                                                        <li>
                                <a  title="你真的了解JMM吗？" href='/show-85075.html' target="_blank"></a> 
                                <span>2019-12-11</span>
                            </li>
                                                        <li>
                                <a  title="HashMap 你真的了解吗？" href='/show-14970.html' target="_blank"></a> 
                                <span>2018-04-19</span>
                            </li>
                                                        <li>
                                <a  title="你真的了解Scrum吗？" href='/show-30632.html' target="_blank"></a> 
                                <span>2021-08-24</span>
                            </li>
                                                </ul>
               </div>   
         </div>
    </article>

  

</div>

<div class="rigthbox contentcard mt10">
 
          <div style="height: auto;" class="carditem litem">
    <div class="cardtit">猜你喜欢 </div>
        <ul class="cardcont">
                                 <li>
                    <a title="【开发必看】你真的了解回流和重绘吗？" href="/show-48070.html" target="_blank"></a> 
                    <span>2019-01-14</span>
                </li>
                                     <li>
                    <a title="你真的了解 Cookie 和 Session 吗" href="/show-66159.html" target="_blank"></a> 
                    <span>2019-07-23</span>
                </li>
                                     <li>
                    <a title="你真的了解 Session 和 Cookie 吗？" href="/show-136887.html" target="_blank"></a> 
                    <span>2021-07-18</span>
                </li>
                                     <li>
                    <a title="你真的了解127.0.0.1和0.0.0.0吗～" href="/show-203290730.html" target="_blank"></a> 
                    <span>2021-10-02</span>
                </li>
                                     <li>
                    <a title="你真的了解weight和weightSum吗？" href="/show-203290733.html" target="_blank"></a> 
                    <span>2021-04-22</span>
                </li>
                                     <li>
                    <a title="回流和重绘" href="/show-1015171.html" target="_blank"></a> 
                    <span>2022-01-01</span>
                </li>
                            </ul>
   </div> 

<div style="height: auto;" class="carditem litem">
    <div class="cardtit">相关资源 </div>
        <ul class="cardcont">
              
                                         <li>
                        <a title="html5 canvas绘制的逼真3D瀑布流动画特效源码下载" href="/down-52011.html" target="_blank">下载</a> 
                        <span>2022-11-30</span>
                    </li>
                                             <li>
                        <a title="遇见你真好 遇见你真好字体,遇见你真好字体下载下载" href="/down-154770.html" target="_blank">下载</a> 
                        <span>2021-11-02</span>
                    </li>
                                             <li>
                        <a title="月光和你 Regular字体,月光和你字体下载下载" href="/down-224615.html" target="_blank">下载</a> 
                        <span>2022-12-26</span>
                    </li>
                                             <li>
                        <a title="纯CSS绘制带阴影和高亮光效的逼真3D球体效果源码下载" href="/down-53148.html" target="_blank">下载</a> 
                        <span>2022-12-29</span>
                    </li>
                                             <li>
                        <a title="HTML5+WebGL Three.js实现超逼真的流动水流动画效果源码下载" href="/down-37448.html" target="_blank">下载</a> 
                        <span>2021-06-06</span>
                    </li>
                                </ul>
   </div>
   
    <div style="height: auto;" class="carditem litem">
     <div class="cardtit">相似解决方案 </div>
         <ul class="cardcont">
                          </ul>
    </div>
  
   <div style="height: auto;background-color: #ddd;text-align: center;" class="carditem litem">
    <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-5446233687289962" data-ad-slot="2607637140"  data-ad-format="auto"  data-full-width-responsive="true"></ins><script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
</div> 
   <div  style="height: auto;" class="carditem litem mt20">
    <div class="cardtit">热门标签  </div>
    <div class="tagbox">
                    <a target="_blank" title="Java" href="/default/index/tags?cid=164&cname=Java" >Java</a>
                        <a target="_blank" title="Python" href="/default/index/tags?cid=367&cname=Python" >Python</a>
                        <a target="_blank" title="linux" href="/default/index/tags?cid=274&cname=linux" >linux</a>
                        <a target="_blank" title="javascript" href="/default/index/tags?cid=169&cname=javascript" >javascript</a>
                        <a target="_blank" title="Mysql" href="/default/index/tags?cid=237&cname=Mysql" >Mysql</a>
                        <a target="_blank" title="C#" href="/default/index/tags?cid=187&cname=C%23" >C#</a>
                        <a target="_blank" title="Docker" href="/default/index/tags?cid=243&cname=Docker" >Docker</a>
                        <a target="_blank" title="算法" href="/default/index/tags?cid=344&cname=%E7%AE%97%E6%B3%95" >算法</a>
                        <a target="_blank" title="前端" href="/default/index/tags?cid=160&cname=%E5%89%8D%E7%AB%AF" >前端</a>
                        <a target="_blank" title="SpringBoot" href="/default/index/tags?cid=168&cname=SpringBoot" >SpringBoot</a>
                        <a target="_blank" title="Redis" href="/default/index/tags?cid=227&cname=Redis" >Redis</a>
                        <a target="_blank" title="Vue" href="/default/index/tags?cid=236&cname=Vue" >Vue</a>
                        <a target="_blank" title="spring" href="/default/index/tags?cid=696&cname=spring" >spring</a>
                        <a target="_blank" title="设计模式" href="/default/index/tags?cid=632&cname=%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F" >设计模式</a>
                        <a target="_blank" title=".net core" href="/default/index/tags?cid=381&cname=.net+core" >.net core</a>
                        <a target="_blank" title=".net" href="/default/index/tags?cid=300&cname=.net" >.net</a>
                        <a target="_blank" title="kubernetes" href="/default/index/tags?cid=2179&cname=kubernetes" >kubernetes</a>
                        <a target="_blank" title="c++" href="/default/index/tags?cid=312&cname=c%2B%2B" >c++</a>
                        <a target="_blank" title="数据库" href="/default/index/tags?cid=284&cname=%E6%95%B0%E6%8D%AE%E5%BA%93" >数据库</a>
                        <a target="_blank" title="数据结构" href="/default/index/tags?cid=247&cname=%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84" >数据结构</a>
                        <a target="_blank" title="大数据" href="/default/index/tags?cid=888&cname=%E5%A4%A7%E6%95%B0%E6%8D%AE" >大数据</a>
                        <a target="_blank" title="js" href="/default/index/tags?cid=159&cname=js" >js</a>
                        <a target="_blank" title="机器学习" href="/default/index/tags?cid=171&cname=%E6%9C%BA%E5%99%A8%E5%AD%A6%E4%B9%A0" >机器学习</a>
                        <a target="_blank" title="微服务" href="/default/index/tags?cid=832&cname=%E5%BE%AE%E6%9C%8D%E5%8A%A1" >微服务</a>
                        <a target="_blank" title="Android" href="/default/index/tags?cid=282&cname=Android" >Android</a>
                        <a target="_blank" title="Go" href="/default/index/tags?cid=839&cname=Go" >Go</a>
                        <a target="_blank" title="程序员" href="/default/index/tags?cid=327&cname=%E7%A8%8B%E5%BA%8F%E5%91%98" >程序员</a>
                        <a target="_blank" title="面试" href="/default/index/tags?cid=637&cname=%E9%9D%A2%E8%AF%95" >面试</a>
                        <a target="_blank" title="JVM" href="/default/index/tags?cid=727&cname=JVM" >JVM</a>
                        <a target="_blank" title="ASP.net core" href="/default/index/tags?cid=179&cname=ASP.net+core" >ASP.net core</a>
                        <a target="_blank" title="云原生" href="/default/index/tags?cid=22056&cname=%E4%BA%91%E5%8E%9F%E7%94%9F" >云原生</a>
                        <a target="_blank" title="人工智能" href="/default/index/tags?cid=270&cname=%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD" >人工智能</a>
                        <a target="_blank" title="后端" href="/default/index/tags?cid=1089&cname=%E5%90%8E%E7%AB%AF" >后端</a>
                        <a target="_blank" title="PHP" href="/default/index/tags?cid=281&cname=PHP" >PHP</a>
                        <a target="_blank" title="git" href="/default/index/tags?cid=226&cname=git" >git</a>
                        <a target="_blank" title="CSS" href="/default/index/tags?cid=817&cname=CSS" >CSS</a>
                        <a target="_blank" title="golang" href="/default/index/tags?cid=409&cname=golang" >golang</a>
                        <a target="_blank" title="k8s" href="/default/index/tags?cid=5067&cname=k8s" >k8s</a>
                        <a target="_blank" title="Nginx" href="/default/index/tags?cid=373&cname=Nginx" >Nginx</a>
                        <a target="_blank" title="Django" href="/default/index/tags?cid=634&cname=Django" >Django</a>
                        <a target="_blank" title="mybatis" href="/default/index/tags?cid=720&cname=mybatis" >mybatis</a>
                        <a target="_blank" title="深度学习" href="/default/index/tags?cid=345&cname=%E6%B7%B1%E5%BA%A6%E5%AD%A6%E4%B9%A0" >深度学习</a>
                        <a target="_blank" title="多线程" href="/default/index/tags?cid=986&cname=%E5%A4%9A%E7%BA%BF%E7%A8%8B" >多线程</a>
                        <a target="_blank" title="React" href="/default/index/tags?cid=560&cname=React" >React</a>
                        <a target="_blank" title="架构" href="/default/index/tags?cid=2070&cname=%E6%9E%B6%E6%9E%84" >架构</a>
                        <a target="_blank" title="devops" href="/default/index/tags?cid=2662&cname=devops" >devops</a>
                        <a target="_blank" title="爬虫" href="/default/index/tags?cid=905&cname=%E7%88%AC%E8%99%AB" >爬虫</a>
                        <a target="_blank" title="云计算" href="/default/index/tags?cid=361&cname=%E4%BA%91%E8%AE%A1%E7%AE%97" >云计算</a>
                        <a target="_blank" title="Spring Boot" href="/default/index/tags?cid=201&cname=Spring+Boot" >Spring Boot</a>
                        <a target="_blank" title="LeetCode" href="/default/index/tags?cid=342&cname=LeetCode" >LeetCode</a>
                </div>
       
   </div>
   
        <div id="rightadbox" style="height: 300px;background-color: #ddd;text-align: center;" class="carditem litem">
            <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-5446233687289962" data-ad-slot="2607637140"  data-ad-format="auto"  data-full-width-responsive="true"></ins><script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
        </div> 
</div>
<div class="clearfix"></div>
</main>
    
<div class="yllinks alink"></div>
 

<footer class="site-footer clearfix">
<section class="copyright">By &copy; 2026 <a href="/" title="www.likecs.com">likecs</a> 版权所有,<br/>本站所有数据收集于网络如有侵犯到您的权益请联系 进行下架处理1。 </section>
<section class="poweredby">  <a target="_blank" href="https://beian.miit.gov.cn/">粤ICP备22038628号</a>Powered By  WordPress </section>
<script charset="UTF-8" id="LA_COLLECT" src="//sdk.51.la/js-sdk-pro.min.js"></script>
<script>LA.init({id: "Je3PjbvUssp6BbvY",ck: "Je3PjbvUssp6BbvY"})</script>
<script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?2eb031e42d29b7c1a1f16948d2ae2a9f";
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();
</script>
</footer>  
</div>
<script>
    $(function(){
                    $(".post-content").append('<p style="padding: 20px;color: #cacaca;">原文链接：https://www.cnblogs.com/chenjg/p/10099886.html</p>')  
            }) 
</script> 
</body>
</html>