面试题之你是如何优化你的网站的？

其实这个问题设计的方面很多，这个问题也有其他的问法，比如：哎呀，我们网站其他页面都加载挺快的，某个页面就很慢，请你说一下，从哪些方面入手找一下啊？还有的直接问：请说一下你知道的网站优化的技术点？还有人会问：从在浏览器输入url，到页面展现，都经历了什么？其实这些问题可以说很久，你说的越细致，点位越多，越加分。这样你就明白了，面试官问你这个问题的时候，你也可以给自己打个分。很多面试者往往回答很片面，说一说代码怎么优化啦，其实代码优化你总结半天也说不出几点，说一说webpack打包啦，这个可说的就更少了。我最近在做这方面的优化，总结了一些，应该也不会特别全，以后会不断总结更新。

1、不得不说的就是你网站的协议，是http的还是https的，我们都知道https需要验证证书，会有一个往返验证的过程，那么这就说明https肯定是比http要费时的，但https是收费的，既收费又影响一定的速度，那么多网站还在采用，那么就说明用这点时间来换取安全验证是值得的；

2、域名层面，www.xx.com解析ip的时间，肯定是和a.xx.com这个二级子域名解析ip的时间要优先的，但是很多大厂业务比较多，不可能每个业务都去申请一个一级域名，所以二级域名比较盛行。而且时间上虽然慢点，但5G都要出来了，这点时间还是很短的

3、端口后面的路径优化，你觉得是www.xx.com/访问速度快，还是www.xx.com/aa/访问速度快呢。很明显，是前者。但不可能所有的页面都用前者的路径，所以就出现了五花八门的后者的路径。路径越深速度就越慢，所以就要求我们存放静态资源或者落地页的时候，层级不要过深。

4、你的网站是否是前后端分离的？还是半分离的，落地页在后端那里？还是传统形式，静态资源是一个后端服务的下的webapp下面的一个文件夹？这个很容易理解，前后端分离那么完全可以不依赖后端的服务，部署的那台机器启动了就可以访问静态文件，相当于夏天穿半袖，但是传统的那种方式，相当于羽绒服里面穿衣服，效果肯定不同。但是有些场景也会做成页面在后端服务那里，只是把静态资源单独部署。

5、如果是静态资源单独部署就涉及到nginx跳转，这跟第3条有些相似，你的nginx匹配路由层级越深，查找就越费时间。一个大的网站，必定不同业务部署了N太机器，跳转配置是否清晰，路径是否合理都很重要。说到nginx代理，肯定就会想到负载机器的均衡问题，比如一个网站，首页访问量比较大，那么多少台机器可以抵抗住关键时刻的访问量，这些都要经过压测。再比如你一个授课网站，观看视频的页面肯定是重要的，搞多少台机器去负载，这都要根据以往的经验去预判。很多监控都可以帮你做到，一天的pv是多少，哪些模块访问量高，这些做不到就不够专业，出现问题就是一脸懵。

6、CDN，平时面试的时候，很多面试者都提到了cdn，我有时候会打断他们继续回答，我问：我想问一下，我们都知道cdn可以加速我们的资源加载，那么我们怎么理解cdn呢？其实这个问题面试前端一般也不要求你回答的太牛掰，因为一旦涉及到网络这种东西，别说前端，做了很久的后端也可能搞不定，甚至网线里面的8根线颜色也搞不懂，反正我是缕不清，上学时候就没缕清。cdn不能理解为机器，不过可以理解为服务商，理解为流量。我们购买了cdn服务，那么这个cdn服务商肯定是比较有实力的，他在很多地方都部署有云，更简单的说就是他很有钱，在很多城市都部署了硬件机器，别管是ibm的还是联想的还是浪潮的，这样虽然我们把静态资源部署在了香港的服务器上，但购买了cdn服务以后，服务商迅速把我们的需要访问的资源分发部署到了他的机器上。这样你的资源在香港，但是服务商在大连也有机房，这样大连的人想要访问你的网站就不用跑那么远了，因为你的资源就在大连本地。其实这里我们可以联想到，叙利亚那些地方炮火连天的，华为的员工还在那里建基站，相当不容易啊。

7、请求结束以后，我们的页面开始返回，最顶部不得不说DOCTYPE的声明，现在一般都是H5的写法了，之前的三四种写法的确会有影响，对不同浏览器解析的规则不同，甚至造成样式错乱，所以在搭建项目的时候，对这个声明与代码的规则统一要认清，不要最后上线样式错乱了才去排查这个第一行就该发现的问题。

