如何异步加载脚本
$(document).ready()
- 需要引入jquery
- 兼容所有浏览器
$(document).ready(function() { alert("加载完成!"); });
-
<script>标签的async="async"属性
- async属性是HTML5新增属性，需要Chrome、FireFox、IE9+浏览器支持
- async属性规定一旦脚本可用，则会异步执行
- async属性仅适用于外部脚本
- 此方法不能保证脚本按顺序执行
<script type="text/javascript" src="xxx.js" async="async"></script>
- <script>标签的defer="defer"属性
- defer属性规定是否对脚本执行进行延迟，直到页面加载为止
- 如果脚本不会改变文档的内容，可将defer属性加入到<script>标签中，以便加快处理文档的速度
- 兼容所有浏览器
- 此方法可以确保所有设置了defer属性的脚本按顺序执行
动态创建<script>标签
兼容所有浏览器
(function(){ var script = document.createElement('script'); script.type = 'text/javascript'; script.src = "http://code.jquery.com/jquery-1.7.2.min.js"; var tmp = document.getElementsByTagName('script')[0]; tmp.parentNode.insertBefore(script, tmp); })();
ES3、ES5、ES6分别指什么？
- ES3是ECMAScript的第三个版本
- ES5是ECMAScript的第五个版本
- ES6是ECMAScript的第六个版本
- 1999年12月，ECMAScript 3.0版发布，成为 JavaScript 的通行标准，得到了广泛支持。
- 2009年12月，ECMAScript 5.0版 正式发布。
- 2015年6月，ECMAScript 6 正式发布，并且更名为“ECMAScript 2015”。这是因为 TC39 委员会计划，以后每年发布一个 ECMAScript 的版本，下一个版本在2016年发布，称为”ECMAScript 2016”，2017年发布“ECMAScript 2017”，以此类推。
解释浏览器的渲染机制
- 解析 HTML 标签, 构建 DOM 树
- 解析 CSS 标签, 构建 CSSOM 树
- 把 DOM 和 CSSOM 组合成 渲染树 (render tree)
- 在渲染树的基础上进行布局, 计算每个节点的几何结构
- 把每个节点绘制到屏幕上 (painting)
具体实现
- 解析HTML以构建DOM树：渲染引擎开始解析HTML文档，转换树中的html标签或js生成的标签到DOM节点，它被称为 -- 内容树。
- 构建渲染树：解析CSS（包括外部CSS文件和样式元素以及js生成的样式），根据CSS选择器计算出节点的样式，创建另一个树 —- 渲染树。
- 布局渲染树: 从根节点递归调用，计算每一个元素的大小、位置等，给每个节点所应该出现在屏幕上的精确坐标。
- 绘制渲染树: 遍历渲染树，每个节点将使用UI后端层来绘制。
repaint 和 reflow 分别指什么
什么是 repaint 和 reflow？
- 一个页面由两部分组成：
- DOM：描述该页面的结构
- render：描述 DOM 节点 (nodes) 在页面上如何呈现
- 当 DOM 元素的属性发生变化 (如 color) 时， 浏览器会通知 render 重新描绘相应的元素，此过程称为 repaint。
- 如果该次变化涉及元素布局 (如 width)， 浏览器则抛弃原有属性，重新计算并把结果传递给 render 以重新描绘页面元素， 此过程称为 reflow。
- 这两个过程是很耗费浏览器性能的，从 IE 系列和 Chrome 渲染页面速度上的差距即可看出渲染引擎计算对应值和呈现并不一定高效， 而每次对元素的操作都会发生 repaints 或 reflow，因此编写 DOM 交互时如果不注意就会导致页面性能低下。
什么情况下会触发浏览器的repaint/reflow? - 除了页面在首次加载时必然要经历该过程之外，还有以下行为会触发这个行为：
- DOM元素的添加、修改（内容）、删除( Reflow + Repaint)
- 仅修改DOM元素的字体颜色（只有Repaint，因为不需要调整布局）
- 应用新的样式或者修改任何影响元素外观的属性
- Resize浏览器窗口、滚动页面
- 读取元素的某些属性（
offsetLeft、offsetTop、offsetHeight、offsetWidth、scrollTop/Left/Width/Height、clientTop/Left/Width/Height、getComputedStyle()、currentStyle(in IE))
应该怎么优化？ - 避免在document上直接进行频繁的DOM操作，如果确实需要可以采用off-document的方式进行，具体的方法包括但不完全包括以下几种：
- 先将元素从document中删除，完成修改后再把元素放回原来的位置
- 将元素的display设置为”none”，完成修改后再把display修改为原来的值
- 如果需要创建多个DOM节点，可以使用DocumentFragment创建完后一次性的加入document
- 集中修改样式
- 尽可能少的修改元素style上的属性
- 尽量通过修改className来修改样式
- 通过cssText属性来设置样式值
- 缓存Layout属性值
- 对于Layout属性中非引用类型的值（数字型），如果需要多次访问则可以在一次访问时先存储到局部变量中，之后都使用局部变量，这样可以避免每次读取属性时造成浏览器的渲染。
- 设置元素的position为absolute或fixed
- 在元素的position为static和relative时，元素处于DOM树结构当中，当对元素的某个操作需要重新渲染时，浏览器会渲染整个页 面。将元素的position设置为absolute和fixed可以使元素从DOM树结构中脱离出来独立的存在，而浏览器在需要渲染时只需要渲染该元素 以及位于该元素下方的元素，从而在某种程度上缩短浏览器渲染时间，这在当今越来越多的Javascript动画方面尤其值得考虑。
- 权衡速度的平滑
- 比如实现一个动画，以1个像素为单位移动这样最平滑，但reflow就会过于频繁，CPU很快就会被完全占用。如果以3个像素为单位移动就会好很多。
- 不要用tables布局
- 不要用tables布局的另一个原因就是tables中某个元素一旦触发reflow就会导致table里所有的其它元素 reflow。在适合用table的场合，可以设置table-layout为auto或fixed，这样可以让table一行一行的渲染，这种做法也是为了限制reflow的影响范围
- 不要在css里面写expression
- 很多情况下都会触发reflow，如果css里有expression，每次都会重新计算一遍
解释白屏和 FOUC。
- 白屏
首先要了解一下chrome和IE浏览器的渲染机制。
- 解析HTML标签构建DOM树；
- 解析CSS构建CSSOM树；
- 把这两者组合成渲染树，根据渲染树进行布局，计算每个节点，再绘制到屏幕上。
- 如果把样式放在文档底部,浏览器会等HTML和CSS完全加载完成之后再绘制到屏幕上去，譬如我们打开某些国外的网站可能出现加载时间过长，页面会出现白屏,而不是内容逐步展现，这种现象就叫做白屏。
- FOUC:
- 如果把样式放在底部,对于FireFox浏览器，会逐步加载无样式的内容，等CSS加载完成之后突然展现样式。
- 这是由于FireFox的渲染逻辑是解析HTML就会直接画到页面上，这时你会看到没有样式的内容，CSS再通过不断的解析将页面重绘一遍，也就是闪烁一下突然展现样式，这就是FOUC。
网友评论