网页是什么

网页 = Html+CSS+JavaScript
Html：网页元素内容
CSS：控制网页样式
JavaScript：操作网页内容，实现功能或者效果

JavaScirpt 发展历史

参考

使用



 <!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

 
 

什么会引发 reflow 回流 或 repaint 重绘

  • 增加、删除、更新一个DOM节点
  • 使用display: none（触发reflow and repaint）或者 visibility: hidden（只触发repaint，因为没有几何变动）隐藏一个节点
  • 移动DOM或产生动画时
  • 增加一个样式，让整个样式发生改变时
  • 当用户改变窗口尺寸，或流动窗口的时候

参考

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

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

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

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

1.到底什么是白屏什么是FOUC

白屏与无样式内容闪烁(FOUC)是因为不同浏览器加载与显示页面的机制不同而造成的。

  • FOUC：一些浏览器例如 firefox 。页面加载时，页面以样式A进行渲染，页面加载完成时，页面突然以样式B进行渲染，所以导致页面出现页面内容闪烁。
  • 白屏：一些浏览器例如 chrome 。他的加载和渲染机制是等CSS全部加载解析完后再渲染展示页面，而这个等待的时间就为白屏。

2.为什么会出现白屏和FOUC

  • FOUC

firefox浏览器：当我们输入网址按回车后浏览器会向服务端发送请求，然后服务端发送页面给浏览器，浏览器边下载页面边解析边渲染。下面我们解剖一下边下载页面边解析边渲染的过程:

  1. 边下载边解析就是边下载html边构建DOM Tree;
  2. 浏览器会以浏览器内置样式(user agent stylesheet)来解析CSSOM Tree；
  3. DOM Tree + CSSOM Tree 构建出 渲染树(Render Tree)，然后页面内容渲染出来;
  4. 当解析到内联样式(inline-stylesheet)和内部样式(internal stylesheet)时，马上刷新DOM Tree + CSSOM Tree + 新的CSSOM 会发生变化引起 Render Tree变化。
  5. 当解析到外部链接样式(external stylesheet)是会就先加载，然后如同inline-stylesheet和internal stylesheet那样解析和刷新CSSOM Tree和Render Tree了。

上述步骤5中由于样式文件存在下载这个延时不确定的阶段，因此网络环境不好或样式资源体积大的情况下我们可以看到样式闪烁明显。

  • 白屏

chorme浏览器：当我们输入网址按回车后浏览器会向服务端发送请求，然后服务端发送页面给浏览器，浏览器下载完成后页面解析渲染。下面我们解剖一下边下载页面边解析边渲染的过程:

  1. 根据来自服务器端的 HTML 代码形成DOM Tree;
  2. 加载并解析全部样式，形成 CSSOM Tree;
  3. 在DOM Tree + CSSOM Tree构建一棵由一组待生成渲染的渲染树（在 Webkit 中这些对象被称为渲染器或渲染对象，而在 Gecko 中称之为“frame”。）渲染树反映了文档对象模型的结构，但是不包含诸如 <head> 标签或含有display:none属性的不可见元素。在渲染树中，每一段文本字符串都表现为独立的渲染器。每一个渲染对象都包含与之对应的 DOM 对象，或者文本块，还加上计算过的样式。换言之，渲染树是一个文档对象模型的直观展示。
  4. 对渲染树上的每个元素，计算它的坐标，称之为布局。浏览器采用一种流方法，布局一个元素只需通过一次，但是表格元素需要通过多次。
  5. 最后，渲染树上的元素最终展示在浏览器里，这一过程称为“painting”。

上述步骤5中由于样式文件存在下载这个延时不确定的阶段，因此网络环境不好或样式资源体积大的情况下我们等待的时间就为白屏。

加载异步

<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：不保证顺序

