美文网首页
关于css与js加载顺序相关小节

关于css与js加载顺序相关小节

作者: 肥鱼666 | 来源:发表于2017-11-16 23:10 被阅读0次

CSS和JS在网页中的放置顺序是怎样的?

  • CSS一般放置在head标签内,要是页面在无CSS渲染下先加载HTML的话将会面目全非,样式先行的话在加载HTML内容时可以同时渲染样式,避免FOUC。
  • JS一般放置在</body>标签之前、body标签中html内容的后面,这是为了提高页面渲染的速度效率。浏览器在加载<script>元素内部的JS代码将被从上至下依次解释,解释器对<script>元素内部所有代码求值完毕之前,会阻塞其他资源的加载,页面的其余内容都不会被浏览器加载显示,如果放置在前面其他位置,会对页面内容的加载速度产生影响。

解释白屏和FOUC

白屏:当把css代码放在页面底部或者使用@import引入样式,再或者JS放在页面头部造成阻塞其他内容加载时:一些浏览器比如chrome它的加载和渲染机制是等头部的JS和底部的CSS全部加载并解析完渲染展示页面,而这个等待的过程就为白屏。
FOUC(无样式内容闪烁):如果把样式放在底部,对于IE浏览器,在某些场景下(点击链接,输入URL,使用书签进入等),会出现 FOUC 现象(逐步加载无样式的内容,等CSS加载后页面突然展现样式).对于 Firefox 会一直表现出 FOUC现象。

async和defer的作用是什么?有什么区别

当浏览器碰到碰到script脚本时:

<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 事件触发之前完成。
    async与defer区别如下图


    网上某位大神画的

    图中,蓝色线代表网络读取,红色线代表执行时间,绿色线代表 HTML 解析。
    由此图可得出以下几点:

  • defer 和 async 在网络读取(下载)这部分是一样的,都是异步(相较于 HTML 解析),它们的差别在于脚本下载完之后何时执行。
  • defer 是最接近我们对于应用脚本加载和执行的要求的,而且它是按照加载顺序执行脚本的,这一点要善加利用;
  • async 则是一个乱序执行方式,对它来说脚本的加载和执行是紧紧挨着的,所以不管你声明的顺序如何,只要它加载完了就会立刻执行,async 对于应用脚本的用处不大,因为它完全不考虑依赖(哪怕是最低级的顺序执行),不过它对于那些可以不依赖任何脚本或不被任何脚本依赖的脚本来说却是非常合适的。

网页的渲染机制

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

相关文章

  • 关于css与js加载顺序相关小节

    CSS和JS在网页中的放置顺序是怎样的? CSS一般放置在head标签内,要是页面在无CSS渲染下先加载HTML的...

  • html,css,js加载顺序

    1. 加载方式 css 异步加载(不阻塞)js 同步加载(阻塞) 2. 放置顺序 css 放置于 标签中原因:...

  • 【前端】页面性能优化

    一、HTML优化 渲染顺序 1、CSS样式表置于头部,CSS会一边加载一边渲染2、JS脚本置于尾部,JS在未加载完...

  • level-16

    JS基础知识 1.CSS和JS在网页中的放置顺序是怎样的?## 一般来说CSS放在顶部,JS放在底部加载 css放...

  • 如何提升JavaScript的执行效率

    js优化的总体原则 当需要时才优化 考虑可维护性 提升JS文件的加载性能 加载元素的顺序css文件放在 里,js文...

  • 浏览器渲染机制

    CSS和JS在网页中的放置顺序是怎样的? CSS应放在页面头部,防止页面加载不出来出现白屏或者只加载出HTML然后...

  • CSS 与 JS 的加载顺序优化

    CSS 阻塞 CSS 是阻塞渲染的资源。需要将它尽早、尽快下载到客户端,以便缩短首次渲染的时间。 浏览器在构建 C...

  • html,css,js加载顺序

    1.js放在head中会立即执行,阻塞后续的资源下载与执行。因为js有可能会修改dom,如果不阻塞后续的资源下载,...

  • 为什么通常情况下会把CSS资源放在头部而js放在尾部

    首先, 关于js和css资源加载时, 对文档解析渲染的阻塞情况如下: css css加载不会阻塞DOM树的解析 c...

  • 浏览器渲染

    1. CSS和JS在网页中的放置顺序是怎样的? 浏览器对于图片和CSS,在加载时会并发加载(比如一个域名下同时加载...

网友评论

      本文标题:关于css与js加载顺序相关小节

      本文链接:https://www.haomeiwen.com/subject/lkggmxtx.html