Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Network的reportImageNetwork方法是否需要考虑其他元素的backgroundimage样式？ #30

Open
nonameShijian opened this issue Jul 13, 2024 · 5 comments
Open

Network的reportImageNetwork方法是否需要考虑其他元素的backgroundimage样式？ #30

nonameShijian opened this issue Jul 13, 2024 · 5 comments

Comments

@nonameShijian
Copy link
Contributor

No description provided.

@Nice-PLQ
Copy link
Owner

这个似乎需要遍历完整的DOM节点来查找具有backgroundImage属性的元素，而且需要监听DOM的变化。暂时还没有找其他更好的实现方式

@nonameShijian
Copy link
Contributor Author

这个方法用document.all说不定可行。但是我怕性能有问题。

如果是fetch请求一个图片资源的话，判断返回是否是个图片资源然后在控制台显示它的图片应该更为可行

@nonameShijian
Copy link
Contributor Author

或许不需要二次请求？respond有一个clone方法，允许body多次使用

@Nice-PLQ
Copy link
Owner

似乎比较麻烦，首先需要获取到有backgroundImage的DOM元素，然后需要处理图片是相对路径的情况，最后需要主动fetch图片，这样才会在Devtools的Network中有请求记录。这里还有一个是要考虑图片跨域的问题，现在的做法都是将图片URL请求到node层，在node把图片fetch后转成base64返回

@nonameShijian
Copy link
Contributor Author

我觉得有两个更容易实现的方法，一个是Performance api获取resource请求。另一个是service worker，两个应该都能hook所有请求，但是后者有环境要求。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@Nice-PLQ @nonameShijian