简单响应页面会导致 Chrome 进程冻结

Simple Responsive page causes Chrome process to freeze

本文关键字：Chrome 进程 冻结 响应 简单      更新时间：2023-09-26

Chrome 使用以下代码锁定。 Chrome 将进入无限旋转状态，并在几次调整大小事件甚至 1 次后停止记录到控制台。 有时我不得不杀死Chrome进程。 我无法在FF或IE中重现它。 我也无法用翻转div 背景颜色而不是样式表的类似代码重现该问题。

三个样式表只是更改了background-color 

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link id="size-stylesheet"  rel="stylesheet" href="/Content/wide.css" />
    <script src="https://code.jquery.com/jquery-2.1.0.min.js"></script>
</head>
<body>
    <h1>This page is Responsive!</h1>
            <script type="text/javascript">
                function adjustStyle(width) {
                    console.log('adjusting style...');
                    width = parseInt(width);                                        
                    if (width < 1283) {
                        $("#size-stylesheet").attr("href", "/Content/narrow.css");
                    } else if ((width >= 1283) && (width < 1419)) {
                        $("#size-stylesheet").attr("href", "/Content/medium.css");
                    } else {
                        $("#size-stylesheet").attr("href", "/Content/wide.css");
                    }
                }
                $(function () {
                    adjustStyle($(this).width());
                    $(window).resize(function () {
                        console.log('resize fired...');
                        adjustStyle($(this).width());
                    });
                });
        </script>
</body>
</html>

请注意，我需要支持非HTML5浏览器，例如IE8和IE7。 因此，任何解决方案都需要考虑到这一点。

使用媒体查询。

然后，如果您必须支持 <=IE8，请使用 IE 条件注释为这些浏览器加载您的 JS 解决方法：

<![if lte IE 8]>
<script src="IEsucks.js"></script>
<![endif]-->

这样你就不会用额外的JS惩罚好的浏览器，而且你的网站已经是面向未来的。

（综上所述：我会质疑您的响应式网站必须在旧版本的IE中工作的要求。你真的有很多网站用户坚持在手机上使用旧版本的IE吗？

应用媒体查询，将您在 css 文件中的规则放在每个文件中：

@media only screen and (max-width: 1283px) {
    /* narrow */
}
@media only screen and (max-width: 1419px) {
    /* medium */
}
@media only screen and (min-width: 1419px) {
    /* wide */
}

如果使用 JS，可以使用 matchMedia 设置媒体查询条件： 

if (window.matchMedia("(min-width: 400px)").matches) {
  /* the view port is at least 400 pixels wide */
} else {
  /* the view port is less than 400 pixels wide */
}

https://developer.mozilla.org/en-US/docs/Web/API/Window.matchMedia

这是一篇关于CSS媒体查询的文章（在JS中也用作matchMedia的参数）。

有关更实际的示例，请查看一些CSS框架的代码，例如Twitter Bootstrap或Foundation。

在 JavaScript 中，有一个与 IE 兼容的 polyfill<= 8：paulirish/matchMedia.js。您只需将其包含在其他脚本之前，也许包含在 MS 条件注释中。

或者只是编写CSS并使用JS填充：scottjehl/Response。

以下代码根据当前浏览器宽度切换样式表。 我在IE7，IE10，Chrome v33和FF v28中测试了它。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>    
    <!--[if gt IE 8]><!-->
    <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.0.min.js"></script>
    <link rel="stylesheet" media="(min-width: 0px) and (max-width: 1282px)" href="Content/narrow.css" />
    <link rel="stylesheet" media="(min-width: 1293px) and (max-width: 1419px)" href="Content/medium.css" />
    <link rel="stylesheet" media="(min-width: 1420px)" href="Content/wide.css" />
    <!--<![endif]-->
    <!--[if lt IE 9]>
        <link id="size-stylesheet" rel="stylesheet" href="Content/narrow.css" />
        <script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
        <script type="text/javascript" src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
        <script type="text/javascript">
            function adjustStyle(width) {
                width = parseInt(width);
                if (width < 1283) {
                    $("#size-stylesheet").attr("href", "Content/narrow.css");
                } else if ((width >= 1283) && (width < 1419)) {
                    $("#size-stylesheet").attr("href", "Content/medium.css");
                } else {
                    $("#size-stylesheet").attr("href", "Content/wide.css");
                }
            }
            $(function () {
                adjustStyle($(this).width());
                $(window).resize(function () {
                    adjustStyle($(this).width());
                });
            });
        </script>
        <![endif]-->
</head>
<body>
    <h1>This page is Responsive!</h1>
</body>
</html>

有几点值得注意：

  • 不要在Chrome中使用Javascript在窗口大小调整时切换样式表。
  • jQuery 2.X不支持IE7。
  • 媒体查询非常适合 HTML5 浏览器。 否则，将 HTML5 支持添加为填充代码（例如 html5.js如下所示）。 并使用 JavaScript 切换 CSS 工作表。
  • 该代码利用下层显示的条件注释在非 IE 浏览器上有条件地运行代码
  • 为了进行测试，创建 3 个 CSS 文件并简单地更改body {background-color: }

你对 adjustSstyle 的调用太多了。 第一次调用 init，然后它可能会更改大小并从调整大小再次调用它。也不确定为什么你的代码没有嵌入到头部中。

工作示例：http://jsfiddle.net/ErURP/4/

使用 setTimeout 、 clearTimeout 和 http://yepnopejs.com 实现回调功能：

$(function(){
  $narrow_css = "http://f.cl.ly/items/3Y2P2q022R0B3X163c31/narrow.css";
  $medium_css = "http://f.cl.ly/items/3c2P3Z180l1s0j3S2v3k/medium.css";
  $wide_css = "http://f.cl.ly/items/2i0l3s1Z3K262z3X2X1e/wide.css";
  $resize_timer = null;
  $resize_timeout = 100;
  $css_tags = ['narrow','medium','wide'];
  function remove_css_tag(arr) {
    $.each(arr, function(i,v) {$('head [href*="'+v+'"]').remove();});
  }
  function resize_callback() {
    var width = $(window).width();
    remove_css_tag($css_tags);
    console.log('resize fired');
    console.log('screen width: ' + window.screen.width);
    console.log('window width: ' + width);
    if (width < 500) {
      yepnope.injectCss($narrow_css);
    } else if ((width >= 500) && (width <= 850)) {
      yepnope.injectCss($medium_css);
    } else {
      yepnope.injectCss($wide_css);
    } 
  } 
  $(window).resize(function() {
    clearTimeout($resize_timer);
    $resize_timer = setTimeout(resize_callback, $resize_timeout);
  });
  // init
  resize_callback();
});
相关文章：