js如何获得页面的大小?

Posted 2023-03-15

参考技术A <script type="text/javascript"> <!--
var winWidth = 0;
var winHeight = 0;
function findDimensions() //函数：获取尺寸

//获取窗口宽度
if (window.innerWidth)
winWidth = window.innerWidth;
else if ((document.body) && (document.body.clientWidth))
winWidth = document.body.clientWidth;
//获取窗口高度
if (window.innerHeight)
winHeight = window.innerHeight;
else if ((document.body) && (document.body.clientHeight))
winHeight = document.body.clientHeight;

//通过深入Document内部对body进行检测，获取窗口大小
if (document.documentElement && document.documentElement.clientHeight &&
document.documentElement.clientWidth)

winHeight = document.documentElement.clientHeight;
winWidth = document.documentElement.clientWidth;

//结果输出至两个文本框
document.form1.availHeight.value= winHeight;
document.form1.availWidth.value= winWidth;

findDimensions(); //调用函数，获取数值
window.onresize=findDimensions;
//-->
</script> 参考技术B ？？？
问题写详细点萨

如何获得完整页面加载的传输大小？

【中文标题】如何获得完整页面加载的传输大小？

【英文标题】：How to get transferred size of a complete page load?

【发布时间】：2015-02-13 22:16:55

【问题描述】：

使用 Selenium 或 JavaScript，您如何获得已加载页面的（通过网络）传输大小（字节），包括所有内容、图像、css、js等？

首选大小是通过网络传输的大小，即压缩的大小，仅用于发出的请求等。

这是您通常可以在开发工具中看到的，在网络状态栏的右侧：

 

如果这不可能，是否可以只获得所有加载资源的总大小（没有压缩等）？那将是一个可以接受的替代方案。

浏览器是 Firefox，但如果可以使用其他兼容 Selenium 的浏览器也可以。

 

我想这可以使用 代理 来完成，但是有没有 JS 或 Selenium 方法来获取这些信息？

如果代理是唯一的方法，那么将使用（或实施）哪一种方法来简化此类任务？只是在设置驱动程序之前用 Java 实现一些东西？

（该解决方案至少可以在 Linux 上运行，但最好也可以在 Windows 上运行。我正在通过 Java 使用 Selenium WebDriver。）

【问题讨论】：

为什么投反对票？谢谢你的帽子。 ;-)

Selenium 和 JS 都无法访问电线（网络）。他们只能看到渲染引擎 (DOM)。您将需要其他东西来获取该信息。

【参考方案1】：

是的，您可以使用 BrowserMobProxy 来完成。这是一个使用 selenium 代理跟踪来自客户端的网络流量的 java jar。 比如页面加载持续时间，查询字符串到不同的服务等。 你可以得到它 bmp.lightbody.net 。此 api 将创建 .har 文件，其中将包含所有这些 json 格式的信息，您可以使用这些信息来阅读 一个在线工具http://www.softwareishard.com/har/viewer/

【参考方案2】：

为了将来参考，可以通过 javascript 从浏览器请求此信息。但是，在撰写本文时，尚无浏览器支持此特定数据的此功能。 More information can be found here.

同时，对于 Chrome，您可以从性能日志中解析此信息。

    //Enable performance logging
    LoggingPreferences logPrefs = new LoggingPreferences();
    logPrefs.enable(LogType.PERFORMANCE, Level.ALL);
    capa.setCapability(CapabilityType.LOGGING_PREFS, logPrefs);

    //Start driver
    WebDriver driver = new ChromeDriver(capa);

然后你可以像这样获取这些数据

for (LogEntry entry : driver.manage().logs().get(LogType.PERFORMANCE)) 
        if(entry.getMessage().contains("Network.dataReceived")) 
            Matcher dataLengthMatcher = Pattern.compile("encodedDataLength\":(.*?),").matcher(entry.getMessage());
            dataLengthMatcher.find();
            //Do whatever you want with the data here.
        

如果像您的情况一样，您想知道单个页面加载的细节，您可以使用加载前和加载后时间戳，并且只获取该时间范围内的条目。

【参考方案3】：

我已经在 Python 中实现了这一点，这可能会为人们节省一些时间。设置日志记录：

logging_prefs = 'performance' : 'INFO'    
caps = DesiredCapabilities.CHROME.copy()
caps['loggingPrefs'] = logging_prefs
driver = webdriver.Chrome(desired_capabilities=caps)

计算总数：

total_bytes = []
for entry in driver.get_log('performance'):
        if "Network.dataReceived" in str(entry):
            r = re.search(r'encodedDataLength\":(.*?),', str(entry))
            total_bytes.append(int(r.group(1)))
            mb = round((float(sum(total_bytes) / 1000) / 1000), 2)

【参考方案4】：

Hakello 的回答中提到的性能 API 现在得到了很好的支持（除了 IE 和 Safari 之外的所有东西），并且易于使用：

return performance
  .getEntriesByType("resource")
  .map((x) => x.transferSize)
  .reduce((a, b) => (a + b), 0);

您可以使用executeScript 运行该脚本以获取自上次导航事件以来下载的字节数。无需设置或配置。