modern php_使用modern.IE识别常见的编码问题

modern php

This article was sponsored by modern.IE. Thank you for supporting the sponsors who make SitePoint possible!

本文由modern.IE赞助。 感谢您支持使SitePoint成为可能的赞助商！

By now, many of you are probably familiar with modern.IE and many of the testing tools it offers. One of the lesser-known features of this project is the Site Scan feature that, according to the modern.IE team, allows you to scan your website “for common coding problems to make sure users get the best possible experience”.

到目前为止，你们中的许多人可能已经熟悉Modern.IE及其提供的许多测试工具。 根据Modern.IE团队的说法，该项目鲜为人知的功能之一是站点扫描功能，该功能使您可以扫描网站“查找常见的编码问题，以确保用户获得最佳体验”。

You’ll definitely want to check out this tool and in this post I’ll describe exactly what it does.

您肯定会想看看这个工具，在这篇文章中，我将确切描述它的作用。

You can access the tool by entering a URL in the appropriate field on the modern.IE home page, highlighted below:

您可以通过在modern.IE主页上相应字段中输入URL来访问该工具，突出显示如下：

Or by going to the Browser Testing Report page, which is the main page for the Site Scan feature where you’ll see the results of your scan:

或转到“ 浏览器测试报告”页面，这是“站点扫描”功能的主页，在该页面中您将看到扫描结果：

For this article I’ll be using my own website, Impressive Webs. I haven’t redesigned or recoded it in almost two years, and it’s a WordPress site, so I think it’s a good candidate to allow us to see some interesting results.

对于本文，我将使用自己的网站Impressive Webs 。 我已经有近两年没有重新设计或重新编码它了，它是一个WordPress网站，所以我认为这是让我们看到一些有趣结果的不错选择。

After entering my URL and allowing the scan to take place, I get the results shown in the image below. You can go directly to my results page here, which will allow you to poke around the various options.

输入我的URL并允许进行扫描之后，我得到的结果如下图所示。 您可以在此处直接转到我的结果页面，该页面可让您浏览各种选项。

As you can see, the results are divided into four main sections:

如您所见，结果分为四个主要部分：

• Common problems from supporting old versions of IE
  支持旧版本IE的常见问题
• Cross-browser and cross-device issues
  跨浏览器和跨设备问题
• New features in Windows 8
  Windows 8中的新功能
• Accessibility improvements
  辅助功能改进

The nice thing is that even for the sections where your site passes the test, there is a description given for what was scanned, along with a green check mark. Stuff that the scanner finds that doesn’t pass its tests are indicated with an orange exclamation point along with some suggestions on how to improve.

令人高兴的是，即使对于您的站点通过测试的部分，也会给出扫描内容的描述以及绿色的复选标记。 扫描仪发现未通过测试的材料以橙色感叹号表示，并提供一些改进建议。

Let’s examine a couple of the ones that failed on my site scan. First, you’ll notice my website could use some improvements in image optimization:

让我们检查一下在我的站点扫描中失败的几个。 首先，您会注意到我的网站可以在图像优化方面进行一些改进：

The test tells me how many bytes I can save by optimizing my images correctly, why this is important, and even offers a third-party tool that I can consider to help in this area.

该测试告诉我通过正确优化图像可以节省多少字节，这为什么很重要，甚至还提供了我可以考虑在此方面提供帮助的第三方工具。

Another suggestion the report offers is that I use the prerender + prefetch features available in modern browsers like IE11 to improve the perceived speed of the site, and thus enhance the user experience:

该报告提供的另一个建议是，我使用IE11等现代浏览器中可用的prerender + prefetch功能来提高网站的感知速度，从而改善用户体验：

In brief, using the <link> tag with the rel="prerender" feature allows you to preload an entire web page, while rel="prefetch" lets you preload specific resources.

简而言之，将<link>标记与rel="prerender"功能结合使用，可以预加载整个网页，而rel="prefetch"可以预加载特定的资源。

As you can see, this testing report isn’t just a run-of-the-mill validator but an advanced site scan that offers cutting-edge suggestions to help you make your applications that much more effective. And hey, you might even be introduced to some features you haven’t heard of or tried before (like I was when I saw prerender and prefetch).

如您所见，此测试报告不仅是常规的验证器，而且还包括高级站点扫描，该扫描提供了前沿建议，可帮助您使应用程序更加有效。 嘿，您甚至可能被介绍到一些您从未听说过或尝试过的功能(就像我看到prerender和prefetch时一样)。

兼容性检查器 (Compat Inspector)

Another testing report that modern.IE offers is something called “Scan for code no longer supported in modern IE”, which uses something called Compat Inspector:

modern.IE提供的另一个测试报告是“扫描现代IE中不再支持的代码”，它使用了Compat Inspector ：

Running this scanner on my website produced the following results:

在我的网站上运行此扫描仪会产生以下结果：

From what I can tell, all of these are warnings about browser sniffing techniques that I shouldn’t be using. In my case, all the examples are in third-party scripts, so not too big a deal. With each warning given, as with the Site Scan report, you have the option to drill down and view more info on that particular problem with suggestions on how to fix it.

据我所知，所有这些都是关于我不应该使用的浏览器嗅探技术的警告。 就我而言，所有示例都使用第三方脚本编写，因此没什么大不了的。 发出每个警告后，与“站点扫描”报告一样，您可以选择向下钻取并查看有关该特定问题的更多信息，并提供有关如何解决该问题的建议。

脱机使用报告 (Use the Reports Offline)

Finally, another great feature of the Site Scan tool is the fact that it is open-source and it’s available for download on GitHub:

最后，站点扫描工具的另一个重要功能是它是开源的，可以在GitHub上下载 ：

This allows you to grab the tool, install it locally, and run the tests on your local websites offline.

这使您可以获取该工具，在本地安装它，然后在本地网站上离线运行测试。

The Site Scan and Compat Inspector features are great options to consider adding to your testing workflow, in addition to the usual validation, linting, and other processes that are likely already part of your development roadmap.

除了通常的验证，整理和其他可能已经包含在开发路线图中的过程之外，Site Scan和Compat Inspector功能是考虑添加到测试工作流程中的绝佳选择。

翻译自: https://www.sitepoint.com/using-modern-ie-identify-common-coding-problems/

modern php