js bom

最新推荐文章于 2024-07-19 12:58:53 发布

谦虚且进步

最新推荐文章于 2024-07-19 12:58:53 发布

阅读量452

点赞数

分类专栏： JavaScript 文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/weixin_44992737/article/details/126166621

版权

JavaScript 专栏收录该内容

31 篇文章 2 订阅

订阅专栏

bom全称浏览器模型。js通过api与浏览器进行交互，浏览器也提供一些组件协助js工作。

一，script标签引入网络js脚本时的协议问题

2.2 将script标签放入head中还是body尾巴处？

2.3 defer解决阻塞效应

2.4 async解决阻塞效应

2.5 defer与async的优先级与如何选择？

7.1 window.srceenX&window.srceenY

7.2 window.innerHeight&window.innerWidth

7.3 window.outHeight&window.outWidth

7.4 window.scrollX&window.scrollY

一，script标签引入网络js脚本时的协议问题

1.1 http形式

不安全但是快速。

<script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"> </script>

1.2 https形式

安全但是不快速。

<script src="http://unpkg.com/swiper@8/swiper-bundle.min.js"> </script>

1.3 跟随域名

将协议省略，则加载时自动使用当前主域名的加载协议。

<script src="//unpkg.com/swiper@8/swiper-bundle.min.js"> </script>

二，srcipt标签的工作原理

2.1 浏览器的工作原理

当打开一个网页，浏览器就会通过http协议请求各种js文件，图片资源……但是最先请求的必然是html文档。浏览器将html文档从服务器下载到内存，然后立即对其进行解析渲染，注意：即使html文档并没有全部下载完毕也会进行解析渲染。

当解析html文档时，浏览器遇见script标签就会暂停渲染html的dom树，而是等待script中src中引入的js脚本下载完毕并执行完毕。当js文本加载并执行完毕，再继续解析html进行网页渲染。

2.2 将script标签放入head中还是body尾巴处？

放入body尾巴处，浏览器会将html解析完毕再执行js脚本，这会导致网页频繁的回流重绘，让人觉得浏览器让电脑变卡变慢。

放入head中，如果遇见js的url地址反应太慢，会使网页一篇空白，让人觉得网站太垃圾。这就是所谓的阻塞效应，即js解析引擎一直pending，网页渲染引擎没有cpu算力导致网页空白或者不响应。

所以应该理智选择放在哪里。

2.3 defer解决阻塞效应

在srcipt标签中加入defer属性。在等待js脚本下载的过程中，也会并发解析html网页，等到网页解析完毕再回头执行js。

<script src="https://unpkg.com/swiper@8/swiper-bundle.min.js" defer> </script>

2.4 async解决阻塞效应

在srcipt标签中加入async属性。在等待js脚本下载的过程中，也会并发解析html网页，等到js脚本下载完毕，则立刻暂停网页渲染去执行js脚本，完成之后再渲染网页。

<script src="https://unpkg.com/swiper@8/swiper-bundle.min.js" async> </script>

2.5 defer与async的优先级与如何选择？

如果defer与async同时添加，async会生效。由于async是异步的，如果一个网页之中的js脚本存在前后依赖关系，组推荐使用defer。

三，回流和重绘

将dom树转换为网页布局称为布局流。布局显示到页面的过程叫做绘制，会产生阻塞效应。css样式表和js脚本操作dom树都会使dom树发生改变，从而导致网页的布局变化。

重绘：html标签由于样式改变(颜色，形状……)从而再页面上的显示发生变化。

回流：html标签之间的位置，可见度发生变化，进而导致页面整体布局发生变化。

应当尽量避免重绘与回流。且回流必定导致重绘。

3.1 造成回流的原因

3.2 造成重绘的原因

3.3 优化技巧

重绘是依据dom树重新渲染网页。

四，定时器

定时器类似于闹钟，在规定时间之后再去做某事。定时器一般绑定在window上，即浏览器上。可以认为定时器就是浏览器的一个组件。

4.1 setTimeout

n = setTimeout(handler,timeot)。handler表示定时完毕之后需要做的事；timeout表示定时时长。n代表定时器返回时提供的编号。

如果定时器作为的是某对象的方法，则对象里面的定时器的this指向全局window，而不是调用者。这是因为浏览器会对js脚本中的定时器进行统一管理。

取消定时器的方法：clearTimeout(id)，id为定时器序号。

4.2 setInterval

n = setInterval()，与setTimeout类似，不过会重复执行指定事件。

