-
CSS和JS在网页中的放置顺序是怎样的?
一般情况下CSS放在用style标签放在<head>的末尾,而JS放置在<body>的末尾。
**JS 有可能会修改 DOM. **典型的,可能会有 document.write. 这意味着,在当前 JS 加载和执行完成前,后续所有资源的下载有可能是没必要的。这是 JS 阻塞后续资源下载的根本原因。
JS 的执行有可能依赖最新样式。比如,可能会有 var width = $('#id').width(). 这意味着,JS 代码在执行前,浏览器必须保证在此 JS 之前的所有 css(无论外链还是内嵌)都已下载和解析完成。这是 CSS 阻塞后续 JS 执行的根本原因。
现代浏览器很聪明,会进行 prefetch 优化。性能是如此重要,现代浏览器在竞争中,在 UI update 线程之外,还会开启另一个线程,对后续 JS 和 CSS 提前下载(注意,仅提前下载,并不执行)。有了 prefetch 优化,这意味着,在不存在任何阻塞的情况下,理论上 JS 和 CSS 的下载时机都非常优先,和位置无关。
-
解释白屏和FOUC
浏览器的白屏与无样式内容闪烁(Flash of unstyled content),是由于浏览器加载与显示页面方式不同造成的: IE 会出现白屏现象,这是因为,其等待页面组件包括样式表全部加载完成后才呈现整个页面。若样式表放在页面底部,将会出现白屏。——样式表在页面中位置并不影响页面中组件的下载时间,但是会影响页面的呈现。
IE 为什么会这样做?David Hyatt给出了很好的解释: 如果样式表仍在加载,构建呈现树就是一种浪费,因为在所有样式表加载并解释完毕之前无需要绘制任何东西,否则,在其准备好之前显示的内容会遇到FOUC问题。 这样IE 就避免了FOUC问题,也就自然的会出现白屏现象。在IE中,将样式表放在文档底部公导致白屏问题的情形有以下几种: 一、在新窗口中打开时 二、重新加载时 三、作为主页打开时 FireFox 当把样式表放在页面底部时,会遇到FOUC问题,因为FF为了用户体验,对所有都是对页面中的组件逐步呈现。
此外,引入样式表时,有两种方式:link和@import
link: <link rel = "stylesheet" href="styles1.css">
@import: <style type = "text/css">
@import url("styles1.css");
@import url("styles2.css");
... ...
</style>
一个style块可以包含多个@import规则,但@import规则必须放在所有其他规则之前。 使用@import规则需要注意的是:即便把@import规则放在文档的HEAD标签中,可能导致页面组件下载时的无序性,进而导致白屏(对于IE)和FOUC(对于FF)问题的产生。
为了很好的避免白屏和FOUC问题,请遵循以下规则: 使用LINK标签将样式表放在文档的HEAD中
-
async和defer的作用是什么?有什么区别
<script src="script.js"></script>
没有 defer或 async,浏览器会立即加载并执行指定的脚本,“立即”指的是在渲染该 script标签之下的文档元素之前,也就是说不等待后续载入的文档元素,读到就加载并执行。
<script async src="script.js"></script>
有 async,加载和渲染后续文档元素的过程将和 script.js的加载与执行并行进行(异步)。
<script defer src="myscript.js"></script>
有 defer,加载后续文档元素的过程将和 script.js的加载并行进行(异步),但是 script.js的执行要在所有元素解析完成之后,DOMContentLoaded事件触发之前完成。
-
简述网页的渲染机制
浏览器这边做的工作大致分为以下几步:
加载:根据请求的URL进行域名解析,向服务器发起请求,接收文件(HTML、JS、CSS、图象等)。
解析:对加载到的资源(HTML、JS、CSS等)进行语法解析,建议相应的内部数据结构(比如HTML的DOM树,JS的(对象)属性表,CSS的样式规则等等)
渲染:构建渲染树,对各个元素进行位置计算、样式计算等等,然后根据渲染树对页面进行渲染(可以理解为“画”元素)
这几个过程不是完全孤立的,会有交叉,比如HTML加载后就会进行解析,然后拉取HTML中指定的CSS、JS等。
-
JavaScript 定义了几种数据类型? 哪些是简单类型?哪些是复杂类型?
六种:String 类型、Null 类型、Number 类型、Undefined类型、Boolean 类型、Object 类型。前面五种为简单类型。
-
NaN、undefined、null分别代表什么?
NaN:not a number,表示非数字,NaN和任何值都不相等,包括自己。
undefined:表示"缺少值",就是此处应该有一个值,但是还没有定义。
null:表示"没有对象",即该处不应该有值。
-
typeof和instanceof的作用和区别?
typeof的作用
typeof是一元运算符,返回值为字符串,该字符串用来说明运算数的数据类型用来获取运算数的数据类型。返回的值有number、boolean、undefined、function、object、string
number:数字会返回number类型
boolean:boolean值只有true和false
undefined:当变量未被声明时会返回undefined,这与var name;alert(name);
是不一样的。后者是指变量已声明,但未被初始化。
function:当运算数为函数时,返回function
obeject:对象、数组、null会返回object。正因为typeof遇到数组、null都会返回object,所以我们要判断某个对象是否是数组或者某个变量是否是对象的实例时就要使用instanceof
string:当运算数为字符串时会返回string
instanceof的作用
instanceof用于判断某个变量是否是某个对象的实例,返回值为true或false