javascript - 针对移动/低速连接进行优化 - 全背景视频

Question

我正在开发一个包含完整背景视频的网站。

为了优化低速连接/移动设备，我使用媒体查询来检测小于 768 像素的屏幕尺寸，然后在视频容器上执行 display:none 并改为显示背景图像。

我的问题是:

这是优化低速连接/移动设备的正确方法吗？当不显示带有 css 的容器时，它是否会对我的优化产生任何影响，或者我应该在加载页面时使用 JavaScript 进行优化？

Answer 1

媒体查询将允许您加载不同的图像(如果它们被设置为背景)，因此这是小屏幕的开始，但不适用于计算机上的低速，并且它不会在视频的情况下工作，或者是否正在加载其他文件。

在 JS 中

这是我目前能想到的，可能不太靠谱，因为这要看你的网站有多少内容。

它将包括仅加载最重要的内容(低速连接)，并获取内容(DOM、图像、css、js ...)的大概加载时间。然后您可以选择是否加载其余部分。

// get the current time as soon as you can (directly in the head tag)
var start = new Date().getTime();

// do the same after the page has loaded and find out the difference
window.onload = function(){
    var end = new Date().getTime();
    var timeTaken = end - start;
    alert('It took ' + timeTaken + ' ms to load');

    if(timeTaken < 2000){
        // load more stuff if it took less than 2 seconds, for example
    }
}

同样: 不太可靠(包含大量图片的页面会花费更长的时间，并且找到完美的“超时”(此处为 2 秒)并不容易。另外，这不会如果您的用户禁用了 JS，那是行不通的，但这不是我最近担心的问题:)您可能应该等待其他答案。

在 PHP 中

我能想到的另一种方法是在 PHP 中执行此操作(如果您愿意的话)。您可以让您的 php 页面获得客户端请求的时间。那么例如如果你有一个外部 JS，你可以这样做:

index.php

<script src="myScript.php?time=<?=microtime()?>"></script>

myScript.php 将是一个 php 页面，它将获取此请求的时间，将其与第一个进行比较，然后您可以根据它选择提供不同的 JS 文件(这称为代理页面)。

从您选择的 JS 文件中，您可以根据需要加载不同的内容。

myScript.php

<?php
    header("Content-Type: text/javascript");
    $start = intval( $_GET['time'] );
    $end = microtime();
    $timeTaken = $end - $start;

    if( $timeTaken < 2000 ){
        echo file_get_contents('JSForHighSpeed.js');
    } else {
        echo file_get_contents('JSForLowSpeed.js');
    }
?>