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(){

                           })

                        }")     

                      }”)

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

  • 相关阅读:
    leetcode 48. Rotate Image
    leetcode 203. Remove Linked List Elements 、83. Remove Duplicates from Sorted List 、82. Remove Duplicates from Sorted List II(剑指offer57 删除链表中重复的结点) 、26/80. Remove Duplicates from Sorted ArrayI、II
    leetcode 263. Ugly Number 、264. Ugly Number II 、313. Super Ugly Number 、204. Count Primes
    leetcode 58. Length of Last Word
    安卓操作的一些问题解决
    leetcode 378. Kth Smallest Element in a Sorted Matrix
    android studio Gradle Build速度加快方法
    禁用gridview,listview回弹或下拉悬停
    Android Studio找不到FragmentActivity类
    安卓获取ListView、GridView等滚动的距离(高度)
  • 原文地址:https://www.cnblogs.com/fengmitianxia/p/3321049.html
Copyright © 2011-2022 走看看