????Web?????б???????????????????????????????????????Щ???????????
????· ?????? – ??????????????????????????????????????????????????????
????· ????????? – ???????????????????
????· ??????? – ?????????????????
????· ???? – ???????????? ??HTTP??HTTPS????
????· UI??? – ?????????????????????????????????????????ò??????????????
????· JavaScript?????? – ??????????JavaScript????
????· ????洢 – ?????????ò???????????????????浽????????cookies??????css????μ?HTML?淶 (HTML5) ?漲??????????????????????????????е??????’web database’??
???????????????
????Firefox?? Safari??????????????????????????????Firefox???Gecko —— Mozilla??????????棻Safari ?? Chrome ????? Webkit????Chrome?????????????????????Webkit?????????????????????Blink??Opera????????Google Chrome????????????????Presto???棬???Blink???棬??IE??????Trident?????????????????????????????????Webkit??Trident????????
??????????
?????????????????
????1. ????HTML????DOM???? ???????????????HTML/SVG/XHTML??CSS??javascript??????CSS?????CSS????????????javascript????????DOM API??CSSOM API??????DOM Tree??CSS
????2. Rule Tree??????????? ?????????????????????DOM Tree ?? CSS Rule Tree ?????? Rendering Tree????????Rendering Tree ??????????????DOM????????Щ??Header??display:none???????????????????????CSS ?? Rule Tree????????????????CSS Rule??????Rendering Tree??????Element?????DOM???
????3. ?????????? ???????element??е????λ??????layout??reflow?????
????4. ??????????? ??????ò?????Native GUI??API?????????????????? ?????????跱?????????????????????飬??????????????????????????????????????е?HTML???????????????????????????????????????????????????????????????????
???????????
????1. ???????η??????????????????????????????????????html?????
????2. ????????????html??????????????????????????CSS??JS?????
????3. ??????????CSS??JS??????????????????????CSS??JS?????
????4. ?????????????html?в???????????CSS??JS?????????????????????????????
????5. ???????????з??????<img>???????????????????????????????????????????????????????????????????????
????6. ???????????????????????????????????????????沼??????????????????????????????????
????7. ?????????????????????Javascript?????<script>???????????????
????8. Javascript???????????????????????????????????е????<div> ??style.display=”none”???????????????????????????????????ò???????????????
????9. ????????</html>????????????????????……
????Reflow??Repaint
?????????????????У??????????????н???????????????????????????????????泤????????????????????????????????????????????????repaint??reflow??????DOM???е???????????????????????????Щ?????????????????????????????????????????????????????????????????????ó????λ?????????????reflow????????????λ?á???С??????????????????????????С?????????????????????????Щ???????????????????????飬??????????repaint??
????reflow ???<html>?????????￡????μ??????е????γ???λ?????reflow?????У???????????Щframe??????????????????豻?????????
????Reflow??????Repaint??????????DOM Tree?????????????reflow?????????????reflow???п????????????????????????????reflow??????????reflow????CPU????????