初涉 JavaScript的更多相关文章

  1. 初涉JavaScript模式系列 阶段总结及规划

    总结 不知不觉写初涉JavaScript模式系列已经半个月了,没想到把一个个小点进行放大,竟然可以发现这么多东西. 期间生怕对JS的理解不到位而误导各位,读了很多书(个人感觉JS是最难的oo语言),也 ...

  2. 初涉JavaScript模式 (3) : 字面量

    什么是字面量? 在编程语言中,字面量是一种表示值的记法.例如,"Hello, World!" 在许多语言中都表示一个字符串字面量(string literal ),JavaScri ...

  3. 初涉JavaScript模式 (13) : 代码复用 【上】

    引子 博客断了一段时间,不是不写,一是没时间,二是觉得自己沉淀不够,经过一段时间的学习和实战,今天来总结下一个老生常谈的东西: 代码复用. 为何复用 JS门槛低,故很多人以为写几个特效就会JS,其实真 ...

  4. 初涉JavaScript模式 (12) : 沙箱模式

    引子 上一篇说了模块模式,而对于其中的命名空间模式其实也是有着一些问题,比如每添加一个模块或则深入叠加都会导致长命名,并且对于多个库的不同版本同时运行,一不小心就会污染全局标识,而这两天也发现了JSe ...

  5. 初涉JavaScript模式 (11) : 模块模式

    引子 这篇算是对第9篇中内容的发散和补充,当时我只是把模块模式中的一些内容简单的归为函数篇中去,在北川的提醒下,我才发觉这是非常不严谨的,于是我把这些内容拎出来,这就是这篇的由来. 什么是模块模式 在 ...

  6. 初涉JavaScript模式 (10) : 函数 【进阶用法】

    写在前面 不知不觉写到第10篇了.这篇写起来很忐忑,终于和高级搭上边了(呵呵),这篇我们 主要 说一下 JS 方法的部分高级用法(我知道的),笔者水平有限,难免有错.废话不多少,进入正文. 初始化 我 ...

  7. 初涉JavaScript模式 (9) : 函数 【常用方式】

    回调模式 上一篇,对JavaScript函数进行了大体的介绍,这一篇对一些在工作中经常遇到的情况进行扩展. 在工作中,我们经常遇到很多需求,比如现在有一个需求: 一栋10层的大楼,当我们在坐电梯时,电 ...

  8. 初涉JavaScript模式 (8) : 函数 【概述】

    什么是函数 函数,是一个大型程序中的某部份代码,由一个或多个语句块组成.它负责完成某项特定任务,而且相较于其他代码,具备相对的独立性.(维基百科) 函数的特点 第一类对象 在JavaScript世界中 ...

  9. 初涉JavaScript模式 (7) : 原型模式 【三】

    组合使用构造函数模式和原型模式 上篇,我们提到了原型模式的缺点,就是每个实例不能拥有自己的属性,因为纯原型模式所有的属性都是公开给每个实例的,故我们可以组合使用构造函数模式和原型模式.构造函数用来定义 ...

  10. 初涉JavaScript模式 (6) : 原型模式 【二】

    原型与in操作符 有两种方式使用in操作符:单独使用和在for-in循环中使用. 在单独使用时,in操作符会遍历实例公开(可枚举)的属性,如果找到该指定属性则返回true,无论该指定属性是存在与实例中 ...

随机推荐

  1. windows安装的mysql中文乱码的坑

    本机装的mysql为5.6的,从代码执行的中文inert语句总是显示问号,然后在中文查询是都会报问题 今天终于解决了! 问题解决方法为: 找到my.ini文件在文件中加入 [client]defaul ...

  2. MyBatis之Mapper XML 文件详解(一)

    MyBatis 的真正强大在于它的映射语句,也是它的魔力所在.由于它的异常强大,映射器的 XML 文件就显得相对简单.如果拿它跟具有相同功能的 JDBC 代码进行对比,你会立即发现省掉了将近 95% ...

  3. JavaScript-比较运算符

    一.概述 > 大于运算符 < 小于运算符 <= 小于或者等于运算符 >= 大于或者等于运算符 == 相等运算符 === 严格相等运算符 != 不相等运算符 !== 严格不相等运 ...

  4. idea 引入多项目

    1.先导入总包 2.右侧mavenmaven,选择parent的pom.xml 3.右上角“Project Structure”检查SDK

  5. 鸟哥私房菜笔记-1 (S0_S3)

    学新东西,总感觉还是看书来的实在,直接看教程上手太慢且没有目的, 接下来先啃鸟哥这本吧,买的第三版,内容在鸟哥站上都有: 鸟哥的 Linux 私房菜 -- 基础学习篇目录 (繁体) http://cn ...

  6. 一分钟完成pip安装

    很多实用Python的小伙伴都需要使用pip安装相应的包,对于初学者而已,检查遇到pip安装不成功的情况,如以下典型错误: Traceback (most recent call last): Fil ...

  7. Java Web开发后端常用技术汇总

    技术名称及官网 Spring Framework Spring容器 http://projects.spring.io/spring-framework/ SpringMVC Spring MVC框架 ...

  8. telnet 批处理

    **** 需要确认多台服务器端口是否打开,如果一个一个telnet会非常麻烦,通过百度,写了两个BAT,基本能做工作需要. ***start.bat start "" " ...

  9. 04IP编址（网络层）

    帧中type为0x0800,送给ip   ip报文结构 TTL 生存时间最大为255,经过三层设备就减1 protocol:协议号 version:4,6 source ip address:源ip编 ...

  10. ACM数据结构-并查集

    ACM数据结构-并查集   并查集,在一些有N个元素的集合应用问题中,我们通常是在开始时让每个元素构成一个单元素的集合,然后按一定顺序将属于同一组的元素所在的集合合并,其间要反复查找一个元素在哪个集合 ...