zoukankan      html  css  js  c++  java
  • 高性能javascript 笔记 第一章 loading and executing (一)

    1. <script>通常用于加载外部文件,当<script>用于加载外部文件时,它可以放在<head>中,也可以放在<body>中,当<script>放在head中时,浏览器必须等到<script>标签加载并运行外部文件代码后,页面才能开始渲染,之前页面都是空白。因而这是将<script>放在<head>中不好的一面。那么好的一面:如果整个页面必须依赖<script>外部文件才能够有正常的行为,那么放在<head>中是一个极好的方法。至于其他的<script>文件,最好放在<body>底部,最好放在<body>底部。最好放在<body>底部。因为放在<body>底部时,整个页面已经渲染完成了,进入页面的速度不会显得太慢。

    2. 将多个<script>标签合成一个比同时加载多个标签要好。

    3. HTML4为<script>定义了一个扩展属性,defer,这个defer属性指明元素中所包含的脚本不打算修改DOM,从而代码可以稍后执行。从而方便浏览器进行优化。

    4. defer 与 async的区别

      两者相同点:

      异步加载

        <script>标签的defer属性——告诉浏览器该脚本不会在页面加载完成之前操作DOM,脚本将会和其他资源文件并行下载;
        <script>标签的async属性——HTML5新的异步、并行模式,脚本将在完成下载后等待合适的时机执行代码。

       回调初始化:  

        <script async src="myAsyncScript.js" onload="myInit()"></script

        <script defer src="myDeferScript.js" onload="myInit()"></script

       两者区别:
       async 脚本在script文件下载完成后会立即执行,并且其执行时间一定在 window的load事件触发之前。这意味着多个async脚本很可能不会按其在页面中的出现次序顺序执行。
       与此相对,浏览器确保多个 defer 脚本按其在HTML页面中的出现顺序依次执行,且执行时机为DOM解析完成后,document的DOMContentLoaded 事件触发之前。

    5.  如果多个文件的次序非常重要,最好能将其练成一个文件。

  • 相关阅读:
    HDU 2112 HDU Today,最短路径算法,Dijkstra
    最小生成树,POJ和HDU几道题目的解题报告(基于自己写的模板)
    图基本算法 最小生成树 Prim算法(邻接表/邻接矩阵+优先队列STL)
    合并相同值得单元格(纵向)
    request.startAsync()不支持异步操作
    DIV强制不换行
    兼容各浏览器的css背景图片拉伸代码
    程序猿之八荣八耻
    使用JEECG过程中的问题汇总(持续更新)
    Firefox的缓存问题
  • 原文地址:https://www.cnblogs.com/lifeisshort/p/4880917.html
Copyright © 2011-2022 走看看