10年java经验大牛教你如何打造一个全满分网站

做为一个全栈互联网工程师，咱们的目标决不只仅知足于功能的实现，并且要包括性能、安全、易用性等等各方面的考量。那么是否有一些能够公开评测的标准，使咱们可以准确地知道目前咱们网站的质量水平在全行业中处于什么样的水平呢？随着技术水平的不断进步，网站评测方面的各类工具也在不断演进。
工具
工欲善其事，必先利其器。
想要知道本身网站的质量水平，凭想像和猜想是不行的，必需要有能够客观衡量的工具。
YSlow
最先作这方面尝试的是2012年诞生于Yahoo的YSlow，可是如今已经逐渐淡出历史舞台。它的名称其实是英文Why Show(为何这么慢？)的缩写，从它的名字你应该能知道它是帮助站长解决网页加载速度的工具。YSlow是一款浏览器插件，能够支持包括Chrome,Firefox,Safari等等主流浏览器。在浏览器上安装相应插件后，就能够对任意网站进行评测，最后给出一个整体评分。评测内容包括网页是否包含了过多的HTTP请求，JS和CSS是否通过压缩，是否采用CDN等等，主要是提供给站长一个优化的方向和参考建议。

PageSpeed
在YSlow以后，Google推出了本身的网页优化建议工具PageSpeed Insights，这是一个网页工具，你不须要像YSlow同样下载插件和安装，你只须要打开它的网页，输入任何你想测评的网址，就能够获得优化建议了。

GTmetrix
我最常使用的工具不是以上两款，而是一个名叫GTmetrix的网站，这个网站结合了以上两个工具，给出了更加完整的建议。

Lighthouse
更强大而严格的工具仍是Google推出的Lighthouse。这也是一款浏览器插件，不过目前只能用于Google自家的Chrome浏览器。它从4个方面对任何网站进行评测，包括性能、易用性、最佳实践。咱们下面将重点介绍如何能在这4个方面都彻底知足Google的要求。

优化
GTMetrix
优化的第一步，咱们仍是先从GTMetrix开始。通常网站常见的问题和建议以下：
CDN
一般状况下，你须要为你的网站开通CDN服务，以确保在地理位置上离用户最近的服务器能够优先为用户提供服务。提供CDN服务的厂商不少，并且价格并不昂贵，不少云服务商好比阿里云、百度云都有提供这方面的服务。
Enable gzip compression
这一项主要是检查你的nginx服务器是否设置了gzip压缩传输的方式。打开你的Chrome开发者工具，检查Network标签里每个请求的Response header，看一下是否有content-encoding: gzip，若是没有，说明你的网站没有设置gzip传输。

解决方案：参照个人这篇文章《个人nginx锅炉片》设置。

Add Expires headers

这一项也是不少网站缺失的配置，因为没有给jpg图片以及css和js设置合适的过时时间，致使每次访问网站都须要从新从网站读取内容，这是不少网站访问速度慢的缘由。设置方式：一样，参照上一节所提到的文章。

解决方案：参照个人这篇文章《个人nginx锅炉片》设置。

不少状况下，或者是出于无知，或者是出于偷懒，工程师们倾向于把一张大图用css方式缩小，例如这样：width: 100px; height: 50px;。致使的结果是这张图片在网页上看起来彷佛图片缩小了，但实际上文件尺寸并无变小。这也是不少网站变慢的主因。
解决方法：参照个人这篇文章《用imgproxy自动缩放图片》设置。
雪碧图
若是你的页面中有不少小图标的时候，最糟糕的做法莫过于把它们所有切成小碎的jpg或者png，这样会使你的页面在加载时向服务器端发送不少次http请求，而每一次请求都有独立的创建链接、传输数据、断开链接的过程，很是浪费资源。
解决方案：若是可能的话，把这些图标作成独立的图标字体文件。若是不行，则把它们压缩成雪碧图。
压缩js和css
一般状况下，你刚刚写完的js是下图中左边这种样子的，而一般大公司网站的代码是图中右边这样的。

左边的代码人类阅读没有什么问题，可是你不该该把它们就这样在网络中传输。第一，浪费流量；第二，你能读得懂，你的友商也能读得懂，不利于安全。
解决方案：你应该把你的js/css/html进行丑化(uglify)和压缩(minify)。
终极大法
以上全部这些修改建议听上去都不错，可是我要一个一个作下来太繁琐怎么办？也许你应该考虑用一个现代的框架帮你自动完成这些事情，好比Angular/React/Vue，或者你本身全用Grunt/Gulp/Webpack完成全部这些事情。你知道这就是为何前端工程师要学习框架的缘由了吧？由于个人博客网站是全用Jekyll直接建在Github Pages上的，使用了CloudFlare作CDN，而它们已经自动帮我完成了全部这些烦琐的事情，因此起点比较高，很轻松就能在GTMetrix上获得99分的高分。
Lighthouse
在完成了GTMetrix的要求，可以得到99分以上的高分以后，咱们还想要达到更高的标准，挑战Google的Lighthouse满分！
Lighthouse从如下4个方面对网页作出评价，咱们逐个来谈。
渐进式Web应用(Progressive Web Apps)
头一项标准『渐进式Web应用』，这个标准是Google自家发明的。其目的是为了让网站能在网络不顺畅通的状况下也能显示基本内容，或者上一次缓存的内容，而不是给出一个难看的『网络不通』的提示，而且可以让用户像安装普通应用同样直接把网页安装在手机上。PWA的终极理想是能够用网页应用来取代应用，因此目前并不被Apple支持。Google官网给出了关于如何实现PWA的详细指南，按照指南学习一步一步就能够构建出你的第一个PWA网页。建设完成后能够用Lighthouse来测试一下你的网页到底有多符合PWA标准。
渐进式Web应用标准共有11项。
下面重点介绍一下为了使一个网页能知足基本的PWA要求所必需要完成的工做：
manifest.json
首先，你的网站必需要有一个manifest.json文件，这个文件里描述了最基本的一些信息。好比个人网站的manifest.json文件是这样的：

