JavaScript无阻塞加载具体方式
将脚本放在底部。\还是放在head中,用以保证在js加载前,能加载出正常显示的页面。\<script>标签放在\前
成组脚本:由于每个\<script>标签下载时阻塞页面解析过程,所以限制页面的\<script>总数也可以改善性能。适用于内联脚本和外部脚本。
非阻塞脚本:等页面完成加载后,再加载js代码。也就是,在window.onload事件发出后开始下载代码
(1)defer属性:支持IE4和fierfox3.5更高版本浏览器
(2)动态脚本元素:文档对象模型(DOM)允许你使用js动态创建HTML的几乎全部文档内容。代码如下:
<script>
var script=document.createElement(“script”)
vcript.type=”text/javascript”
script.src=”file.js”
document.getElementsByTagName(“head”)[0].
appendChild(script)
</script>
此技术的重点在于:无论在何处启动下载,文件下载和运行都不会阻塞其他页面处理过程。即使在head里(除了用于下载文件的http链接)
JavaScript无阻塞加载具体方式的更多相关文章
- 探真无阻塞加载javascript脚本技术,我们会发现很多意想不到的秘密
下面的图片是我使用firefox和chrome浏览百度首页时候记录的http请求 下面是firefox: 下面是chrome: 在浏览百度首页前我都将浏览器的缓存全部清理掉,让这个场景最接近第一次访问 ...
- 无阻塞加载js,防止因js加载不了影响页面显示
浏览器加载静态资源和js的方式都是线性加载,所以一般情况可以将js放到</body>前,防止UI线程的阻塞. 而某些时候我们既希望js在整个网页的头部就加载,又担心js阻塞导致网站加载缓慢 ...
- 无阻塞加载和defer、async
无阻塞加载 把js放在head里,浏览器是怎么去执行它的呢,是按顺序加载还是并行加载呢?在旧的浏览器下,都是按照先后顺序来加载的,这就保证了加载的js依赖不会发生问题.但是少部分新的浏览器已经开始允许 ...
- js同步、异步、延时、无阻塞加载
一.同步加载 平常默认用的都是同步加载.如:<script src="http://yourdomain.com/script.js"></script> ...
- 高性能 js -- 无阻塞加载脚本
参考: <<高性能JavaScript>> Nicbolas C. Zakas 著 javascript代码的下载和执行过程会阻塞浏览器的其他进程, 比如页面的绘制, 遇到&l ...
- web性能优化之---JavaScript中的无阻塞加载性能优化方案
一.js阻塞特性 JS 有个很无语的阻塞特性,就是当浏览器在执行JS 代码时,不能同时做其他任何事情,无论其代码是内嵌的还是外部的. 即<script>每次出现都会让页面等待脚本的解析和执 ...
- 高性能Javascript--脚本的无阻塞加载策略
Javascript在浏览器中的性能,可以说是前端开发者所要面对的最重要的可用性问题. 在Yahoo的Yslow23条规则当中,其中一条是将JS放在底部 .原因是,事实上,大多数浏览器使用单进程处理U ...
- 【转】高性能Javascript--脚本的无阻塞加载策略
原文转自:http://blog.jobbole.com/78191/ Javascript在浏览器中的性能,可以说是前端开发者所要面对的最重要的可用性问题. 在Yahoo的Yslow23条规则当中, ...
- JavaScript非阻塞加载脚本
As more and more sites evolve into “Web 2.0″ apps, the amount of JavaScript increases. This is a per ...
随机推荐
- Java基础——字符编码
一.ASII 美国(国家)信息交换标准(代)码. 计算机中只有数字,一切都是用数字表示,屏幕上显示的一个一个的字符也不例外. 一个字节可表示的数字为0-255,足以显示键盘上的所有的字符 例如. a ...
- uni-app初体验及打包成apk
首先用HBuilderX新建建一个uni-app项目 新建一个目录ucenter,该目录下新建两个vue文件ucenter.vue和setting.vue ucenter.vue <templa ...
- Java - HashTable源码分析
java提高篇(二五)-----HashTable 在java中与有两个类都提供了一个多种用途的hashTable机制,他们都可以将可以key和value结合起来构成键值对通过put(key,valu ...
- js中Date 方法
Date (对象) Date 对象能够使你获得相对于国际标准时间(格林威治标准时间,现在被称为 UTC-Universal Coordinated Time)或者是 Flash 播放器正运行的操作系统 ...
- php中parse_url函数解析
1.在php开发过程中我们经常要用到用户上传文件这个功能,那么用户上传文件我们肯定要知道用户上传文件的合法性,那么我们就要从url中获取文件的扩展名.那么就会用到parse_url()这个函数. pa ...
- css3 之 display 属性
1.定义 语法:display:none | inline | block | list-item | inline-block | table | inline-table | table-capt ...
- 利用ListView批量删除item
利用CheckBox选中一个或多个item,最后批量删除它们. 程序运行效果图如下: package com.test.adapter; import java.util.ArrayList; imp ...
- [我的阿里云服务器] —— WordPress Permalink Settings
前言: 固定链接(Permalink)是博客日志.分类及其他博客内容列表的永久URL. 别人可以通过固定链接链接到你的文章上,你也可以在email中发送某篇日志的链接. 所有日志的URL应为永久性.固 ...
- NetBeans 打开项目中文乱码最简单的解决办法
网上各种修改配置文件,中文乱码还是没有解决,其实不是NetBeans的问题,是编辑器设置的字符集不支持中文,最简单的办法:!!! 设置新字体即可 !!!
- 数据库小组第N次小组会议
时间:5.30晚,9:30 ~ 11:30 主题:讨论android app与服务器之间数据同步的技术选型与实现 与会人:陈兆庭,黄志鹏,吴雪晴 讨论内容: 大体分析 关于数据同步,整体上有两部分,用 ...