{"action":"reopened","issue":{"url":"https://api.github.com/repos/hoperyy/home/issues/101","repository_url":"https://api.github.com/repos/hoperyy/home","labels_url":"https://api.github.com/repos/hoperyy/home/issues/101/labels{/name}","comments_url":"https://api.github.com/repos/hoperyy/home/issues/101/comments","events_url":"https://api.github.com/repos/hoperyy/home/issues/101/events","html_url":"https://github.com/hoperyy/home/issues/101","id":293842768,"number":101,"title":"首屏自动打点原理（beta 版）","user":{"login":"hoperyy","id":5757051,"avatar_url":"https://avatars1.githubusercontent.com/u/5757051?v=4","gravatar_id":"","url":"https://api.github.com/users/hoperyy","html_url":"https://github.com/hoperyy","followers_url":"https://api.github.com/users/hoperyy/followers","following_url":"https://api.github.com/users/hoperyy/following{/other_user}","gists_url":"https://api.github.com/users/hoperyy/gists{/gist_id}","starred_url":"https://api.github.com/users/hoperyy/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/hoperyy/subscriptions","organizations_url":"https://api.github.com/users/hoperyy/orgs","repos_url":"https://api.github.com/users/hoperyy/repos","events_url":"https://api.github.com/users/hoperyy/events{/privacy}","received_events_url":"https://api.github.com/users/hoperyy/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":0,"created_at":"2018-02-02T10:33:17Z","updated_at":"2018-05-29T05:02:30Z","closed_at":null,"author_association":"OWNER","body":"## 首屏自动打点原理\r\n\r\n### 方案一：轮询\r\n\r\n+   方案内容\r\n\r\n    +   设定时间段：0 ~ 3s，默认 3s 时刻页面处于稳定状态\r\n    +   以 50ms 为间隔，循环计算\r\n\r\n        每次计算记录三个数据：\r\n        \r\n        （1）当前时刻首屏内的图片链接数量\r\n        （2）当前时刻首屏内已加载的图片数量\r\n        （3）当前时刻时间戳\r\n        \r\n    +   当轮训到 3s 的最后一次时\r\n\r\n        从前到后，遍历中途所有打点数据，如果某个时刻满足下面两个条件：\r\n        \r\n        （1）当时首屏内的图片数量和 3s 时图片数量一致\r\n        （2）当时已加载的图片数量大于或等于 3s 时的图片数量\r\n        \r\n        则认为该时刻首屏加载完毕。\r\n    \r\n+   缺点\r\n\r\n    如果页面没有运行 3s 用户已离开，则首屏时间较短的那些样本会丢失，导致总体获取的首屏时间较长。\r\n    \r\n### 方案二：监听\r\n\r\n+   方案内容\r\n\r\n    （1）页面打开后，如果容器高度大于等于首屏高度，则开始监听首屏内图片加载情况\r\n    （2）页面打开后，如果容器高度小于首屏高度，利用浏览器 API MutationObserver 监听页面容器的 DOM 变化情况。每次变化触发回调（做防抖）时，计算容器高度是否大于首屏，如果大于首屏，开始监听首屏内图片加载情况，图片加载完成，则认为首屏加载完毕。\r\n\r\n+   缺点\r\n\r\n    对于第（1）种情况，如果首屏的图片是通过 XHR 请求获取的，dom 中并没有呈现 img dom，则计算的时间会提前。\r\n    \r\n    第（2）种情况也可能有上述情况。"}}
{"actor":{"display_login":"hoperyy"}}