20161226作业

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

  • CSS应该放在页面的顶部的head标签中

由于Render Tree是由DOM树和CSSOM树组合成的,html页面需要等到CSS解析完成才能完成渲染,所以css应该放在head标签内,优先下载解析,以避免页面元素由于样式缺失造成瞬间的白屏或者给用户闪烁感。

  • JS应该放在的底部标签闭合之前;

  • 因为浏览器需要一个稳定的dom树结构,而且js中很有可能有代码直接改变了dom树结构,浏览器为了防止出现js修改dom树,需要重新构建dom树的情况,所以就会阻塞其他的下载和呈现。
    将JavaScript放在head内和body底部的区别也在于此,放在head里面,由于浏览器发现head里面有JavaScript标签就会暂时停止其他渲染行为,等待JavaScript下载并执行完成才能接着往下渲染,而这个时候由于在head里面这个时候页面是白的;如果将JavaScript放在页面底部,render Tree 已经完成大部分所以此时页面有内容呈现,即使遇到JavaScript阻塞渲染,也不会有白屏出现。

  • 如果CSS和JS都在head标签内,则应将JS放在所有CSS的前面。

  • JS的执行有可能依赖最新样式。比如,可能会有var width=$(#id").width,这意味着,JS代码在执行前,浏览器必须保证在此JS之前的所有CSS(无论外联还是内嵌)都已经下载和解析完成。
    把JS放在CSS后会导致页面阻塞,去等待CSS的下载。另外如果要在head引入JS尽量将JS内嵌。

  • 解释白屏FOUC

    • 浏览器的白屏与无样式内容闪烁(FOUC),是由于浏览器加载与显示页面方式不同造成的:
      在写HTML代码时,我们都是将CSS文件的引入位置放在头部(标签内部),将js文件的引入位置放在底部(前面)。
      含义:不同的浏览器对于CSS和HTML的处理方式不同,有的是等待CSS加载完成之后,对HTML元素进行渲染和展示(白屏问题)。有的是先对HTML元素进行展示,然后等待CSS加载完成之后重新对样式进行修改(FOUC无样式内容闪烁
      解释:
      1.如果把CSS样式放在底部,对于IE浏览器,在某些场景下(新窗口打开,刷新等)页面会出现白屏,而不是内容逐步展现,如果使用 @import标签,即使 CSS 放入link, 把JavaScript放在head中,脚本会阻塞后面内容的呈现,脚本会阻塞其后组件的下载,出现白屏问题。
      2.如果把CSS样式放在底部,对于IE浏览器,在某些场景下(点击链接,输入URL,使用书签进入等),会出现 FOUC 现象(逐步加载无样式的内容,等CSS加载后页面突然展现样式).对于 Firefox 会一直表现出 FOUC 。
  • asyncdefer的作用是什么?有什么区别

作用: async和defer``可以达到不阻塞渲染的效果。

  • 带有defer属性的

你可能感兴趣的:(20161226作业)