五，防抖debounce

5.1 防抖debounce简介

防抖用于处理频率过高的问题，比如某个事件被频繁触发导致cpu爆满，用户体验差关闭了当前页面。

比如页面右侧滚动条上下滑动的时候会导致页面回流，如果用户一直拖着滚动条上下移动就会导致cpu风扇开始转。这个时候就要对用户进行限制，比如一秒才出发一次回流，这就十分的nice，这种做法就叫做防抖。

防抖的主要思路就是：对某个比较消耗性能的事件用定时器进行限制，在规定时间内假如事件一直被触发则让其失效，只有当事件触发条件停止之后才进行执行。

注意：定时器的生成一般由事件触发，由于定时器生成太多也会耗性能，故应该想办法只生成一个定时器。

5.2 防抖的实际案例

只有当鼠标滚轮停止滚动300ms之后才触发事件。这里用到了事件机制，即：事件函数只提交注册一次，当事件被触发，执行的是事件函数的代码体，而不是重复注册事件。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            height: 400px;
            background-color: aqua;
            margin-top: 10px;
        }
    </style>
</head>

<body>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <script>
        fn = () => console.log(document.documentElement.scrollTop);
        function debounce(fn, timeout) {
            var timer = null;
            function timerWithargs() {
                if (timer) {
                    clearTimeout(timer);
                }
                timer = setTimeout(fn, timeout)
            }
            return timerWithargs
        }
        window.onscroll = debounce(fn, 300); //timer = setTimeout(fn, timeout)会被执行
    </script>
</body>
</html>

六，节流throtle

6.1 节流简介

与防抖类似。禁止某事件频发触发消耗资源。

主要思路：类似与技能冷却，使用之后一定时间内无法在执行。只需要使用一个flag来确定是否在冷却时间内即可。

6.2 节流实际案例

300ms执行一次。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            height: 400px;
            background-color: aqua;
            margin-top: 10px;
        }
    </style>
</head>

<body>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <script>
        fn = () => console.log(document.documentElement.scrollTop);

        function debounce(fn, timeout) {
            var valid = true;
            //注意第一次必须要生成一个定时器，所以要确保if的条件与初始valid值的关系
            function timerWithargs() {
                if (!valid) {
                    //这里的作用相当于让函数pending，则valid为false，return结束函数
                    return false
                }
                valid = false
                timer = setTimeout(() => {
                    fn();
                    valid = true;//300ms后置valid为true，pending失效，随机生成一个定时器
                }, timeout)
            }
            return timerWithargs
        }
        window.onscroll = debounce(fn, 300);
    </script>
</body>

</html>

七，window对象常用属性

window对象指的是当前的浏览器窗口，是最高一层的对象，其他对象都是他的下属。

7.1 window.srceenX&window.srceenY

表示浏览器窗口左上角举例电脑屏幕的x，y距离。单位px。

7.2 window.innerHeight&window.innerWidth

表示当前页面的可见高度和宽度，即viewport。注意：包括滚动条的高度和宽度。单位px。

7.3 window.outHeight&window.outWidth

表示当前浏览器的窗口大小，包括菜单栏和状态栏。

7.4 window.scrollX&window.scrollY

表示当前页面上下左右滚动的像素值。

八，window对象常用方法

有alert(),prompt(),confirm()，他们都用于弹出提示框与用户交互。prompt可以输入参数提交；confirm可以确定和取消并给确定和取消绑定事件。

open(url)可以直接打开一个新的浏览器窗口。

九，navigator对象

一般指window.navigator，包含浏览器和系统信息。

9.1 navigator对象的属性大全

appCodeName：返回浏览器的代码名称；appName：返回浏览器的名称；appVersion：返回浏览器的版本信息；cookieEnabled：确定是否在浏览器中启用了cookie；geolocation：返回可用于定位用户位置的Geolocation对象；language：返回浏览器的语言；onLine：确定浏览器是否在线；platform：返回编译浏览器的平台；product：返回浏览器的引擎名称；userAgent：返回浏览器发送给服务器的用户代理标头。Plugins：显示浏览器插件。

十，Screen对象

提供显示设备的信息。比如分辨率，浏览器窗口占用的屏幕范围。分辨率：window.screen；屏幕高度和宽度：window.screen.height/width；浏览器所占屏幕高度和宽度：window.screen.availHeight,window.screen.availWidth；屏幕位深：window.screen.pixelDepth；横评还是竖屏：window.screen.orientation。