前端监控 SDK 的一些技术要点原理分析 about front-end-articles

[Wujinbo666]

太牛了

[NameWjp]

有个疑问：https://developer.mozilla.org/zh-CN/docs/Web/API/PerformanceObserver/observe 这个方法接受的参数是 entryTypes 而且没有 buffered 参数，而且 entryTypes 中没有 layout-shift 的 value (https://developer.mozilla.org/zh-CN/docs/Web/API/PerformanceEntry/entryType)，所以这些参数的文档是哪里查的，还是说已经是过时的，文档没有记载？

[woai3c]

https://developer.mozilla.org/zh-CN/docs/Web/API/PerformanceObserver/observe

https://developer.mozilla.org/en-US/docs/Web/API/PerformanceObserver/observe 看下英文的，中文翻译有问题。

[NameWjp]

https://developer.mozilla.org/zh-CN/docs/Web/API/PerformanceObserver/observe

https://developer.mozilla.org/en-US/docs/Web/API/PerformanceObserver/observe 看下英文的，中文翻译有问题。

感谢

[tabooc]

isInScreen方法不能准确判断元素是否在可视窗口内，

const viewportWidth = window.innerWidth
const viewportHeight = window.innerHeight

// dom 对象是否在屏幕内
function isInScreen(dom) {
    const rectInfo = dom.getBoundingClientRect()
    if (rectInfo.left < viewportWidth && rectInfo.top < viewportHeight) {
        return true
    }

    return false
}

按上面代码的判断方式，滚动到第二屏的时候，第一屏的元素还符合isInScreen。

[woai3c]

isInScreen方法不能准确判断元素是否在可视窗口内，

const viewportWidth = window.innerWidth
const viewportHeight = window.innerHeight

// dom 对象是否在屏幕内
function isInScreen(dom) {
    const rectInfo = dom.getBoundingClientRect()
    if (rectInfo.left < viewportWidth && rectInfo.top < viewportHeight) {
        return true
    }

    return false
}

按上面代码的判断方式，滚动到第二屏的时候，第一屏的元素还符合isInScreen。

const viewportWidth = window.innerWidth
const viewportHeight = window.innerHeight

// dom 对象是否在屏幕内
function isInScreen(dom) {
    const rectInfo = dom.getBoundingClientRect()
    if (
        rectInfo.left >= 0 
        && rectInfo.left < viewportWidth
        && rectInfo.top >= 0
        && rectInfo.top < viewportHeight
    ) {
        return true
    }
}

用这个，文章里的不是最新版。

[dztony]

学习

[mazhiwuzhe]

getBoundingClientRect获取元素几何属性的时候，会导致回流吧？
是不是有性能问题

[woai3c]

getBoundingClientRect获取元素几何属性的时候，会导致回流吧？ 是不是有性能问题

这个方法是获取 DOM 属性用的，并不是设置这个 DOM 元素的属性值，所以不会导致回流。