网站性能分析(下)-让网站并行加载但顺序执行JS
如果网站不支持JavaScript,复杂的功能将无法正常工作。在开发当中通常有几个脚本会写在HTML文件的头部。你嵌入的越多,网站的速度潜在的变得越慢。因此提高并行加载速度变得非常有必要,在前面的文章当中我已经提供了2种提高网站响应速度的方法,今天分享第三种方法,让让网站并行加载但顺序执行JS
你是否也在寻找
经验分享-延缓执行 JavaScript 提升网页加载速度
web开发经验推荐-新网站项目中的8个有用片段
在这种情况下我们可以使用Head.js来解决这样的事情,head.js是一个JavaScript调用自身的脚本。他能够并行加载JS,但是执行的时候却按顺序执行,来提高网站速度
如何嵌入和使用Head.js
HTML文件的头部。嵌入head.js配置变量head_conf的
必需的一些特殊功能,你可以设置几个选项:
1 <script> 2 var head_conf = { ... } 3 </script> 4 5 <script src="/js/head.min.js"></script>
在head.js当中一次性加载多个JavaScript
Head.js的主要功能是同一时间并行加载多个脚本。相反的,你不必单独提取每个脚本,Head.js工作流程如下:
1 head.js("file1.js", "file2.js", "file3.js");
虽然上面的脚本文件是排序写下来的,Head.js并不是先加载在前的,然后紧接着加载第二个,他是并行加载的然后顺序执行。这个很容易可以想象,这样加载的好处是样式表和图片的加载速度更快,使得确保整个页面感觉要快得多。
对浏览器的CSS功能
特别提出的是head.JS对CSS3支持也是没有问题的,因为不是所有的浏览器中都支持原生标准的。Head.js带有各个浏览器的样式特殊的类的定义:
.webkit p {color: red; }
上面的例子在Webkit的浏览器所有p标记为红色。你可以明确地定义浏览器支持特定的CSS3属性或您的浏览器不支持某些属性:
1 .borderimage div { 2 border-image: url("border.png") 25% repeat; 3 } 4 5 -no-borderimage div { 6 border: 1px solid green; 7 }
在这个例子中,我们定义的iv元素在支持border的浏览器当中定义一个类,在不支持border的浏览器当中定义另外一个类来区分显示
如何使用Head.js让CSS3在不同的浏览器上面显示不同分辨率
Head.js的另一个特点是可以定义样式表对应不同的分辨率,下面的例子:
.lt-1024 p { font-size: 10px; }
如果分辨率是1024以下的像素,字体大小被设置为10点。head_conf当中设置
:
var head_conf = { screens: [800, 1024] };
对旧版本的IE浏览器中的HTML5支持
旧版本的浏览器 - 忽略HTML5元素的支持,但是Head.js可以确保即使是旧的浏览器当中这些元素也能正确加载。
下载head.js
本文链接:网站性能分析(下)-让网站并行加载但顺序执行JS
更多详情阅读:网站性能分析(下)-让网站并行加载但顺序执行JS
123
转载于:https://www.cnblogs.com/58top/archive/2012/11/14/javascript-turbo-head-js-speeds-up-your-website.html
网站性能分析(下)-让网站并行加载但顺序执行JS相关推荐
- 加载页面前执行js脚本,实现浏览器指纹变更
一般浏览器先加载主页,再请求关联的js脚本文件.不管你把js代码嵌入在html中,还是独立保存为一个文件,都必须等待主页加载完成,js代码加载完成后才能执行.网上有人说把js代码放在head里面,其实 ...
- 怎样使页面加载完再执行js代码
怎样使页面加载完再执行js代码 由于HTML页面的加载顺序是从上到下,所以js代码要写在页面靠下的位置,否则可能会发生元素获取不到的问题,为了避免这种情况,可以通过页面元素加载完之后,再执行js代码, ...
- 解决pjax加载页面不执行js插件的问题
解决pjax加载页面不执行js插件的问题 参考文章: (1)解决pjax加载页面不执行js插件的问题 (2)https://www.cnblogs.com/fanwenhao/p/9643549.ht ...
- html5页面加载执行动作,页面加载完成后执行JS的5种方式
在js和jquery使用中,常用到页面加载完成后执行某一方法.经过整理,大概是五种方式.javascript 1.jQuery的$( function(){} );html 2.jQuery的$(do ...
- js 和jQuery(自动执行函数)立即执行函数和页面加载完后执行函数写法
js 立即执行函数的写法. js 立即执行函数只能用于匿名函数,如果声明了函数名是不可以用立即执行的,通常在函数表达式后加一对小括号()用于立即执行 如果想让函数不被调用的情况下,立即自动执行,需要在 ...
- 前端性能优化(一)提升加载速度
加入QQ群:864680898,一起学习进步!点击群名可查看本人网站,有最新文章! 前端性能优化----(一)提升加载速度 由于现在大部分是做的单页面应用了,那么会导致页面的首次加载时间非常的长.常见 ...
- 浅谈性能优化之图片压缩、加载和格式选择
原文链接:浅谈性能优化之图片压缩.加载和格式选择 在认识图片优化前,我们先了解下 [二进制位数]与[色彩呈现]的关系. 二进制位数与色彩 在计算机中,一般用二进制数来表示像素.在不同的图片格式中,像素 ...
- 前端性能优化:使用媒体查询加载指定大小的背景图片
日期:2013-7-8 来源:GBin1.com 直到CSS @supports被广泛支持,CSS媒体查询的使用接近于CSS中写逻辑控制.我们经常用CSS媒体查询来根据设备调整CSS属性(通常根据屏 ...
- ajax加载对应的json,jQuery:多个AJAX/JSON请求对应单个回调并行加载
因为我们使用jQuery,这意味着需要调用 jQuery.getScript 和 jQuery.getJSON 函数. 我知道这些函数都是异步执行(asyncronously)并且会延迟一段时间返回, ...
最新文章
- HA: Dhanush靶机渗透测试
- c语言比较四个数大小并由小到大排序,c语言任意输入5个数,并按从大到小顺序输出...
- Android开源项目:GifView——Android显示GIF动画
- 基于元组,根据月份,计算天数.(Python)
- servlet 异常处理_Servlet异常和错误处理示例教程
- php怎样下载网上的文件,php怎样实现文件下载
- Android wifi驱动的移植 realtek 8188
- .net core 3.1 mysql_.net core3.1 MVC使用sqlsugar方式操作mysql数据库
- html css浮动标签,12种超酷HTML5 SVG和CSS3浮动标签效果
- day22 随机输出ArrayList
- 创客匠人打造在线课堂,助力内容变现
- pe下修复linux磁盘分区,找回丢失的Linux分区及Grub修复过程
- 支付宝SOFA架构:降低业务系统复杂度
- 借助磁盘修理工具解决Boot Camp助理的分区问题
- 【图文并茂】如何进行Win7系统的重装
- 武汉理工大学计算机学院导师联系方式,武汉理工大学计算机学院班主任(班导师)工作条例.doc...
- 三星华为等推折叠屏手机 这家日本小厂意外发财
- C++ 农夫过河问题
- 三码合一解决 PHP mysql 乱码
- delphi负数变正数_Delphi Format 格式化数字
热门文章
- linux版本更新,滚动更新与固定版本Linux之争
- php索引是什么意思,为什么我的php一直说 没索引!下面是代码
- mysql io depth_MySQL读写IO的操作过程解析
- java不需要导的包
- 008_JsonConfig对象
- mysql的字符集设置为什么_为什么Mysql默认的字符集都是latin1
- 从Linux上查看接口路由IP(吓一跳ip)
- 最长回文子串动态规划_九章算法 | 微软面试题:最长回文子串
- linux java 获取路径怎么写_linux中java获取路径的实例代码
- 鸿蒙适配倒计时,倒计时2天!首批鸿蒙OS适配名单确定,你的手机在列吗?