17

一些移动浏览器和 IE8 javascript 不仅慢了一点，它还慢了 10 倍！有很多东西通过了特征检测测试（js css 操作等），但是速度太慢了，会降低用户体验。

Modernizr 会告诉我某个功能存在，但它不会告诉我它是否低于某个性能阈值。

检测 IE8 对 IE8 用户有效，但不适用于运行旧版本 FF、Safari、移动 Opera 等的慢速移动设备、平板电脑和计算机。

在不惩罚现代浏览器用户的情况下，有哪些有效的方法可以缓和或禁用慢速功能？

比时间戳代码执行块更好的方法吗？

4

3 回答 3

3

没有按设备按功能划分的公共性能数据库，也没有任何自动方式来打开和关闭潜在的慢速功能。您必须自己决定哪些功能在哪些设备上运行缓慢并将其关闭，例如

body.transitions-are-slow * {
  transition-property: none !important;
}

transitions-are-slow然后根据某种设备嗅探和对该设备性能的经验知识安排将课程放在身体上。

那是针对 CSS 的，但您也提到了 JS。但是，我想不出某些特定 JS API 在某些特定设备上特别慢的情况。JS 会在较慢的设备上均匀减速。因此，我真的不明白为什么或如何考虑基于设备性能问题关闭单个 JS 功能。

有比时间戳代码执行块更好的方法吗？

没有明显的方法来标记 CSS 性能，但对于 JS，我想你可以执行以下操作，请谨慎使用：

function kill_if_slower_than(fn, threshold) {
  var killed = false;
  return function() {
      if (killed) return;
      var start  = performance.now();
      var result = fn.apply(this, arguments);
      killed     = performance.now() - start > threshold;
      return result;
  };
}

threshold这将返回一个函数，该函数在第一次执行时间超过毫秒时将变为无操作。您显然不想在纯粹可选的东西以外的任何东西上使用它。它也不会帮助您处理异步情况。

由于分辨率更高，我在performance.now上面使用过，但是在某些较旧的浏览器上，您可能需要回退到Date.now().

于 2015-05-02T04:18:57.663 回答
1

即使您不喜欢 js 测试，Modenizr.js 也是一个自信的库，可以进行您可能需要的所有 css/js 测试。

否则，如果不尝试自己轮询（即在加载期间进行时间测量），就不可能测试实际计算机的能力。

IE 的另一个选择。是好的'ol HTML 条件。

<!--[if lt IE 8]>
    HTML CODE OR SCRIPTS
<![endif]-->

您可以让 PHP 分析浏览器提供的 User-Agent 字符串以获取浏览器版本，甚至操作系统键入并以这种方式重新路由请求，或者在文档中放入条件语句。这里有一个可用的轻量级库...

https://github.com/serbanghita/Mobile-Detect

<?php
require_once '../Mobile_Detect.php';
$detect = new Mobile_Detect;
$deviceType = ($detect->isMobile() ? ($detect->isTablet() ? 'tablet' : 'phone') : 'computer');
?>
<html>
   <body>
      <script src="js/main.<?= $deviceType ?>.min.js" type="text/javascript></script>
      <script>
          <? if($deviceType==='phone') { ?>
          alert('You're on a phone!');
          <? } ?>
   </body>
</html>

这段代码要做的是检测（使用用户代理字符串）它是什么类型的设备，然后在文档中打印出 javascript 文件所在的设备类型。因此，平板电脑用户的浏览器将加载 js 文件js/main.tablet.min.js。我还包括了一个小的条件示例。

于 2013-09-30T21:57:53.057 回答
0

I suggest this method:

First: in your HTML head section, place this code 

<!doctype html>
<!--[if lt IE 7 ]> <html class="6"> <![endif]-->
<!--[if IE 7 ]>    <html class="7"> <![endif]-->
<!--[if IE 8 ]>    <html class="8"> <![endif]-->
<!--[if IE 9 ]>    <html class="9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html class="10+"> <!--<![endif]-->
<head>

Then, you can easily detect with a little JS function what is the current version of IE and disable some features.

var modern_browser = true; 
var internet_explorer_version = null; 
var detectBrowser = function() {  
    var html = document.getElementsByTagName('html')[0]; 
    if (html.className === 'notie') 
    { 
        return ; 
    } 
    internet_explorer_version = html.className; 
    modern_browser = false;
    return; 
}();

if (modern_browser === false)
{ 
    alert ("You use Internet Explorer : version " + internet_explorer_version);
}
else 
{ 
    alert ("You use a modern Browser ;-)");
}

JSBin to test

于 2013-09-30T22:08:04.087 回答