zoukankan      html  css  js  c++  java
  • 加载页面时如何提升性能

    将要加载的脚本放到body底部:

    最简单且最常用的方法,当页面加载完DOM元素之后再加载脚本文件
    

    减少引入脚本数量

    若有多个脚本文件,可以使用YUI Compressor压缩为一个文件
    

    使用无阻塞脚本

    load事件之后在下载脚本
    

    延迟脚本

    使用defer属性 <script src='test.js' defer></script>
    

    在js中动态创建脚本元素

    var script = document.createElement('script');
        script.src = path;
        script.type = 'text/javascript';
        head.appendChild(script);
    

    使用XMLHttpRequest脚本注入

    var xhr= new XMLHttpRequest();
    xhr.open('get', 'test.js', true);
    xhr.onreadystatechange = function(){ 
    	if (xhr.readyState == 4){ 
    		if (xhr.status >= 200 && xhr.status < 300 || xhr.status == 304){ 
    			var script = document.createElement (“script”);
    				script.type = “text/javascript”; 
    				script.text = xhr.responseText; 
    				document.body.appendChild(script); 
    		} 
    	} 
    };
    xhr.send(null);
  • 相关阅读:
    css3-文本新增属性
    css3新增的伪类和伪元素
    git小记
    css3笔记
    jQuery(三)
    jQuery笔记(二)
    <转>HTML、CSS、font-family:中文字体的英文名称
    jQuery笔记
    DOM父节点、子节点例子
    DOM之节点类型加例子
  • 原文地址:https://www.cnblogs.com/hbujt/p/5586387.html
Copyright © 2011-2022 走看看