Github Twitter

前端自检清单

目录

  1. Head

  2. HTML

  3. Webfonts

  4. CSS

  5. Images

  6. JavaScript

  7. Security

  8. Performance

  9. Accessibility

  10. SEO

如何使用？

前端自检表 中的所有项对于大多数项目都是必需的，但是有些元素可以省略或不是必需的(例如，对于管理web应用程序，你可能并不需要RSS订阅)。我们使用三个级别来灵活区分：

有些资源拥有相对的符号，可帮助你了解清单中可能找到的内容或类型：

  • 📖: 文档或文章

  • 🛠: 在线工具或测试工具

  • 📹: 媒体或视频内容

你可以通过阅读 README_APP 文件 为 前端自检表应用 做出一些贡献，README文件里详细的阐述了关于此项目的所有事情。

Head

注意： 你可以找到一份可能在HTML document的<head>里包含了所有东西的列表。

Meta tag

<!doctype html> <!-- HTML5 -->

接下来的两个meta标记(Charset and Viewport) 需要首先出现在head里。

<!-- Set character encoding for the document -->
<meta charset="utf-8">
<!-- Viewport for responsive web design -->
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<!-- Document Title -->
<title>Page Title less than 55 characters</title>
<!-- Meta Description -->
<meta name="description" content="Description of the page less than 150 characters">
<!-- 标准favicon格式 -->
<link rel="icon" type="image/x-icon" href="https://example.com/favicon.ico">
<!-- 推荐favicon格式 -->
<link rel="icon" type="image/png" href="https://example.com/favicon.png">
<!-- Apple Touch Icon (at least 200x200px) -->
<link rel="apple-touch-icon" href="/custom-icon.png">

<!-- To run web application in full-screen -->
<meta name="apple-mobile-web-app-capable" content="yes">

<!-- Status Bar Style (see Supported Meta Tags below for available values) -->
<!-- Has no effect unless you have the previous meta tag -->
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!-- Microsoft Tiles -->
<meta name="msapplication-config" content="browserconfig.xml" />

browserconfig.xml文件所需的最低xml标记如下：

<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
   <msapplication>
     <tile>
        <square70x70logo src="small.png"/>
        <square150x150logo src="medium.png"/>
        <wide310x150logo src="wide.png"/>
        <square310x310logo src="large.png"/>
     </tile>
   </msapplication>
</browserconfig>
<!-- Helps prevent duplicate content issues -->
<link rel="canonical" href="http://example.com/2017/09/a-new-article-to-read.html">

HTML tags

<html lang="en">
<html dir="rtl">
<link rel="alternate" href="https://es.example.com/" hreflang="es">

Social meta

可视化并自动生成带有元标记的social 元标记。

Facebook OG 和 Twitter Cards 是的，对于任何网站，强烈推荐。如果你的目标用户是某个特定的用户，并且想要确保显示效果，可以考虑其他社交(social )媒体标签。

注意： 使用og:image:width和og:image:height将为爬虫指定图像的尺寸，这样爬虫就可以立即呈现图像，而不必异步下载和处理图像。

<meta property="og:type" content="website">
<meta property="og:url" content="https://example.com/page.html">
<meta property="og:title" content="Content Title">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:description" content="Description Here">
<meta property="og:site_name" content="Site Name">
<meta property="og:locale" content="en_US">
<!-- Next tags are optional but recommended -->
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@site_account">
<meta name="twitter:creator" content="@individual_account">
<meta name="twitter:url" content="https://example.com/page.html">
<meta name="twitter:title" content="Content Title">
<meta name="twitter:description" content="Content description less than 200 characters">
<meta name="twitter:image" content="https://example.com/image.jpg">

⬆ 返回顶部

HTML

最佳实践

HTML testing

⬆ 返回顶部

Webfonts

注意： 使用WebFonts可能导致非样式文本的闪烁/不可见文本的闪烁-考虑使用回退字体和/或使用WebFont加载器来控制行为。

⬆ 返回顶部

CSS

注意： 看看大多数前端开发人员所遵循的CSS指南和Sass指南。如果你对CSS属性有疑问，可以访问CSS Reference。为了保持一致性，还有一个简短的代码指南。

<div id="js-slider" class="my-slider">
<!-- Or -->
<div id="id-used-by-cms" class="js-slider my-slider">

Performance

CSS testing

Pixel Perfect - Chrome Extension

⬆ 返回顶部

Images

注意： 要全面了解图片优化，请查看Addy Osmani的免费电子书Essential Image Optimization。

Best practices

  • 🛠 Imagemin

  • 🛠 使用ImageOptim to optimise your images for free.

  • 🛠 Use Kraken.io awesome alternative for both png and jpg optimization. Up to 1mb per files on free plan.

  • 🛠 TinyPNG losslessly optimise png, apng (animated png) and jpg images. Free and paid version available.

  • 🛠 ZorroSVG jpg-like compression for transparent images using svg masking.

  • 🛠 SVGO a Nodejs-based tool for optimizing SVG vector graphics files.

  • 🛠 SVGOMG a web-based GUI version of SVGO for optimising your svgs online.

⬆ 返回顶部

JavaScript

最佳实践

<noscript>
  You need to enable JavaScript to run this app.
</noscript>

JavaScript testing

⬆ 返回顶部

Security

最佳实践

X-Content-Type-Options - Scott Helme

⬆ 返回顶部

Performance

最佳实践

Preparing upcoming requests

<link rel="dns-prefetch" href="https://example.com">
<link rel="preconnect" href="https://example.com">
<link rel="prefetch" href="image.png">
<link rel="preload" href="app.js">

Performance testing

⬆ 返回顶部

Accessibility

注意: 你可以观看注意事项视频列表A11ycasts with Rob Dodson 📹

最佳实践

Headings

Semantics

Form

Accessibility testing

⬆ 返回顶部

SEO

<!-- Example: Pagination link tags for page 2 of a paginated list -->
<link rel="prev" href="https://example.com/?page=1">
<link rel="next" href="https://example.com/?page=3">

⬆ 返回顶部

原文：选自github

PreviousvideoNext递归及去重

Last updated