进阶任务1

1.CSS和JS在网页中的放置顺序是怎样的?
CSS放置在head中,
JS放置在body的底部。
2.解释白屏和FOUC
如果把CSS放在底部,对于IE浏览器,在某些场景瞎(新窗口打开,刷新等)页面会出现白屏,并不是内容逐步展现,如果实用@import标签,即使CSS放入link,并且放在head,也可能出现白屏。
把JS放在页面顶部也会导致白屏现象。
FOUC无样式内容闪烁,如果把CSS放在底部,对于IE浏览器,在某些场景下(点击链接,输入URL,使用书签进入等)会出现FOUC现象,逐步加载无样式内容等CSS加载后页面突然展现样式,对于firefox会一直表现出FOUC。
3.async和defer的作用是什么?有什么区别
async加载和渲染后续文档元素的过程将和script.js的加载与执行并行进行。
defer加载后续文档元素的过程将和script.js的加载并行进行,但script,js的执行要在所有元素解析完成后,DOM content loaded事件触发之前完成。
defer脚本延迟到文档解析和显示后执行,有顺序。
async不保证顺序。
4.简述网页的渲染机制

  • 第一步,解析html标签,构建DOM树。
  • 第二步,解析CSS标签,构建CSSOM树。
  • 第三步,把DOM和CSSOM组合成渲染树(render tree)在渲染树的基础上进行布局,计算每个节点的几何结构把每个节点绘制到屏幕上。
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 任务 CSS和JS在网页中的放置顺序是怎样的? 解释白屏和FOUC async和defer的作用是什么?有什么区别...
    mhy_web阅读 548评论 0 1
  • 1、CSS和JS在网页中的放置顺序是怎样的? css样式放在head中。js放置在body标签内的最后,scrip...
  • 1 . CSS和JS在网页中的放置顺序 CSS要放头部head中的link标签内引入。 js文件要放在 标签中,...
    osborne阅读 314评论 0 0
  • 彭白路路况还不错,只是限速标识变化万千,一路电子眼,眼睛被折腾够呛了。入了龙门山,山犹自绿了起来,远山薄雾萦绕,如...
    泰然已兑阅读 416评论 0 1
  • 历史传说 1000多年前,唐蕃联姻,文成公主远嫁吐蕃王松赞干布,临行前,唐王赐给她能够照出家乡景象的日月宝镜。途中...
    风扬袖阅读 331评论 0 0