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. jdbc连接数据库工具包模板

    jdbc连接数据库操作 jdbc连接数据库模板,收藏可做模板使用(小型工程,一般大工程都会用框架,c3p0等连接,不考虑此种方法!). 配置文件的使用(使用配置文件可以使我们后期的修改更加方便,当然, ...

  2. tpcc-mysql的使用

    1.tpcc-mysql的业务逻辑及其相关的几个表作用:      New-Order:新订单,一次完整的订单事务,几乎涉及到全部表      Payment:支付,主要对应 orders.histo ...

  3. NancyFx 2.0的开源框架的使用-Basic

    这是NancyFx开源框架中的Basic认证,学习一下! 首先当然是新建一个空的Web,BasicDemo 继续在项目中添加Nuget包,记得安装的Nuget包是最新的预发行版 Nancy Nancy ...

  4. VR全景加盟、720全景、VR全景技术平台-全国招商模式疯狂开始

    VR全景:互联网与实体店的完美结合  VR元年已过,VR项目.VR创业潮转为理性,VR行业分为两个方向:硬件和内容.硬件又分为VR头显和辅助设备,内容又分为VR全景和VR虚拟内容,如游戏.娱乐.根据行 ...

  5. Spring+SpringMVC+MyBatis深入学习及搭建(一)——MyBatis的基础知识

    转载请注明出处:http://www.cnblogs.com/Joanna-Yan/p/6812311.html 1.对原生态jdbc程序中问题总结 1.1 jdbc程序 需求:使用jdbc查询mys ...

  6. 在 iOS 10.0 之后, App 要调用手机相机与相簿应注意的事项

    iOS 的 SDK 每一年至少都会有一次大改版,从 2009 到 2016 年,版号已经到了第 10 版了,很轻易的就追上了 Mac OSX. 每一次的大改版都会有不少新的功能或新的规范,在 iOS ...

  7. C#中string，char[]，byte[]互相转换

    string 转换成 Char[] string ss = "我爱你,中国"; char[] cc = ss.ToCharArray(); Char[] 转换成string str ...

  8. Apache solr(二)

    上一篇试着进行了solr的安装和配置,以及如何solr的检索,今天试着简单的将solr连接MySQL数据库(才尝试了单表.一对多和多对多的还有待研究) 1.MySQL的目录结构 2.新建一个democ ...

  9. bootstrap学习笔记之为导航条添加标题、二级菜单及状态 http://www.imooc.com/code/3120

    为导航条添加标题.二级菜单及状态 加入导航条标题 在Web页面制作中,常常在菜单前面都会有一个标题(文字字号比其它文字稍大一些),其实在Bootstrap框架也为大家做了这方面考虑,其通过" ...

  10. Android studio 3.0 引起的 outputFile sync failed：not vaild

    我们大多使用 android studio 改变生成安装包命名会用以下方式: applicationVariants.all { variant -> variant.outputs.each ...