zoukankan      html  css  js  c++  java
  • 关于javascript的加载影响页面(揭秘js不为人常知的优化技巧)

    首先第一条优化就是:有很多程序员都是喜欢把<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(){

                           })

                        }")     

                      }”)

     腾讯新闻的网站也是这样子处理的

  • 相关阅读:
    net下开发COM+组件(一)
    C#中自定义属性的例子
    textBox的readonly=true
    关于ADO.Net的数据库连接池
    CYQ.Data 轻量数据层之路 使用篇三曲 MAction 取值赋值(十四)
    CYQ.Data 轻量数据层之路 SQLHelper 回头太难(八)
    CYQ.Data 轻量数据层之路 MDataTable 绑定性能优化之章(十一)
    C# 浅拷贝与深拷贝区别 解惑篇
    C#中的 ref 传进出的到底是什么 解惑篇
    CYQ.Data 轻量数据层之路 使用篇五曲 MProc 存储过程与SQL(十六)
  • 原文地址:https://www.cnblogs.com/fengmitianxia/p/3321049.html
Copyright © 2011-2022 走看看