js相关概念

一.CSS和JS在网页中的放置顺序是怎样的?
css放置在head中,js理论上可以放在网页上的任何地方,但是根据实际体验来讲,应该放在body的闭合标签前面。

二.解释白屏和FOUC。
1.白屏就是在IE浏览器里css放置在bodyhtml的标签后面,html的标签过多,加载太慢导致第一时间CSSOM树没有加载完成,然后没有和DOM树组合形成浏览界面变成白屏。
如果使用 @import 标签,即使 CSS 放入 link, 并且放在头部,也可能出现白屏。
因为脚本会阻塞后面内容的呈现和其后组件的下载
对于图片和CSS,在加载时会并发加载(如一个域名下同时加载两个文件)。但在加载JavaScript 时,会禁用并发,并且阻止其他内容的下载。所以把JavaScript放入页面顶部也会导致白屏现象。
2.FOUC是指firefox浏览器的渲染逻辑和chrome不太一样,一开始chrome是等待DOM树和CSSOM树渲染好一起形成页面结构才出来,而firefox每加载一次dom树就会重绘一次页面样式一直到所有内容完成为止,所以一般我们用link把css放在header内.

三.async和defer的作用是什么?有什么区别?
async和defer用于在不阻塞页面文档解析的前提下,控制脚本的下载和执行。
defer:用于开启新的线程下载脚本文件,并使脚本在文档解析完成后执行。
async:HTML5新增属性,用于异步下载脚本文件,下载完毕立即解释执行代码。


QQ截图20170420101759.jpg

2.两者的区别在于脚本加载完成之后何时执行,可以看出defer更符合大多数场景对应用脚本加载和执行的要求;

3.如果存在多个有defer属性的脚本,那么它们是按照加载顺序执行脚本的;而对于async,它的加载和执行是紧紧挨着的,无论声明顺序如何,只要加载完成就立刻执行,它对于应用脚本用处不大,因为它完全不考虑依赖。

四.简述网页的渲染机制.
1.解析html标签,构建DOM树
2.解析CSS标签,构建CSSOM标签
3.将DOM和CSSOM树结合形成渲染树
4.在渲染树的基础上进行布局,计算每个节点的几何结构。
5.把每个节点绘制到屏幕上

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 简单介绍JavaScript的发展历史 JavaScript因互联网而生,回顾它的历史要从浏览器的历史讲起。 19...
    _Dot912阅读 3,570评论 0 3
  • 1. CSS和JS在网页中的放置顺序是怎样的? css放在head标签内,防止渲染时出现白屏 js放在最后body...
    billa_8f6b阅读 3,685评论 0 0
  • 1,CSS和JS在网页中的放置顺序是怎样的? 网站加载的整个完整过程是:1、首先浏览器从服务器接收到html代码,...
    进击的前端_风笑影阅读 2,523评论 0 0
  • 1、CSS和JS在网页中的放置顺序是怎样的? (1)CSS 对于谷歌浏览器和Safari放在head里或body里...
    徐国军_plus阅读 3,349评论 0 0
  • CSS和JS在网页中的放置顺序 网站加载的整个完整过程:首先浏览器从服务器接收到html代码,然后开始解析html...
    Joey的企鹅阅读 2,271评论 1 0

友情链接更多精彩内容