BOM

最新推荐文章于 2024-08-22 18:06:31 发布

zoekitty

最新推荐文章于 2024-08-22 18:06:31 发布

阅读量219

点赞数

分类专栏： javascript 文章标签： Bom

本文链接：https://blog.csdn.net/zoekitty/article/details/52163419

版权

javascript 专栏收录该内容

33 篇文章 1 订阅

订阅专栏

(2)JavaScript引擎

JavaScript引擎的主要作用是，读取网页中的JavaScript代码，对其处理后运行。

默认情况javascript是同步加载的，javascript的加载是阻塞的，后面的元素要等待js加载完毕后才能进行再加载。

2.defer属性（只支持IE）
<script src="1.js" defer=“defer”></script>
defer属性的作用是，告诉浏览器，等到DOM加载完成后，再执行
指定脚本。
1、浏览器开始解析HTML网页
2、解析过程中，发现带有defer属性的script标签
3、浏览器继续往下解析HTML网页，同时并行下载script标签中的
外部脚本
4、浏览器完成解析HTML网页，此时再执行下载的脚本

3.async属性是先执行脚本，在解析网页，但是先执行那个脚本是看那个脚本先下载完成。

defer属性和async属性使用哪一个？
async:如果脚本之间没有依赖关系
defer:如果脚本之间存在依赖关系

如果同时使用async属性和defer属性，后者defer不起作用

4.回流和重绘
布局显示到页面的这个过程，称为“绘制”（paint）。它具有阻
塞效应，并且会耗费很多时间和计算资源。
页面生成以后，脚本操作和样式表操作，都会触发回流（reflow）
和重绘（repaint）。用户的互动，也会触发，比如设置了鼠标悬
停（a:hover）效果、页面滚动、在输入框中输入文本、改变窗口
大小等等。
回流：大小或者位置发生改变
重绘：页面的内容样式发生了改变，但是并没有改变其位置，DOM树也没有改变。

var foolBar=document.getElementById('foolbar');
    //第一次重绘 （改变的是内容样式，但是位置并没有发生改变）
    foolBar.style.backgroundColor="red";

    //第二次重绘
    var foolBar = document.getElementById("foolbar");
    foolBar.style.backgroundColor ="green";

优化技巧：
1.读取DOM或者写入DOM，尽量写在一起，不要混杂
2.缓存DOM信息
3.不要一项一项地改变样式，而是使用CSS class一次性改变样式
4.使用document fragment操作DOM
5.动画时使用absolute定位或fixed定位，这样可以减少对其他元
素的影响
6.使用window.requestAnimationFrame()，因为它可以把代码推
迟到下一次重流时执行，而不是立即要求页面重流

<body>
<div id="div1" style="width:1px;height:17px;background: greenyellow;"></div>
<input id="btn1" type="button"  οnclick="progress1()">
<script>
    var oDiv1=document.getElementById('div1');
    var oBtn=document.getElementById('btn1');
    var wPlus=0;
 /** 第一种方法
  * function progress(){
      if(wPlus<100){
          wPlus=wPlus+1;
      }
          oDiv1.style.width=wPlus+"%";
          oDiv1.innerHTML=wPlus+"%";
  }
    function progress1(){
        setInterval(progress,100);
    }*/
//第二种方法
window.requestAnimationFrame=window.requestAnimationFrame||window.mozRequestAnimationFrame|| window.oRequestAnimationFrame||window.webkitRequestAnimationFrame;
  var state=false;//加入她是为了防止不停点击按钮时进度条的加快 与后面的第二个if语句有关
    function progress(){
        if(wPlus<100){
            wPlus=wPlus+1;
            oDiv1.style.width=wPlus+"%";
            oDiv1.innerHTML=wPlus+"%";
            requestAnimationFrame(progress) ;
        }
        state=true;
    }
oBtn.addEventListener("click",function(){
    if(!state){
        requestAnimationFrame (progress());
    }
},false)

window.requestAnimationFrame() 将告知浏览器你马上要开始动画效果了，浏览器需要在下次动画前调用相应方法来更新画面这个方法原理其实也就跟setTimeout/setInterval差不多，通过递归调用同一方法来不断更新画面以达到动起来的效果，但它优于setTimeout/setInterval的地方在于它是由浏览器专门为动画提供的API，在运行时浏览器会自动优化方法的调用可以直接调用，也可以通过window来调用，接收一个函数作为回调，返回一个ID值，通过把这个ID值传给window.cancelAnimationFrame()可以取消该次动画

5、脚本的动态嵌入
除了用静态的script标签，还可以动态嵌入script标签
['1.js', '2.js'].forEach(function(src) {
var script = document.createElement('script');
script.src = src;
document.head.appendChild(script);
});
这种方法的好处是，动态生成的script标签不会阻塞页面渲染，也
就不会造成浏览器假死。但是问题在于，这种方法无法保证脚本的
执行顺序，哪个脚本文件先下载完成，就先执行哪个

