IE8+等实行并行下载，各JS下载不受影响，但仍阻塞其他资源下载 如： 图片

所以首要规则就是：将JS放在body底部（推荐）

加载100kb的单个文件比4个25kb的文件快（减少外链文件数量）（脚本合并）

《无阻塞脚本》

1延迟脚本

  defer: 有些浏览器不支持，等待页面加载后才执行       两者都并行下载

  h5规范中的async:（异步加载），脚本加载后自动执行

2 动态脚本加载

优势：易用和跨浏览器兼容（推荐）最好用到代码压缩工具

3 XMLHTTPRequest脚本注入

优点：兼容

但不立即执行也不能跨域

JS性能优化之怎么加载JS文件的更多相关文章

  1. 网页性能优化之异步加载js文件

    一个网页的有很多地方可以进行性能优化,比较常见的一种方式就是异步加载js脚本文件.在谈异步加载之前,先来看看浏览器加载js文件的原理. 浏览器加载 JavaScript 脚本,主要通过<scri ...

  2. requirejs：性能优化-及早并行加载

    为了提高页面的性能,通常情况下,我们希望资源尽可能地早地并行加载.这里有两个要点,首先是尽早,其次是并行. 通过data-main方式加载要尽可能地避免,因为它让requirejs.业务代码不必要地串 ...

  3. 前端性能优化(四)——网页加载更快的N种方式

    网站前端的用户体验,决定了用户是否想要继续使用网站以及网站的其他功能,网站的用户体验佳,可留住更多的用户.除此之外,前端优化得好,还可以为企业节约成本.那么我们应该如何对我们前端的页面进行性能优化呢? ...

  4. 前端性能优化--图片懒加载(lazyload image)

    话说前头: 上次写了一篇webpack的学习心得,webpack能做到提升前端的性能,其模块打包最终生成一个或少量的文件能够减少对服务端的请求.除此之外,本次的图片懒加载(当然不仅限于图片,还可以有视 ...

  5. Web前端性能优化——提高页面加载速度

    前言:  在同样的网络环境下,两个同样能满足你的需求的网站,一个“Duang”的一下就加载出来了,一个纠结了半天才出来,你会选择哪个?研究表明:用户最满意的打开网页时间是2-5秒,如果等待超过10秒, ...

  6. SPA应用性能优化（懒加载）

    前提: 如今开发方式都是采用前后台分离的方式,前台采用的方式则是单页面应用开发简称SPA,这种开发模式最大的一个特点就是将有所代码打包成了一个文件, 这会导致了一个问题就是如果这个应用过大,打出来的这 ...

  7. js与jquery的动态加载脚本文件

    jquery动态加载 jQuery.getScript(url,[callback]) js动态加载 function loadJs(name) { document.write('<scrip ...

  8. Hibernate 性能优化之懒加载

    针对数据库中的大数据,不希望特别早的加载到内存中,当用到它的时候才加载 懒加载分为:类的懒加载.集合的懒加载.单端关联的懒加载 类的懒加载    1.在默认情况下,类就是执行懒加载        2. ...

  9. 动态加载js和css

    开发过程中经常需要动态加载js和css,今天特意总结了一下常用的方法. 1.动态加载js 方法一:动态加载js文件 // 动态加载js脚本文件 function loadScript(url) { v ...

随机推荐

  1. 蓝桥杯-组素数-java

    /* (程序头部注释开始) * 程序的版权和版本声明部分 * Copyright (c) 2016, 广州科技贸易职业学院信息工程系学生 * All rights reserved. * 文件名称: ...

  2. Github+yeoman+gulp-angular初始化搭建angularjs前端项目框架

    在上篇文章里面我们说到了Github账号的申请与配置 那么当你有了Github账号并创建了一个自己的Github项目之后,首要的当然是搭建自己的项目框架啦! 本人对自己的定位是web前端狗,常用开发框 ...

  3. jquery通过ajax向后台发送（checkbox）数组，并在后台接收，（发送的数据是checkedbox）

    版权声明:本文为博主原创文章,未经博主允许不得转载. $(document).ready(function(){ var flag = 1; $("#delBtn").click( ...

  4. scala读取jar包外配置文件的方式

    在scala的开发过程中,经常会修改程序的参数,将这些参数放到配置文件中避免了重复编译,打包的过程 这里给出读取配置文件的三种方式 方式一: 这是最常见的读取配置文件方式 val postgprop ...

  5. Thinkphp3.2———配置模块

    一.配置格式 Thinkphp框架中的所有配置都是数组形式定义的的格式为: //项目配置 return array( 'DEFAULT_MODULE'=>'Index',//默认模块 'URL_ ...

  6. Qt 之 入门例程(二)

    本文以 Qt 中的 QtConcurrent::run() 函数为例,介绍如何将函数运行在单独的某一个线程中. 1  QtConcurrent::run() QtConcurrent 是一个命名空间, ...

  7. ng-option

    select 是 AngularJS 预设的一组directive.下面是其官网api doc给出的用法:AngularJS:select 大意是,select中的ngOption可以采用和ngRep ...

  8. Ubuntu 完全卸载MySQL 重装步骤

    sudo rm /var/lib/mysql/ -R 删除mysql的数据文件   sudo rm /etc/mysql/ -R 删除mqsql的配置文件   sudo apt-get autorem ...

  9. Visual Studio Code for mac

    Visual Studio Code for mac 将下载文件解压拖到应用程序文件夹即可 下载地址:链接: https://pan.baidu.com/s/1geHL5f1 密码: 2fdw

  10. OpenCV探索之路（十三）：详解掩膜mask

    在OpenCV中我们经常会遇到一个名字:Mask(掩膜).很多函数都使用到它,那么这个Mask到底什么呢? 一开始我接触到Mask这个东西时,我还真是一头雾水啊,也对无法理解Mask到底有什么用.经过 ...