进阶1

作者: azure_1122 | 来源:发表于2017-07-06 12:51 被阅读0次

css和js的放置顺序

css放在head中
js放置于body最后面的script标签中

白屏问题

如果把样式放在底部,对于IE浏览器,在某些场景下(新窗口打开,刷新等)页面会出现白屏,而不是内容逐步展现
如果使用 @import 标签,即使 CSS 放入 link, 并且放在头部,也可能出现白屏
在加载 JavaScript 时,会禁用并发,并且阻止其他内容的下载. 所以把 JavaScript 放入页面顶部也会导致白屏现象

FOUC

如果把样式放在底部,对于IE浏览器,在某些场景下(点击链接,输入URL,使用书签进入等),会出现 FOUC 现象(逐步加载无样式的内容,等CSS加载后页面突然展现样式).对于 Firefox 会一直表现出 FOUC .

async和defer的作用及区别

没有 defer 或 async,浏览器会立即加载并执行指定的脚本,“立即”指的是在渲染该 script 标签之下的文档元素之前,也就是说不等待后续载入的文档元素,读到就加载并执行
采用async 或defer后,加载后续文档元素的过程将和 script.js 的加载并行进行(异步)
但使用defer时 script.js 的执行要在所有元素解析完成之后,DOMContentLoaded 事件触发之前完成
defer:脚本延迟到文档解析和显示后执行,有顺序
async:不保证顺序

网页的渲染机制

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

相关文章

  • Kotlin 进阶之路 目录

    Kotlin 进阶之路 目录 Kotlin 进阶之路1 基础语法Kotlin 进阶之路2 集合类型Kotlin 进...

  • 进阶1

    1、CSS和JS在网页中的放置顺序是怎样的? CSS一般使用链接引入的方式来加载样式,使用link标签引入,并放置...

  • 进阶1

    1.CSS和JS在网页中的放置顺序是怎样的? 根据浏览器渲染页面顺序的特点,为保证页面加载的顺畅,一般按如下方式放...

  • 进阶1

    1.CSS和JS在网页中的放置顺序是怎样的? CSS 放在 标签里面。保证浏览器首先加载外部链接的css样式的同时...

  • 进阶1

    CSS和JS在网页中的放置顺序是怎样的? 一般来说,在 head 标签中通过 link 标签引入CSS。在 bo...

  • 进阶1

    1.CSS和JS在网页中的放置顺序是怎样的? css放在顶部head标签内;js会阻塞后面内容的展现并阻止其后的下...

  • 进阶1

    CSS和JS在网页中的放置顺序是怎样的? CSS用style标签包围,放head中,link标签内引入。 JS用s...

  • 进阶1

    css和js的放置顺序 css放在head中js放置于body最后面的script标签中 白屏问题 如果把样式放在...

  • 进阶1

    async和defer的作用是什么?有什么区别 没有 defer 或 async,浏览器会立即加载并执行指定的脚...

  • 进阶-1

    复习 Go语言保留了C语言中的指针,但又有所不同;默认值为 nil操作符 & 取变量地址,* 通过指针访问目标对象...

网友评论

      本文标题:进阶1

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