如果想避免这个问题，可以设置async属性为false
['1.js', '2.js'].forEach(function(src) {
var script = document.createElement('script');
script.src = src;
script.async = false;
document.head.appendChild(script);
});
上面的代码依然不会阻塞页面渲染，而且可以保证2.js在1.js后面执
行。不过需要注意的是，在这段代码后面加载的脚本文件，会因此
都等待2.js执行完成后再执行

console.log(window.innerHeight);//不包括菜单栏

6.关闭这个窗口和新建一个

/close(); 关闭这个窗口

//打开一个新窗口
    var config="width=300;height=500;top=100;left=100;";
    var openurl="http://www.baidu.com";
    var newWin = window.open(openurl,"uu",config);

（1）窗口的大小和位置
浏览器提供一系列属性，用来获取浏览器窗口的大小和位置。
1）window.screenX，window.screenY
window.screenX和window.screenY属性，返回浏览器窗口左上
角相对于当前屏幕左上角（(0, 0)）的水平距离和垂直距离，单位
为像素。
2）window.innerHeight，window.innerWidth
window.innerHeight和window.innerWidth属性，返回网页在当
前窗口中可见部分的高度和宽度，即“视口”（viewport），单位
为像素。

IE、Safari、Opera和Chrome提供了screenLeft和screenTop
screenLeft：用于表示浏览器窗口相对于屏幕左边的位置
screenTop：用于表示浏览器窗口相对于屏幕上边的位置
Firefox提供了screenX和screenY方法（Safari、Chrome也支持）
screenX：返回浏览器窗口左上角相对于当前屏幕左上角（(0, 0)）
的水平距离
screenY：返回浏览器窗口左上角相对于当前屏幕左上角（(0, 0)）
的垂直距离

使用下列代码可以跨浏览器取得窗口左边和上边的位置
var leftPos = (typeof window.screenLeft == “number”) ?
window.screenLeft : window.screenX;
var topPos = (typeof window.screenTop == “number”) ?
window.screenTop : window.screenY;
首先确定screenLeft和screenTop属性是否存在？
如果存在（在IE、Safari、Opera和Chrome中），则取得这两个
属性的值。
如果不存在（Firefox中），则取得screenX和screenY的值
IE9+、Firefox、Safari、Opera和Chrome均支持这4个属性:
innerWidth、innerHeight、outerWidth、outerHeight
window.innerHeight:返回网页在当前窗口中可见部分的高度
window.innerWidth:返回网页在当前窗口中可见部分的宽度
注意，这两个属性值包括滚动条的高度和宽度
window.outerHeight:返回浏览器窗口自身的高度，包括浏览器菜
单和边框，单位为像素
window.outerWidth:返回浏览器窗口自身的宽度，包括浏览器菜
单和边框

（2）window.location
location对象包含有关当前URL的信息-常用于获取和改变当前浏览的网址
//获取当前显示的页面的URL
var url = location.href;
console.log(url);
//更改要显示的页面URL --------页面跳转
location.href = “http://www.baidu.com”;

console.log(window.location.hash);
    console.log(window.location.host);
    console.log(window.location.hostname);
    console.log(window.location.href);
    console.log(window.location.pathname);
    console.log(window.location.port);
    console.log(window.location.protocol);
    console.log(window.location.search);

（3）navigator对象
Window对象的navigator属性，指向一个包含浏览器相关信息。
常用于获取客户端浏览器和操作系统信息
for(var attr in navigator){
console.log(attr+”:”+navigator[attr]);
}
//遍历navigator对象的所有属性

 for(var attr in navigator){
        console.log(attr+":"+navigator[attr]);
    }//返回navigator所有属性

console.log(navigator.appName);//Netscape  返回浏览器名称
    console.log(navigator.appVersion);//5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko)
    // Chrome/51.0.2704.106 Safari/537.36 返回浏览器的平台和版本信息
    console.log(navigator.language);//zh-CN  返回浏览器的语言
    console.log(navigator.platform);//Win32 返回浏览器的操作系统类型
    console.log(navigator.userAgent);//Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko)
    // Chrome/51.0.2704.106 Safari/537.36由客户端发送服务器的user-Agent头部的值
    console.log(navigator.appCodeName);//Mozilla 返回浏览器的代码名
    console.log(navigator.cpuClass);//undefined 返回浏览器系统的cpu类型
    console.log(navigator.onLine);//true  返回系统是否处于脱机模式的布尔值

下面是根据屏幕分辨率，将用户导向不同网页的代码。
if ((screen.width <= 800) && (screen.height <= 600)) {
window.location.replace('small.html');
} else {
window.location.replace('wide.html');

}