这里要注意的是你必须事先准备好你的网站的Logo图标，并且尺寸必须是512x512的。另外，这里设定的主题颜色必须和页面中的颜色相一致。在各页面的头部须要添加如下代码行：

在这里指定了你的网站的manifest.json文件的路径，而且指定了页面的theme-color主题色。
serviceworker.js
在你的主页面当中增长如下代码用来判断浏览器是否支持ServiceWorker，若是支持的话，加载ServiceWorker文件：

而后在根目录下增长一个serviceworker.js的文件：

把指定的文件保存在缓存中，这样下次若是网络不通的话，浏览器会从缓存中取文件，而不会出现网络不通的画面。建好了ServiceWorker文件的页面，会在Chrome工具栏里看到这样的效果：

同时，完成了PWA效果的网站，可让用户在手机中直接安装，好比：

而后，就会在用户的主屏幕上生成一个带有你设定的图标的应用：

点击图标打开应用，会来到一个没有任何URL地址栏和工具栏的页面，使用户彻底感受不到是在浏览网页：

性能
Lighthouse对性能的要求基本和GTMetrix差很少，若是你能在GTMetrix得到高分的话，经过Lighthouse的这一项测试应该不难。惟一多要求的一项是全部图片都要求是webp格式，可是Safari浏览器目前并不支持这种格式，因此若是你把网站上的全部jpg文件改为webp文件的话会致使你的网站里的图片在iPhone上不能显示。（我目前的网站全面采用了webp格式，不过会在不久的未来全面切换回jpg，主要缘由是iPhone目前还不兼容。）
性能标准共有10项。
可用性
可用性标准主要是指在制做网页时必须考虑残疾人的需求。
可用性标准共有8项。
Elements Use Attributes Correctly
这一项标准的要求之一是：全部图片必须有alt属性，这样若是图片不能显示时，也能出现合适的文字。固然还有不少其它要求，你能够根据Lighthouse给出的建议逐项调整。
Elements Describe Contents Well
这一项标准的要求之一是：全部input输入框必须有label或者aria-label。以下面这样：

Color Contrast Is Satisfactory
这一项标准的要求是全部字体的前景色和背景色的对比度须要足够强，以便于视力很差的人士可以分辨页面上的字迹。若是你不知道某两种颜色的对比度是否足够，能够用这个网页检测，绿色的Pass表示合格。

有时候这一标准会有误判，为了能让它经过，你可能须要设置额外的background-color属性，例如(stylus)：

最佳实践
最佳实践标准是指一个理想网站所应该达到的最高标准。包括：避免使用Application Cache，避免使用WebSQL，使用Http 2.0，使用https，避免使用document.write，避免使用console.log等等。这些标准看上去很琐碎，可是每一项标准的提出都有其合理性，应当不遗余力遵照。
最佳实践标准共有15项。
使用http 2.0
关于如何开通http 2.0，能够参考我以前写过的一篇文章《免费给你的网站加上蓝色小闪电》。
成果
若是你完成了以上的全部优化步骤，相信你的网站应该能够获得一个比较高的评分了。如今咱们随便找个网站评测一下看看吧，别人家的网站效果大抵都是这样的：

而咱们的网站，通过调校以后的效果是这样的：

是否是颇有成就感呢？

有一个平台能够提供给大家学习，让你在实践中积累经验掌握原理。主要方向是JAVA工程师。若是你想拿高薪，想突破瓶颈，想跟别人竞争能取得优点的，想进BAT可是有担忧面试不过的，能够加个人Java学习交流群：282711949。

注：加群要求

一、大学学习的是Java相关专业，毕业后面试受挫，找不到对口工做能够

二、在公司待久了，如今过得很安逸，但跳槽时面试碰壁。须要在短期内进修、跳槽拿高薪的

三、参加过线下培训后，知识点掌握不够深入，就业困难，想继续深造

四、已经在Java相关部门上班的在职人员，对自身职业规划不清晰，混日子的

五、有必定的C语言基础，接触过java开发，想转行的

小号勿扰，不喜勿加

做者：张京