个人网站优化

一.服务器

1.选择大厂的云服务器，带宽越高越好。如果是本地的服务器，选择一条稳定的线路。

2.其次选择距离自己近的服务器。一般来说国内的服务器速度比较快，国外的慢点，如果是国内的服务器使用域名时需要备案，香港的服务器对于不想域名备案的人来说是最好的选择。

二.使用CDN

CDN介绍

CDN全称:Content Delivery Network或Content Ddistribute Network，即内容分发网络

它是建立并覆盖在承载网之上，由分布在不同区域的边缘节点服务器群组成的分布式网络。

CDN应用广泛，支持多种行业、多种场景内容加速，例如：图片小文件、大文件下载、视音频点播、直播流媒体、全站加速、安全加速。

借用阿里云官网的例子，来简单介绍CDN的工作原理。假设通过CDN加速的域名为www.a.com，接入CDN网络，开始使用加速服务后，当终端用户（北京）发起HTTP请求时，处理流程如下：

  1. 当终端用户（北京）向www.a.com下的指定资源发起请求时，首先向LDNS（本地DNS）发起域名解析请求。

  2. LDNS检查缓存中是否有www.a.com的IP地址记录。如果有，则直接返回给终端用户；如果没有，则向授权DNS查询。

  3. 当授权DNS解析www.a.com时，返回域名CNAME www.a.tbcdn.com对应IP地址。

  4. 域名解析请求发送至阿里云DNS调度系统，并为请求分配最佳节点IP地址。

  5. LDNS获取DNS返回的解析IP地址。

  6. 用户获取解析IP地址。

  7. 用户向获取的IP地址发起对该资源的访问请求。

  • 如果该IP地址对应的节点已缓存该资源，则会将数据直接返回给用户，例如，图中步骤7和8，请求结束。

  • 如果该IP地址对应的节点未缓存该资源，则节点向源站发起对该资源的请求。获取资源后，结合用户自定义配置的缓存策略，将资源缓存至节点，例如，图中的北京节点，并返回给用户，请求结束。

CDN配置

cdn的配置教程这里不在叙述，点击下方链接可以查看相关教程

CDN配置指南，让你的网站起飞 - 掘金 (juejin.cn)

注意接入国内的CDN需要域名备案

免费CDN

随时随地连接、保护和构建 | Cloudflare (cloudflare-cn.com)

Cloudflare的免费版功能很强大，它最大亮点是提供完全免费的SSL证书一键实现https访问，如果不想使用国内的CDN服务，Cloudflare是最好的选择。但是由于它的域名解析服务器在国外，速度方面可能比国内差一些，可能还会使网站减速。

三.使用外链

对于网站上的图片,视频等静态文件，可以使用外链来提高网站加载速度，原理和cdn类似，因为服务器的带宽有上限，不可能把所有静态资源都交给云服务器

对象存储提供外链

对象存储OSS（Object Storage Service）是一款海量、安全、低成本、高可靠的云存储服务

可以将网站上的图片,视频等静态文件存储在oss上，然后提供外链给云服务器，由于oss带宽非常高，外链资源可以瞬间加载。

还可以将OSS资源缓存到各区域的边缘节点，利用边缘节点缓存的数据，提升同一个文件被边缘节点客户大量重复下载的体验，也就是接入CDN。

还要做好防盗措施，防止有人恶意盗刷流量。

图床提供外链

对于文章中的图片，可以使用图床提供外链，一般不建议用oss搭建的图床，成本太高，可以使用一些免费的图床，一般的访问量足够了。

123网盘提供直链

什么是“直链”功能？

存储在云盘内的文件可一键生成URL链接，通过浏览器地址栏访问URL链接，即可将文件从网盘服务器直接下载到本地，无需经过分享页面。适用于高效便捷传输的高端用户群体和图文、音视频、大文件对外服务的站长和博主。

如何获得使用直链的资格？

使用直链需要开通会员服务：
1.会员有效期内，在每月的会员订购日赠送100GB流量，赠送流量有效期为一个月；
2.若会员赠送的流量不够用，可购买直链流量包叠加使用，优先使用会员赠送的流量。

可以将文件存在123网盘上然后启用直链，相当于一个小型的oss

四.前端性能优化

一、接口访问优化

1.1、减少http请求，合理设置 HTTP缓存

http协议是无状态的应用层协议，每次发送http请求时，都需要建立连接、通信、断开连接，在服务器端每个http都需要开启独立的线程去处理。所以尽量减少http请求，尽可能地提高访问性能。

减少http请求的方法：

  1. 合并 js、css、图片等文件，合并成一个文件，浏览器就只需请求一次就可以了。图片合并要适当，不能想着优化呢，盲目地都合并成一张图片。

  2. 借用浏览器缓存。恰当的缓存设置可以大大减少http请求。

  3. 接口合并。前端交互，经常需要请求多个并行或串行接口，此时可以通过接口合并方式，提高接口访问速度。

  4. 能使用css的尽量不使用js，能使用js的尽量不用三方插件，避免三方插件大量的库。

1.2、减少cookie传输