8、meta这个标签，很多面试官爱问，除了设置编码规范，设置页面描述和关键字，除了设置viewport，你还知道哪些呢？哪个是设置默认谷歌加载的？哪个是设置主题颜色的，哪个是否可以规范全屏展示，这些虽然偶尔用到，但知道的多了肯定是加分的，而且搜索引擎抓取的约好，肯定是利于加载的。

9、css文件是否合并，上线是否压缩，是否引入的外部的样式文件，外部的样式文件是否稳定？

10、项目中一些使用到的域名，如请求域名，图片服务器域名，链接域名是否应该在header部分做一个预加载，这个也会有影响的吧？

11、很多人提到图片预加载，其实并非所有的情况都能做预加载。比如之前的jsp页面，里面是可以直接获取后端提供给我们前端的变量的。例如商品列表，后端给我们提供了数据，我们打包后的js肯定都会放到dom下面去加载，这个时候其实是可以做图片预加载的，加载的过程中，我们的核心js可能同时去服务器拉取，然后执行显示那段代码。在这个过程中，我们很可能是有时间提前把图片预加载的。但是如果像很多网站，先发一个http请求，拿到数据以后直接走渲染，这个时候就做不了预加载，因为你没有时间去争取预加载了，还不如直接加载img呢。

12、dom结构是否规范，比如太多的行内元素套了块元素，比如层级过深。我们把dom元素写规范些，不就是希望样式加载有问题的时候，dom可以利用本身的渲染兜个底嘛。

13、很多时候总结点里都有把js文件放到dom下面，其实放到head里倒是也行，加个defer属性，表示遇到就下载，但其他资源都加载完以后才开始执行，不过尽量还是放到下面去吧，很简单，你说你喝酒开车没事，但我觉得你不靠谱。

14、dom里是否有太多的行内样式，是否有太多的属性，比如之前写jq的时候，加自定义属性很爽啊，还有ng，让dom元素穿上了华丽的棉袄，穿这么多奔跑起来肯定会慢啊。

15、图片懒加载，非首屏的图片先加载一张兜底图片，滑动到那一部分的时候再开始加载，因为同时向同一个域请求文件太多，可能是超过18个吧，具体我忘记了，超过太多就容易阻塞。

16、js的懒加载，比如我们的页面很长，很长，很长，是不是可以把非首屏的单独打成js文件，即将滑动到那一部分的时候再去加载这个js。

17、浏览器缓存，很多面试者背强缓存，协商缓存背得很溜啊，那么我的js怎么设置成缓存1分钟，还是1天呢？肯定是缓存时间越久越好啊，如果一直不上线，缓存到永久岂不是更好。

18、请求数据，比如省市县这些数据，肯定不是存本地的，但一旦拉取过一次，是不是应该暂存到本地，其他地方就不用请求了呢？很多小伙伴问省市县这些数据为什么不放前端，要放后端，再发请求获取呢？很简单，中国省市县的这个json文件体量已经足以使用数据库来存了，你可以把这些json数据存到一个js文件里看一下大概是多大，然后想一想让用户拉取这么一个js是否合理。

19、我看到很多网站列表请求数据返回的不是json数据，而是html片段，可以想想，区别是否不同？

20、刚才我们提到同时从一个域下载过多文件会阻塞，那么是下载一个100K的js快呢，还是下载3个33K的js快呢？所以这个时候是不是应该把一些共用的一般不会修改的文件抽离出来单独下载，比如vuex.min.js，比如vue-router.js这些。

21、js代码编写规范，需要优化的点也很多，在项目里维护一套eslint吧，还是很有用的。

22、你的网站是否有线上的测速系统，或者自己的团队是否开发了一套测速点上报工具呢？因为一旦你的网站用户量大了，各种机型，各种地区的用户可能看到的页面表现会有所不同。获取多个时间点，一定量的上报数据以后，慢慢就可以不断总结出哪里的用户应该被重视，更应该帮助他们去优化哪里了。

除去以上这些，你部署的服务器内存，带宽，服务商是否靠谱，用户的机器是什么样，用户的网络如何其实都会影响访问速度。随着物联网盛行，5G加速，我们使用的手机电脑硬件越来越强悍，以上的点点滴滴其中每一项单独拿出来可能都是微不足道的，但是这些点都落实起来以后的确会有不一样的效果。而且如果面试的时候说出这些点，我觉得这个问题应该也是可以得分的。