某一地区用户的网页打不开了？？？

最新推荐文章于 2024-02-01 13:02:09 发布

zzm_

最新推荐文章于 2024-02-01 13:02:09 发布

阅读量829

点赞数 1

文章标签：面试前端运维 ViewUI

原文链接：https://juejin.im/post/5bc45db16fb9a05cd97330ed

版权

情景：某日，我正在刷前端博客，旁边的前端大神说，

大神：小星，给你出道面试题呗，某金服的面试真题哦～
我：嗯？好啊，什么题，我试试。
大神：某一地区用户的网页打不开了，为什么出现这种问题或者你怎么去解决？
我：嗯，网速不好或者服务器挂了？
大神：注意，是某一地区哦，发散你的思维，这是道开放类题目。
我（想了一会儿，没啥好答案）：我研究研究。
大神：嗯，这道题还是挺不错的，好好想一想～
我：哦（自己还是菜啊）?
复制代码

这道题其实是：当浏览器输入URL后都发生了什么事情？的一道实际应用，除去基础知识外，更考察开发人员解决问题的能力，这可能就是大公司更为注重的地方。这道题考察的还是挺全面的，这里来简单的写下我自己的理解，水平有限，仅供参考?。

一，URL地址

当用户在浏览器中输入URL地址后，会先进行DNS解析，将域名转为IP地址，浏览器根据IP地址，去对应的服务器上寻找对应的网络资源，之间有一系列的复杂流程，这里就不再一一的阐述。

DNS解析的大致流程：

1，如果浏览器有缓存，直接使用浏览器缓存，否则使用本机缓存，再没有的话就是用host

2，如果本地没有，就向dns域名服务器查询（当然，中间可能还会经过路由，也有缓存等），查询到对应的IP
复制代码

针对url以下两种情况会造成页面访问失败：

1，错误的url地址

当用户输入一个错误的网址时，如果浏览器解析对应的IP地址上没有网络资源时，导致网页加载失败，如下图所示：

当然，这种情况比较low，但是也属于一种情况不是?

2，本机是否修改HOST文件

若用户将网址域名地址与本地HOST进行绑定（开发人员常用的手法）了，在进行IP地址解析时，地址指向用户本机，导致网络资源加载失败，从而网页加载失败，当然这种情况很少见，这里只是存在这种可能性，简单的罗列下。

二，TCP请求，与服务器建立连接

http的本质就是tcp/ip请求，通过三次握手与服务器建立连接，步骤如下（抽象派）：

客户端：hello，你是server么？
服务端：hello，我是server，你是client么
客户端：yes，我是client
复制代码

这样只有客户端与服务端建立了连接，客户端才可以与服务端进行交互，获得页面资源。

建立连接失败的话就会导致页面加载失败：

1，对于大型的项目，由于并发访问量很大，所以往往一台服务器是吃不消的，所以一般会有若干台服务器组成一个集群，然后配合反向代理实现负载均衡，当然了，负载均衡不止这一种实现方式，这里不深入。若某一地区的服务器节点出现故障的话，则会造成连接失败，访问不到网络资源，导致页面加载失败。

2，在与服务器建立连接的过程中，如果用户当时的网络环境差，如网速慢、不稳定等，则会影响建立连接的过程，从而导致页面加载失败。

三，缓存

前后端的http交互中，使用缓存能很大程度上的提升效率，而且基本上对性能有要求的前端项目都是必用缓存的。

缓存可以简单的划分成两种类型：强缓存 200 (from cache）与 协商缓存（304）。关于缓存这里就不详细的叙述了，有兴趣的同学可以去研究下，里面的知识点还是挺多的。

当客户端使用缓存对项目进行了优化的时候，如果服务端相关的某些网页资源进行了更新：如html，js等文件。而客户端存在缓存，可能会造成缓存与服务端资源的不匹配，导致某些功能不可用，严重者导致页面不可加载。这个时候我们就会听到一句经常听到的话：让用户清除下浏览器缓存。。。

嗯，你问我缓存怎么清理？暴力美学：

<a onclick="alert('清除成功！')">清除浏览器缓存</a>
复制代码

哈哈，皮一下?～

四，客户端渲染

客户端与服务器完成交互，浏览器内核拿到内容后，开始浏览器页面渲染，大致分为以下几步：

1. 解析HTML，构建DOM树

2. 解析CSS，生成CSS规则树

3，解析javascript，完成DOM树与CSS规则树的构建

4. 合并DOM树和CSS规则树，生成render树

5. 布局render树（Layout/reflow），负责各元素尺寸、位置的计算

6. 绘制render树（paint），绘制页面像素信息

7. 浏览器会将各层的信息发送给GPU，GPU会将各层合成（composite），显示在屏幕上

复制代码

其中HTML，CSS，JS都会影响页面的渲染

1，网络

若用户的网络环境比较差：网速慢或不稳定等，会影响以上三者资源的加载，导致浏览器加载资源失败，从而页面加载失败。在上面的 TCP请求，与服务器建立连接 中也提到过网络相关的问题，同样的结果，但是原因不同。

2，JavaScript阻塞（浏览器兼容性）

在前端开发中，浏览器的兼容性是大家必须考虑的：css属性以及js方法在浏览器中的兼容性。其中css属性的兼容性只会影响DOM的样式，不会阻塞页面的渲染。而如果js的某个方法浏览器不兼容的话，可能会导致js解析失败，从而导致页面加载失败。所以用户使用浏览器的种类，版本都应在我们的考虑范围内。

以上是我想到的导致某一地区用户网页打不开的原因，回顾总结下，我的理解是可以从四大方面进行剖析：前端，网络，后端，浏览器。目前的解释与理解可能还比较浅，日后慢慢补充吧，欢迎大家评论互相交流学习。