将 js 与媒体查询相结合（视口相关）答案

【问题标题】：Combining js with media queries ( viewport related )将 js 与媒体查询相结合（视口相关）
【发布时间】：2015-10-04 10:43:54
【问题描述】：

最近（客户）要求我使用 js sn-p 根据分辨率更改元视口标签宽度。他们说这可能会提高网站移动/平板电脑版本的性能。但我拒绝相信它，因为在我看来，它看起来与视口标签宽度 = 设备宽度有些相同，我会说更糟。

这是sn-p：

    function setviewport(){
         if(window.innerHeight > window.innerWidth){
              if(screen.height > screen.width){
                   deviceWidth = screen.width;
              }else{
                   deviceWidth = screen.height;
              }
         }else{
              if(screen.height > screen.width){
                   deviceWidth = screen.height;
              }else{
                   deviceWidth = screen.width;
              }
         }

         if(deviceWidth<=512){
              $("#viewport").attr("content","width=480,initial-scale="+deviceWidth/480);
         }else if(deviceWidth>=960){ 
              $("#viewport").attr("content","width=1024");
         }else{
              $("#viewport").attr("content","width=768,initial-scale="+deviceWidth/768);
         }
    }

也许我什么都不懂，这确实是一个更好的选择，只是宽度=设备宽度。如果是，你能解释为什么会这样吗？它会提高性能吗？提前致谢。

【问题讨论】：

不要这样做，如果性能是你的理由。您正在更改客户端在整个渲染过程中使用的一些变量。在页面已经（至少是一方）渲染并有效地重复当前页面的渲染之后，您正在这样做。请注意，浏览器制造商正在努力优化渲染性能，我怀疑您的单个客户端是否比整个 Chrome 或 Firefox 团队更智能。如果您仍然想在您的网站中构建类似的东西，您应该使用科学的方法来衡量差异。

标签： javascript media-queries viewport

【解决方案1】：

您的客户似乎担心使用 javascript 而非 css 媒体查询来创建响应式网页设计的性能提升。

这可以归因于人们普遍存在的神话：

浏览器必须等到它下载、解析并应用相关的 CSS 才能在屏幕上呈现页面。

不遵守这一点可能会导致“无样式内容闪现”(FOUC)，这会造成糟糕的用户体验。另一方面，Javascript 可以异步加载，因此不会干扰页面渲染。

这不是真的。现代渲染引擎比我们许多人认为的要聪明得多。

但是，当您调整浏览器窗口大小时，您在网站上使用了多少不同的媒体查询确实很重要。 这可能会导致 CPU 和内存负载，甚至可能导致浏览器崩溃但这不是一个有效的性能测试（没有用户经常调整其浏览器的大小，我们应该始终只关注非调整大小的事件）。

此外，一些较旧的浏览器（IE-8 和以前的浏览器）不支持媒体查询，在这种情况下，您想使用 javascript 库（respond.js），但除此之外，javascript 在提供方面没有优势与 CSS 媒体查询相比，性能大幅提升。

来源：

【讨论】：

谢谢，正是我需要解决这个“神话”！