如何搭建一个高性能网站

为什么网站会运行缓慢
1.dns解析速度慢

 现在浏览器大多都对dns解析进行了优化，一次dns解析大概要花费20-120 毫秒，dns解析时间太长或者次数太多会延长进入网站的等待时间。
2.服务器不稳定

  服务器不稳定是影响网站打开速度的直接原因，国外的服务器虽然不用备案，但是就访问速度上来看会较国内的慢很多
3.大量未优化的图片

 网页的加载速度与网站页面的大小有着直接的关系，如果一个网站有较多图片，音频或者视频文件，那么这个网站的代码文件就会较大，加载这些图片，音视频会消耗大量的时间，当浏览器加载完后才会将他们渲染到页面中去，一个完整的页面呈现就会需要花费更多的时间，也就是网站打开速度慢。
4.调用了大量js

 太多的js引用浏览器下载就需要很长时间，而且js代码复杂度高，运行在浏览器的主线程，主线程中还有其它需要运行的JavaScript脚本、样式计算、布局、绘制任务等,对其干扰导致线程可能出现阻塞，从而造成丢帧的情况，js不断提出请求会对浏览器造成负担。
5.代码冗余、繁琐

 太多冗余的代码和不简洁代码会减缓页面的加载速度，例如编写过程中的注释，css选择器层级过多，大量的通配符，使用过多连接（即使是空链接浏览器也会发送http请求），太多的dom操作，重排重绘过多，http请求过长，个数过多
6. 多余的插件

  很多插件和框架本身很大，不够轻量，会增加加载的时间
优化方法
1.DNS预解析

 浏览器对网站第一次的域名DNS解析查找流程依次为：
   浏览器缓存-系统缓存-路由器缓存-ISP DNS缓存-递归搜索
DNS 实现域名到IP的映射,通过域名访问站点，每次请求都要做DNS解析。目前每次DNS解析，通常在200ms以下。当浏览网页时，在加载网页时对网页中的域名进行解析缓存，这样在单击当前网页中的超链接时就无需进行DNS的解析，减少用户等待时间，提高用户体验。

//告诉浏览器要做dns预解析
<meta http-equiv="x-dns-prefetch-control" content="on">

//使用link标签告诉浏览器对指定域名预解析
<link rel="dns-prefetch" href="//www.baidu.com">
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             

不过多页面重复DNS预解析会增加重复DNS查询次数，要合理使用dns预解析
2.服务器优化

 （1）使用国内服务器，在使用时间不紧张的情况下，尽量购买国内的服务器然后通过备案系统进行备案，访问速度会比国外服务器快的多。
 （2）使用CDN内容分发网络。原理就是当你请求一个内容的时候，他会在离你最近的服务器进行内容的返回。但是这个前提就是我们的网站资源应该提前放到不同的缓存服务器，一般都是一些不常更改或者依赖较少的静态资源文件。这样的举措不仅可以是请求内容快速返回，而且在web流量高峰的时候可以缓解源服务器的请求压力。
3.图片优化

 （1）把图片服务器与应用服务器分开,图片服务器采用独立域名 ,css、js和图片就可以并发请求了
 （2）通过某些压缩软件进行压缩，肉眼看不会失真
 （3）图片懒加载或者预加载，在淘宝京东上有很多图片,当我们滑到下一屏时下一屏的图片才会加载,这就采用了图片懒加载的方式，图片懒加载,简单来说就是在页面渲染过程中,图片不会一次性全部加载,会在需要的时候加载,比如当滚动条滚动到某一个位置时触发事件加载图片。预加载是预先加载好后面需要用到的资源, 后面使用的时候直接去缓存里取。比如一个网站的开场动画, 这些动画是由很多图片组成的, 假如不预先加载好, 那就会造成动画不流畅产生闪动白屏
 （4）雪碧图，将众多小图片合成一张图，然后通过background分割到需要展示的图片，浏览器请求资源的时候，同源域名请求资源的时候有最大并发限制，chrome为6个，就比如你的页面上有10个相同CDN域名小图片，那么需要发起10次请求去拉取，分两次并发。第一次并发请求回来后，发起第二次并发，如果你把10个小图片合并为一张大图片的画，那么只用一次请求即可拉取下来10个小图片的资源。减少服务器压力，减少并发，减少请求次数
 （5）使用iconfont字体图标，iconfont具有矢量，轻量，易修改，不占用图片资源请求的特点，如 阿里图标库
4.代码优化

 （1）合理放置css和js。css一般放在html上面方便渲染，js一般放在html底部，防止阻塞html和css的加载
 （2）压缩组件。插件功能使用不大时尽量少使用插件，会增加加载时长。压缩css，js和html代码，压缩后会去掉多余的字符，使代码更加简洁。一个好的前端框架来避免许多不必要的前端优化错误，虽然有一些更大，更知名的框架能提供更多功能和选项，但它们不一定适合你的 Web 项目。
 （3）合理使用css和js。尽量避免重排和减少重绘，例如opacity=0只会引起重绘 display:none就会引起重排；尽量使用css动画少使用js动画；少操作dom，多复用css样式，减少冗余的js代码，减少http请求。