行吟阁 2019-12-29
<body>
和<head>
有什么区别?<body>
和<head>
有什么区别?在HTML body部分中的js会在页面加载的时候被执行。在HTML head部分中的js会在被调用的时候才执行,但是在主页和其余部分代码之前预先装载
<head>
中,如果不添加 async 或者 defer 时,当浏览器遇到 script 时,会阻塞 DOM 树的构建,进而影响页面的加载。当 js 文件较多时,页面白屏的时间也会变长。在这个过程中,如果解析器遇到了一个脚本(script),它就会停下来,并且执行这个脚本,然后才会继续解析 HTML。如果遇到了一个引用外部资源的脚本(script),它就必须停下来等待这个脚本资源的下载,而这个行为会导致一个或者多个的网络往返,并且会延迟页面的首次渲染时间。<body>
里(一般在</body>
的上面)时,由于 DOM 时顺序解析的,因此 js 不会阻塞 DOM 的解析。对于必须要在 DOM 解析前就要加载的 js,我们需要放在<head>
中head 部分中的脚本: 需调用才执行的脚本或事件触发执行的脚本放在HTML的head部分中。当你把脚本放在head部分中时,可以保证脚本在任何调用之前被加载,从而可使代码的功能更强大; 比如对*.js文件的提前调用。 也就是说把代码放在<head>
区在页面载入的时候,就同时载入了代码,你在<body>
区调用时就不需要再载入代码了,速度就提高了
<html> <head> <script type=”text/javascript”> …. </script> </head>
body 部分中的脚本: 当页面被加载时立即执行的脚本放在HTML的body部分。放在body部分的脚本通常被用来生成页面的内容
<html> <head> </head> <body> <script type=”text/javascript”> …. </script> </body>
body 和 head 部分可同时有脚本:你可在文件中放无数的脚本,因此你的文件中可以在body和head部分同时存在脚本。
<html> <head> <script type=”text/javascript”> …. </script> </head> <body> <script type=”text/javascript”> …. </script> </body>
外部脚本的使用:有时候你可能想在几个页面中运行同样的脚本程序, 而不需在各个页面中重复的写这些代码。这时你就要用到外部脚本。你可以把脚本写在一个外部文件中,保存在扩展名为 .js的文件中。
<html> <head> <script src=”xxx.js”></script> </head> <body> </body> </html>
如果把javascript放在head里的话,则先被解析,但这时候body还没有解析。(常规html结构都是head在前,body在后)如果head的js代码是需要传入一个参数(在body中调用该方法时,才会传入参数),并需调用该参数进行一系列的操作,那么这时候肯定就会报错,因为函数该参数未定义(undefined)
从JavaScript对页面下载性能方向考虑:由于脚本会阻塞其他资源的下载(如图片等)和页面渲染,直到脚本全部下载并执行完成后,页面的渲染才会继续,因此推荐将所有的<script>
标签尽可能放到<body>
标签的底部,以尽量减少对整个页面下载的影响
浏览器解析css选择器的规则是从右向左的,这样会提高查找选择器所对应的元素的效率
div#box
,因为id选择器是惟一的,加上div反而增加不必要的css匹配,多此一举#box ul li a{}
写成.box-a{}
。在CSS渲染效率中,id和class的效率是基本相当的,class会在第一次载入中被缓存,在层叠中会有更好的效果,在根部元素采用id会有微妙的速度优势含义:new 运算符创建一个用户定义的对象类型的实例或具有构造函数的内置对象类型之一
步骤:模拟new操作前,要先知道new操作是发生了什么,就拿new Object()
举例
构造函数与原生new
function constructorFunction(name, age){ this.name = name; this.age = age; } constructorFunction.prototype.say = function(){ return 'Hello '+ this.name } var obj = new constructorFunction('eric', 18) console.log(obj.name, obj.age);//'eric', 18 console.log(obj.say())//Hello eric
模拟new
function newNew(){ var newObj = {} // 1. 创建一个新对象 var Con = [].shift.call(arguments) // 得到构造函数 newObj.__proto__ = Con.prototype; // 2. 把新对象的原型指向构造函数的prototype var res = Con.apply(newObj, arguments) // 3. 把构造函数里的this指向新对象 return typeof res === 'object' ? res : newObj; // 4. 返回新对象 } var obj = newNew(constructorFunction, 'eric', 18) console.log(obj.name, obj.age);//'eric', 18 console.log(obj.say())//Hello eric