• 高性能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.  如果多个文件的次序非常重要,最好能将其练成一个文件。

  • 相关阅读:
    Ember.js 入门指南——计算属性(compute properties)
    Ember.js 入门指南——扩展(reopen)
    Ember.js 入门指南——类的定义、初始化、继承
    Ember.js 入门指南——目录
    Ember.js 入门指南——{{action}} 助手
    ubuntu按转jdk
    ubuntu设置电脑作为wifi热点
    一步完成linux安装jdk
    GStreamer基础教程13
    GStreamer基础教程12
  • 原文地址:https://www.cnblogs.com/lifeisshort/p/4880917.html
Copyright © 2020-2023  润新知