异步加载
JavaScrip
- 脚本放在
<head>
内:文档页面加载之前装载(不执行代码, 需调用才执行或事件触发执行)。 - 脚本放在
<body>
内:当页面被加载时执行,用来动态生成页面的一些内容。 - 增加延迟脚本
defer
属性 **
– defer是“渲染完再执行”
– 只适用外部脚本文件
– 立即下载,但延迟执行,</html>
标签之后执行
– 多个<script>
不一定按顺序执行 - 增加异步脚本
async
属性**
– async是“下载完就执行”
– 只适用外部脚本文件
– 立即下载,异步加载页面其它内容和其它脚本
– 多个<script>
不一定按顺序执行 - 脚本中增加window的事件,使得页面内容加载完毕后执行
1).window.onload = function () {}
页面所有内容加载完毕后执行。多个window.onload的情况下,只有最后一个被执行。
2).addLoadEvent
函数:页面所有内容加载完毕后执行。
3).window.onresize = function () {}
:页面所有内容已经加载完
4)._img.onload = function () {}
图片的onload的事件,在图片加载完成后执行回调函数。只执行一次,不能迭代执行。
jQuery
$(document).ready()
函数:DOM加载完毕后,页面全部内容(包括图片等)加载完毕前被执行。可以多个执行。$(window).load()
函数:等价于javaScript的window.onload()$('img').on('load', callback)
:图片的load事件,在图片加载完成后执行回调函数。只执行一次,不能迭代执行。
Vue
请求的后端数据、父组件传递的数据,都是异步的,DOM渲染之前得不到。
对象属性判断
if(foo.bar) {}
if(arr.length) {}
if(typeof foo.bar === undefined) {}
if(Object.hasOwnProperty(foo)) {}
if((function hasPrototypeProperty(object, property)) ()) {}
计算属性
- 计算属性:对静态数据附加一些额外的属性
- 计算属性:实时监听数据变化,返回新值
- 计算属性:对数组类型进行排序、截取等后进行列表渲染
- 计算属性:转化从父组件传来的数据
- 计算属性是响应式更新,在methods中更改无效。但对于引用类型,只要不更改地址,改变里面的数据结构,也是可以改变计算属性的。
- 计算属性可以正常计算,只是第一刻加载时如果有异步数据则不能在HTML渲染;如果计算属性依赖的某属性不存在,取undefined即可,但如果语法错误了,也不能正常计算。