关于javascript的加载影响页面（揭秘js不为人常知的优化技巧）
2013-09-14 12:01
681 查看
首先第一条优化就是：有很多程序员都是喜欢把<script>进行对外部javascript文件引用放在<head>中，浏览器是先下载js文件，然后再对<body>里面的内容进行解释翻译的，如果js文件很多或者很大的话，这样子，不知道你们会不会这样子，不管你们会不会，如果不是必须要打开该网站进行内容的操作的话，我是会第一时间关掉，很多时候，打开一个网页要等很久，我都会判断为死网页的，就是不存在的，所以呢，如果你躺着也中枪的话，醒目点。
PS：这里提醒下：按理论来讲，例如在<head>里面有三个js文件，按理论来讲这三个js文件都是逐一进行下载的，然后在IE8, Firefox3.5和Chrome2都是可以进行js的并行下载的，这是相当的不错的，但还是在js下载完才可以对<body>进行显示
解决办法：既然js阻止了UI的渲染，那么我们直接将js放在</body>前就可以让<html>在<script>下载完之前完美的体现出来，这样子用户就不会看到整个空白的网页，自然提高了友好性。
第二条优化：如果在</body>前用了三个<script>标签引用外部文件，那么这个时候，就等于有三个请求下载，也就是有三个get请求，大家都知道get请求时带上http的，所以这样子重复的带上http请求头，必然造成时间的耗费，所以我们就应该减少get请求呢
解决办法：第一种：把a.js和b.js文件合并在一起，这样子就可以减少get请求的了
第二种：采用第三方工具，例如：php中的Minify，这一种做法，淘宝上用的还是蛮多的，看一个下其中的一个<script>,应用了三个js文件，由3个js文件合并为一个
<script src="http//***************/kiss-min.js, ****************/global-min.js , *********/et.js?t=2011092320110301.js>
第三种优化：不管把js文件放在脚尾,还是3个js文件合并为1个，其本质都是”阻塞模式“，就是说锁死浏览器，当wed页面越来越发杂，js文件越来越多，还是让我们很头疼，此时我们提倡一种“无阻塞模式”加载js脚本文件，也就是页面全部呈现再追加js，也就对应着window.onload事件触发后，我们追加js，这就是所谓的“无阻塞”，但是其中有一个非常要注意的地方就是我么对js的要求是否有严格的顺序。
解决办法：第一种：js文件没有顺序要求，比如a.js和b.js没有顺序要求，那我们就可以用jquery来动态追加js实现
window.onload=function(){
$(#"head").append("<script src="js/a.js" type="text/javascript">")
$(#"head").append("<script src="js/b.js" type="text/javascript">")
}
这样子的话，a.js和b.js这两个文件就是在DomContentLoad结束后再进行触发加载的，这样就不会造成页面的锁定等待。
第二种解决方法：因为在IE系列里，你不能保证a.js一定会在b.js前执行，它只会安照服务器端返回的顺序执行代码。
//第一步：加载jquery类库
loadScript（“jquery/jquery-1.4.1.js,function(){
//第二步：加载a.js
loadScript("js/a.js,function(){
//第三步：加载b.js
loadScript("js/b.js",function(){
})
}")
}”）
腾讯新闻的网站也是这样子处理的
PS：这里提醒下：按理论来讲，例如在<head>里面有三个js文件，按理论来讲这三个js文件都是逐一进行下载的，然后在IE8, Firefox3.5和Chrome2都是可以进行js的并行下载的，这是相当的不错的，但还是在js下载完才可以对<body>进行显示
解决办法：既然js阻止了UI的渲染，那么我们直接将js放在</body>前就可以让<html>在<script>下载完之前完美的体现出来，这样子用户就不会看到整个空白的网页，自然提高了友好性。
第二条优化：如果在</body>前用了三个<script>标签引用外部文件，那么这个时候，就等于有三个请求下载，也就是有三个get请求，大家都知道get请求时带上http的，所以这样子重复的带上http请求头，必然造成时间的耗费，所以我们就应该减少get请求呢
解决办法：第一种：把a.js和b.js文件合并在一起，这样子就可以减少get请求的了
第二种：采用第三方工具，例如：php中的Minify，这一种做法，淘宝上用的还是蛮多的，看一个下其中的一个<script>,应用了三个js文件，由3个js文件合并为一个
<script src="http//***************/kiss-min.js, ****************/global-min.js , *********/et.js?t=2011092320110301.js>
第三种优化：不管把js文件放在脚尾,还是3个js文件合并为1个，其本质都是”阻塞模式“，就是说锁死浏览器，当wed页面越来越发杂，js文件越来越多，还是让我们很头疼，此时我们提倡一种“无阻塞模式”加载js脚本文件，也就是页面全部呈现再追加js，也就对应着window.onload事件触发后，我们追加js，这就是所谓的“无阻塞”，但是其中有一个非常要注意的地方就是我么对js的要求是否有严格的顺序。
解决办法：第一种：js文件没有顺序要求，比如a.js和b.js没有顺序要求，那我们就可以用jquery来动态追加js实现
window.onload=function(){
$(#"head").append("<script src="js/a.js" type="text/javascript">")
$(#"head").append("<script src="js/b.js" type="text/javascript">")
}
这样子的话，a.js和b.js这两个文件就是在DomContentLoad结束后再进行触发加载的，这样就不会造成页面的锁定等待。
第二种解决方法：因为在IE系列里，你不能保证a.js一定会在b.js前执行，它只会安照服务器端返回的顺序执行代码。
//第一步：加载jquery类库
loadScript（“jquery/jquery-1.4.1.js,function(){
//第二步：加载a.js
loadScript("js/a.js,function(){
//第三步：加载b.js
loadScript("js/b.js",function(){
})
}")
}”）
腾讯新闻的网站也是这样子处理的
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 关于js对页面加载影响的测试
- javascript 怎么控制优化页面 js 指定 加载顺序
- JS脚本文件的位置对页面加载性能影响以及无阻塞脚本（javascript）模式
- js性能优化 如何更快速加载你的JavaScript页面
- 用CSS/JS技巧优化HTML页面加载速度
- 持续讨论 javascript 如何控制优化页面 js 加载顺序
- js性能优化 如何更快速加载你的JavaScript页面
- javascript 控制优化页面 js 加载顺序
- 持续讨论 javascript 如何控制优化页面 js 加载顺序
- JS脚本文件的位置对页面加载性能影响以及无阻塞脚本（javascript）模式
- 用CSS/JS技巧优化HTML页面加载速度
- javascript 控制优化页面 js 加载顺序
- js性能优化 如何更快速加载你的JavaScript页面
- 网站提升页面加载性能的优化技巧
- js页面跳转常用的几种方式_javascript技巧
- JS技巧：调用iframe中父页面/子页面中的JavaScript方法
- JavaScript 的性能优化：加载和执行（以及动态引入的外部 JS 文件在各浏览器中的加载顺序不一致）
- 如何让js调用不影响页面的加载速度？
- 【JavaScript】页面加载性能优化
- 关于在页面加载完后使用js修改图片高度进行手机屏幕适配的问题