 |
VOOZH | about |
|
VOOZH | about |
「阅」——JSCourse 旗下栏目，专门推荐我们为大家精心挑选的优质 JavaScript 相关技术内容
就像一辆汽车交付前需要经过非常多项目的检查一样。一个网站上线前，我们也得确保各个方面都做到位了，没有遗漏也没有错误。比如：HTML、CSS、JavaScript、安全、SEO、性能、可访问性等等。
最近小编读到了一篇来自 David Dias 的文章——《The Front-End Checklist》，讲的就是在一个网站上线前需要检查的清单（仅前端），今天小编就把这份清单中比较重要的分享给大家，小编觉得其中有些东西确实可能是我们会忽略的地方，希望对你有所帮助！
HeadMeta 标签1、在 HTML 顶部申明 HTML 5 Doctype
<!doctype html>紧接着，我们要申明下面这些 meta 标签：
2、正确地设置 Charset
<!-- 设置文档的字符编码 --> <meta charset="utf-8">3、别忘了 X-UA-Compatible
<!-- 告诉 IE 用最新的渲染引擎 --> <meta http-equiv="x-ua-compatible" content="ie=edge">4、viewport
<!-- 为响应式设计设置 viewport --> <meta name="viewport" content="width=device-width, initial-scale=1">5、Title
Title 标签的重要性不需要赘述了。务必要确保所有页面都正确的设置了 title 标签。像 Google 搜索引擎会计算 title 的宽度，一般在 472 到 482 像素左右，因此 title 内容建议控制在 55 个字符以内，国内的引擎大家可以自行了解这部分的限制。
<!-- 文档标题 --> <title>Page Title less than 55 characters</title>6、Description
和 Title 标签一样重要，出于 SEO 考虑，建议不要超过 150 个字符。
<!-- Meta Description --> <meta name="description" content="Description of the page less than 150 characters">7、Favicons
关于网站图标，光这个话题要深入讲可以讲很久，不同的设备，不同的系统都需要考虑，而且遇到 iOS 设备可以讲一个网页作为快捷方式放到桌面上，这个时候这个图标也是需要专门设置的，包括 Windows Tile 等等。今天这部分不在本文中展开，但是最起码的，底线是你得有一个 ico 文件，最好你在准备一个 32x32 的 png 图标。就像这样：
<!-- 标准 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"> <!-- Microsoft Tiles --> <meta name="msapplication-config" content="browserconfig.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>8、Canonical
如果你的网站有多个页面虽然 URL 不同但是呈现的内容都是一样的，比如下面这样的 URL：
那么就可以使用 canonical 来避免重复的内容，告诉搜索引擎把相关的搜索信号都传递到第一个 URL 上面，这样不管一个页面实际的 URL 是什么，搜索引擎都只会收入 canonical 指向的页面。
<!-- Helps prevent duplicate content issues --> <link rel="canonical" href="https:/jscourse.cn/courses">1、正确设置 lang 属性
<html lang="en">2、dir 属性
一般支持 rtl（right to left） 都需要设置这个属性
<html dir="rtl">3、RSS
如果是一个博客或者文章为主的网站，那么最好提供一个 rss feed
4、内联 critical CSS 代码
所谓 Critical CSS 代码就是指首屏渲染必要的 CSS 代码，对于这些代码最好直接内联在 HTML 中。
HTML最佳实践1、使用 HTML 5 语义化更好的标签
比如：header、section、footer、main 等
2、记得错误页面
错误的 404 以及 5xx 页面都要有专门的错误页面展示给用户
3、别忘了 noopener
如果页面中有超链接，并且需要打开新的标签或者窗口的，那么别忘了设置 rel=”noopener”（除非你有足够的理由需要在新窗口中获取父窗口的句柄），否则打开的页面就可以通过 window.opener 获取父页面的句柄了，这是有风险的。
<a class="user-generated" href="malicious.html" target="_blank" rel="noopener">打开新页面</a>4、将注释都移除掉
HTML 测试1、检查代码是否违反 W3C 标准
可以使用 validator.w3.org/ 来测试
2、看看 HTML 代码是否规范
可以使用 dirtymarkup.com/ 进行检查
这部分中文网站一般比较少，除非你用了 icon font，那么留意下下面两条
1、使用 WOFF、WOFF2、TTF、SVG 来兼容主流浏览器
2、Web 字体大小不要超过 2 MB
CSSCSS 规范1、支持响应式
2、提供了打印的 CSS 样式
3、可以使用 CSS Preprocessor
4、确保页面上的 ID 是唯一的
5、Reset CSS
6、不要对第三方库所用到的专属 ID 作为 CSS 选择器
有的时候，很多第三方库要求 DOM 上包含指定的 ID，这个时候你的 CSS 定义样式的时候不要去使用这个 ID，因为这个 ID 很可能以后会变动的，就像这样：
<div id="js-slider" class="my-slider"> <!-- Or --> <div id="id-used-by-cms" class="js-slider my-slider">7、自动对生成浏览器前缀
有些 CSS 属性需要添加浏览器前缀，这种时候尽量使用工具自动生成，比如：autoprefixer
1、合并多个 CSS 文件
2、压缩 CSS 文件
3、考虑非阻塞加载 CSS 文件
比如使用我们之前：《[阅 #29] 我们一起聊聊加载 CSS 的那些事儿吧》：https://zhuanlan.zhihu.com/p/31881595 文中介绍的 preload 等属性来对 CSS 进行预加载，而不阻塞 DOM 渲染。
4、移除不用的 CSS 代码
这个现在直接用 Chrome 开发者工具就能看到哪些 CSS 没有用到。
CSS 测试1、CSS 代码规范测试
可以用 stylelint.io/ 来进行测试。
2、对响应式进行测试
需要在不同的显示宽度上进行多分辨率测试
3、兼容性测试
针对不同设备、浏览器进行测试
4、不同操作系统测试
这部分和浏览器测试可以合并，因为 IE 你只能在 Windows 上测试，而 Mac 版的 Safari 和 Windows 版的 Safari 虽然也有微小的差异但是考虑到成本，一般测试一个系统就可以了。
5、支持 RTL 的话还要针对 RTL 进行测试
图片最佳实践1、使用 picture/srcset 提供不同图片以保证最好的用户体验
2、支持 Retina 显示
3、针对一系列小图标或者小尺寸图片考虑用雪碧图
4、设置图片宽高
如果提前就知道图片宽高的话就需要设置好宽高，这样可以提高渲染速度
5、别忘了图片的 alt 属性
6、对图片进行懒加载
JavaScriptJavaScript 最佳实践1、不要内联 JavaScript 代码
2、合并并压缩 JavaScript 代码
3、注意 JavaScript 安全性相关的问题
可以查看：owasp.org/index.php/DOM_based_XSS_Prevention_Cheat_Sheet#Guidelines_for_Developing_Secure_Applications_Utilizing_JavaScript 了解详细内容
4、考虑通过 async 和 defer 属性来异步加载 JavaScript 代码
5、针对特殊功能的时候进行特性检测
比如可以使用 Modernizr。
JavaScript 测试1、使用各类 lint 工具对 JavaScript 代码进行校验
安全对网站进行安全扫描比如使用 securityheaders.io/ 这类工具对网站进行安全扫描
安全方面最佳实践1、HTTPS
全站使用 HTTPS 包括外部资源
2、使用 HSTS（HTTP Strict Transport Security）
通过返回 Strict-Transport-Security 响应头来告诉浏览器只能通过 HTTPS 而非 HTTP 来访问本网站
3、预防 CSRF 攻击
参看这份 《预防指南》：https://www.owasp.org/index.php/Cross-SiteRequest_Forgery%28CSRF%29_Prevention_Cheat_Sheet。
4、预防 XSS 攻击
参看这份《官方 XSS 预防指南》：https://www.owasp.org/index.php/XSS_%28Cross_Site_Scripting%29_Prevention_Cheat_Sheet
5、使用 XFO（X-Frame-Options）来预防 clickjacking 攻击
具体可以参见这篇文章——scotthelme.co.uk/hardening-your-http-response-headers/#x-frame-options
性能性能方面最佳实践1、注意页面尺寸不要太大
2、压缩 HTML 代码
3、对一切可以懒加载的资源都进行懒加载
4、Cookie 尺寸
Cookie 不要超过 4093 个字节，数量不要超过 20 个
提前准备后续会发送的请求1、dns-prefetch
<link rel="dns-prefetch" href="https://example.com">2、preconnect
<link rel="preconnect" href="https://example.com">3、prefetch
<link rel="prefetch" href="image.png">4、preload
<link rel="preload" href="app.js">可以使用像 Google PageSpeed： developers.google.com/speed/pagespeed/insights/ 这样的工具进行性能测试，并且分数最好超过 90 分。
SEO1、合理的使用标题
有利于让搜索引擎了解你页面内容的结构
2、提供 sitemap.xml
3、提供 robots.txt
4、页面结构合理
关于 SEO 你还可以针对国内的不同的搜索引擎，进行有针对性的 SEO 优化。
这份长长的清单中包含了非常多非常细致的项目，最好当然是都能够做到，但是实际情况下未必能实现，因此小编分享这份清单主要是让你心里对这些方面有个了解，从而你可以结合你实际的需求根据优先级有针对性的进行检查和完善。
好了，本期就到这里了，我们下期再见哦！
关注「jscourse」微信公众号获取更多 JavaScript 学习课程和资源。