cookie 存在于 http 头，在客户端与服务器之间交换，尽可能地控制 cookie 的大小，cookie越小，响应速度越快，减少 cookie 传输，响应速度更快。

1.3、使用CDN提供静态文件

使用 CDN 可以更快地在全球范围内获取到你的静态文件，加快网页加载。

1.4、启用 GZIP 压缩

http 协议上 GZIP 编码，是一种用来改进 web 应用程序的。开启 GZIP 后，服务器会把网页内容压缩后传输，一般能压缩到原大小40%，这样网页传输速度就更快了。GZIP 有两大好处：一是减少存储空间，二是通过网络传输文件时，可以减少传输时间。

1.5、分域存放资源

HTTP 客户端一般对同一个服务器的并发连接个数都是有限制的，通常最大并行连接为四了，剩下的会进入等待队列，等前边的执行完毕，等待的才会执行。所以利用多域名主机存放资源，增加并行连接量，缩短资源加载时间。

1.6、减少页面重定向

开启 https 可以有效防范攻击，保证用户始终访问到网站的加密连接，保护数据安全，同时省去 301/302 跳转的时间，大大提升网站的安全系数和用户体验。

如果在网站设置当用户访问域名的时候强制 https 进行 301 或者 302 跳转，但是这个过程中，用到 HTTP 因此容易发生劫持，受到第三方的攻击。所以尽可能使用https安全。

1.7、避免使用iframe

iframe 相当于本页面又嵌套了一个页面，消耗性能，还要加载嵌套页面的资源，所以更消耗时间。

1.8、借用浏览器缓存

ajax 请求到的数据，可以缓存到浏览器，下次使用的时候无需再次获取，直接取缓存数据就可以。这个会根据具体的项目来做，比如常用的角色类型就会缓存，获取到的普通数据为了保证实时性，不能使用缓存。

二、静态资源优化

2.1、压缩 html、css、js 等文件

删除不必要的空格、注释和中行，减少文件大小，显著减少用户下载时间，加快网页加载速度。可以直接使用压缩工具，可以自动删除所有不必要内容。

2.2、在 js 之前引用 css

这是一个小细节，js 执行的时候会进入阻塞，如果放入 js 之后加载，会等待 js 执行完成之后才能加载 css，渲染页面，此时就会出现布局错乱。所以 css 文件需要非阻塞引入，以防DOM 花费更多时间才能渲染。

2.3、非阻塞 js

js 会阻止 html 文档的正常解析，当解析器到达 script 标记时，它会停止解析并执行脚本。所以我们经常把 script 引入的 js，放到 html 中最底下。如果需要让脚本位于页面顶部，建议添加非阻塞属性。经常使用 defer 和 async 来异步加载js文件。

<!--  使用defer  -->
<script defer src="foo.js" ></script>
<!--   使用async  -->
<script async src="foo.js"></script>

2.4、图片压缩

最常见的就是 css 雪碧，就是将很多很多的小图标放在一张图片上，就称为雪碧图。雪碧图最大优点就是可以减少http请求，除此也能压缩图片文件大小。使用的时候，通过设置 background-position ，移动图片的位置。除此之外，网站用到的大图，也需要在保证图片质量前提下优化到最小。

2.5、矢量图替代位图

矢量图（SVG）往往比图像小很多，缩放的时候不失真，这些图像还可以通过 css 进行动画和修改，比位图方便控制。可以的话，尽量用矢量图多点。

2.6、js代码相关优化

  1. 尽量减少使用闭包，因为闭包所在的上下文不会被释放。

  2. js避免嵌套循环和死循环，一旦遇到死循环，浏览器会卡死。

  3. 在js封装过程中，尽量做到低耦合高内聚。减少页面的冗余代码。

  4. 尽量减少递归，避免死递归。

  5. 尽量使用window.requestAnimationFrame替代传统的定时器。

三、页面渲染速度

3.1、懒加载

素材类的网站，页面一屏展示很多图片，而且图片还不能失真，图片加载太多，网页加载慢得很，所以就引用懒加载，只加载可视区的图片，避免加载可以能不需要或不必要的图像。改善页面的响应时间。

3.2、避免响应式布局

响应式网站虽然能够兼容所有终端设备，但是会出现隐藏部分无用内容，浪费带宽，加载时间还长，页面的渲染时间也长。

3.3、设置大小，避免重绘

遇到 img 标签，会立马发送一个 http 请求，下载图片，页面继续向下渲染，等图片加载成功了，发现图片的宽高大小发生变化，影响后边排版，所以页面会重新再绘制一次这部分。所以尽可能设置图片的大小。

3.4、减少DOM元素

解析 html 内容，将标签转化为DOM节点，之后再解析其他文件，DOM元素越少，也就是标签越少，文件转化得越快，加载速度也就快了。

3.5、减少 Flash 的使用

flash 文件比较大，加载起来耗时。除此，flash 插件还需要运行才能运行，最主要有些浏览器flash插件马上要下线了，建议尽量不用 flash。

3.6、文件顺序

css文件放在最顶部，优先渲染。js放在最底部，避免阻塞。

让网页如何加载更快，有好多的细节，还是要好好提升自己的技能~~~~~~~~~