zoukankan      html  css  js  c++  java
  • [读书笔记]高性能JS-加载执行

    for web browser have only one thread.while loading or execute js, the UI update will be blocked.some way to improve

    1.put js before </body> tag.so js will be loaded and run after page have been fully loaded.

    2.orangize script.combine some script to one to reduce HTTP request.

    3 no blocked js. loading js after window.onload run or DOMContentedloaded run.

    4 ***dynamic script

    use async script 

    some tip http://stackoverflow.com/questions/33470619/why-script-dom-element-can-be-async-loading/33471838#33471838

    var script=document.createElement('script');

    script.src='aa.js';

    document.getElementByTagName('head')[0].appendChild(script);

    this way, js will run as soon as loaded.if js need other api,we need to make sure api is run before this js code. so sequence of script is important.

    for w3c.we use one of attribute of script,onload to test if script has fully loaded.

    script.onload=function(){

      alert('loaded');

    }

    but for IE, we use readystatechange event;

    it has 4 state, state loaded and state4 complete important.

    but not sure which will happen first.if one of two happened,means script fully loaded.one of state run ,we cancel the event;we use

    script.onreadystatechange=function(){

    if(script.readyState==='complete' || script.readyState==='loaded'){

      script.onreadystatechange=null;

      alert('loaded');

    }

    }

    and combine two to one can make cross browser version.

  • 相关阅读:
    使用Wireshark 抓取数据包
    React Native 开发之 (07) 常用组件-View
    Swift开发之 (01) 语法
    React Native 开发之 (05) flexbox布局
    React Native 开发之 (06) JSX
    深入浅出Redis02 使用Redis数据库(String类型)
    React Native 开发之 (04) 例子讲解
    npm命令大全
    npm
    node.js
  • 原文地址:https://www.cnblogs.com/wz0107/p/4960127.html
Copyright © 2011-2022 走看看