走进JavaScript

网页是什么

  • 网页 = Html+CSS+JavaScript

  • Html: 网页元素内容

  • CSS: 控制网页样式

  • JavaScript:操作网页内容,实现功能或者效果

JavaScirpt 发展历史

参考这里

问题:ES3、ES5、ES6指什么?

使用

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>标题</title>
    <link href="index.css" rel="stylesheet">
    <style>
        body{
            background: red;
        }
    </style>
    </head>
    <body>
        <p>
        </p>


        <script src="index.js"></script>
        <script>
            alert(1);
        </script>
    </body>
    </html>

浏览器渲染机制

  • 解析 HTML 标签, 构建 DOM 树
  • 解析 CSS 标签, 构建 CSSOM 树
  • 把 DOM 和 CSSOM 组合成 渲染树 (render tree)
  • 在渲染树的基础上进行布局, 计算每个节点的几何结构
  • 把每个节点绘制到屏幕上 (painting)

浏览器的工作原理,可参考How browsers work

关于 Repaint 和 Reflow

CSS 和 JS 放置顺序, 异步机制

  • 使用 link 标签将样式表放在顶部
  • 将JS放在底部
    • 脚本会阻塞后面内容的呈现
    • 脚本会阻塞其后组件的下载

对于图片和CSS, 在加载时会并发加载(如一个域名下同时加载两个文件). 但在加载 JavaScript 时,会禁用并发,并且阻止其他内容的下载. 所以把 JavaScript 放入页面顶部也会导致 白屏 现象.

白屏&FOUC (Flash of Unstyled Content) 无样式内容闪烁

白屏与FOU 效果验证

加载异步

<script src="script.js"></script>

没有 defer 或 async,浏览器会立即加载并执行指定的脚本,“立即”指的是在渲染该 script 标签之下的文档元素之前,也就是说不等待后续载入的文档元素,读到就加载并执行。

<script async src="script.js"></script>

有 async,加载和渲染后续文档元素的过程将和 script.js 的加载与执行并行进行(异步)。

<script defer src="script.js"></script>

有 defer,加载后续文档元素的过程将和 script.js 的加载并行进行(异步),但 script.js 的执行要在所有元素解析完成之后,DOMContentLoaded 事件触发之前完成。

  • defer:脚本延迟到文档解析和显示后执行,有顺序
  • async:不保证顺序

results matching ""

    No results matching ""