添加到主屏幕的链接为什么不能通过url打开

链接有误。

1、添加到主屏幕的链接是可以通过url打开的，如果打不开就是这个链接的问题。

2、因为添加到主屏幕后的链接会发生改变，把这个链接的网址中https换为http就能通过url打开了。

1、 域名解析

2、 根据IP建立TCP连接（三次握手）

3、 发送HTTP请求

4、 服务器处理请求并返回HTTP报文

5、 浏览器解析并渲染页面

6、 连接结束，关闭TCP连接（四次挥手）

当输入一个域名的时候，我们首先要做的就是 将域名转化成IP地址 。前端的静态资源等，都是存储在服务器上。在计算机网络中，我们不能通过域名直接访问，只能通过IP地址访问到具体的主机。

1、首先 浏览器会查询自身的缓存 中，有没有此条域名的解析，如果有的话，就返回这个解析后的地址。

2、如果浏览器自身的缓存中，没有找到与此条域名对应的IP地址，那么就会去 *** 作系统中的缓存 中查找是否有这条域名的解析。

3、如果在 *** 作系统中也没有找到的话，那么就需要通过 DNS(域名系统) 帮助我们解析。

4、DNS域名解析过程（详细看参考链接）

浏览器与远程web服务器通过TCP三次握手协商来建立一个TCP/IP连接。该握手首先由客户端尝试建立起通信，而后服务器应答并接受客户端的请求，最后由客户端发出该请求已经被接受的报文。

一旦TCP/IP连接建立，浏览器会通过该连接向远程服务器发送HTTP请求。

当浏览器再次访问某个url时，会先获取资源的header信息， 判断是否命中强缓存 ：

1、如命中，直接从缓存获取资源，包括响应的header信息（ 请求不会和服务器通信 ），也就是强缓存

2、如未命中强缓存，浏览器发送请求到服务器，该请求会携带第一次请求返回的有关缓存的header信息，由服务器根据请求种的相关header信息来 对比结果是否协商缓存命中

1）若命中，服务器 返回新的响应header信息，更新缓存中对应的header信息，但并不返回资源内容 ，它会告诉浏览器可以直接从缓存获取

2）否则，返回最新的资源内容

Expires ：Expires 的值是一个 绝对时间的GMT格式的时间字符串（如Thu, 02 Sep 2021 11:03:45 GMT） ，在浏览器发起请求的时候，会根据系统时间和 Expires 的值进行比较，如果发送请求的时间在expires之前，那么本地缓存始终有效，否则就会发送请求到服务端来获取资源。

注：这个字段会导致一个问题，要是系统时间与服务器时间不一致的时候，就可能出现假性失效，或者出现缓存已经失效了，但是并未去请求最新资源

Cache-control ：HTTP/1.1 中新增的属性，属性值具有以下几个：

pragma ：不使用强缓存，需要验证缓存是否新鲜。（HTTP/1.1 之前版本的历史遗留字段，仅作为与 HTTP/1.0 的向后兼容而定义）

协商缓存都是由浏览器和服务器协商，来确定是否缓存，主要通过两组header字段，两组字段都是 成对出现 的，即第一次请求的响应头上带某个字段（Last-Modified 或 Etag），则后续请求会带上对应的请求字段（if-modified-since或者if-none-match），若响应头没有，则请求头也不会有对应的字段

①、解析 HTML，生成 DOM 树（浏览器不能直接理解和使用HTML，需要将HTML转换为浏览器能够理解的结构）

②、解析 CSS，生成 CSS 规则树

③、合并 CSS 和 DOM 树，生成render树

④、计算渲染树的布局（Layout/reflow），即各元素尺寸、位置的计算

⑤、绘制 render 树（paint），绘制页面像素信息

⑥、浏览器将各层信息发送给GPU,GPU将各层合成，显示在屏幕

注 ：

1 、render树的节点并不等同的dom树的节点，因为有些节点的display为none，那么在生成render树的时候，就不会将其加入到render树中

2 、 当我们浏览器获得HTML文件后，会自上而下的加载，并在加载过程中进行解析和渲染。

3 、 如果在加载过程中遇到外部CSS文件和图片，浏览器会另外发送一个请求，去获取CSS文件和相应的图片，这个请求是异步的，并不会影响HTML文件的加载。 不会阻塞DOM树的解析，会阻塞DOM树的渲染和后面js语句的执行 ，当计算样式的时候需要等待css文件的资源进行层叠样式，资源阻塞了，会进行等待，直到网络超时，network报出错误，渲染进程继续层叠样式计算。为了避免让用户看到长时间的白屏时间，应该提高css的加载速度：

4 、如果遇到Javascript文件，HTML文件会挂起渲染的进程，等待JavaScript文件加载完毕后，再继续进行渲染。因为JavaScript可能会修改DOM，导致后续HTML资源白白加载，所以HTML必须等待JavaScript文件加载完毕后，再继续渲染，这也就是为什么JavaScript文件在写在底部body标签前的原因

5 、 每个页面至少需要一次回流，就是在页面第一次加载的时候。

1.第一次挥手：Client发送一个FIN，用来关闭Client到Server的数据传送，Client进入FIN_WAIT_1状态。

2.第二次挥手：Server收到FIN后，发送一个ACK给Client，确认序号为收到序号+1（与SYN相同，一个FIN占用一个序号），Server进入CLOSE_WAIT状态。

3.第三次挥手：Server发送一个FIN，用来关闭Server到Client的数据传送，Server进入LAST_ACK状态。

4.第四次挥手：Client收到FIN后，Client进入TIME_WAIT状态，接着发送一个ACK给Server，确认序号为收到序号+1， Server进入CLOSED状态，完成四次挥手。

参考： 前端进阶必看——详细版输入URL到界面展示的过程

简述浏览器渲染机制

为了让网页直接生成添加到手机主屏幕的代码，您需要在网页中添加一些特定的 HTML 代码。例如，您可以使用以下代码：

Markup

<a href="javascript:void(0)" onclick="addToHomeScreen()">

点击这里，将本网页添加到主屏幕

</a>

<script>

function addToHomeScreen() {

var a2hsBtn = document.querySelector(".ad2hs-prompt")

a2hsBtn.style.display = "block"

a2hsBtn.addEventListener("click", addToHome)

}

function addToHome() {

var a2hsBtn = document.querySelector(".ad2hs-prompt")

a2hsBtn.style.display = "none"

var a2hsSkip = document.querySelector(".ad2hs-skip")

a2hsSkip.style.display = "none"

var a2hsBranding = document.querySelector(".ad2hs-branding")

a2hsBranding.style.display = "none"

var a2hsLauncher = document.querySelector(".ad2hs-launcher")

a2hsLauncher.style.display = "block"

deferredPrompt.prompt()

deferredPrompt.userChoice.then(function(choiceResult) {

deferredPrompt = null

})

}

</script>

这段代码包含了一个文本链接，用户点击该链接时会触发一个 JavaScript 函数，该函数会显示一个提示框，提示用户是否将网页添加到主屏幕。用户确认后，该网页就会被添加到主屏幕上。

请注意，上述代码仅供参考，您可能需要根据自己的需求进行修改。

JavaScript

<a href="javascript:void(0)" onclick="addToHomeScreen()">

点击这里，将本网页添加到主屏幕

</a>

<script>

function addToHomeScreen() {

var a2hsBtn = document.querySelector(".ad2hs-prompt")

a2hsBtn.style.display = "block"

a2hsBtn.addEventListener("click", addToHome)

}

function addToHome() {

var a2hsBtn = document.querySelector(".ad2hs-prompt")

a2hsBtn.style.display = "none"

var a2hsSkip = document.querySelector(".ad2hs-skip")

a2hsSkip.style.display = "none"

var a2hsBranding = document.querySelector(".ad2hs-branding")

a2hsBranding.style.display = "none"

var a2hsLauncher = document.querySelector(".ad2hs-launcher")

a2hsLauncher.style.display = "block"

deferredPrompt.prompt()

deferredPrompt.userChoice.then(function(choiceResult) {

deferredPrompt = null

})

}

</script>

如果您不是用户，而是程序员，您可以通过添加特定的 HTML 代码来让网页直接生成添加到手机主屏幕的代码。您可以参考上文中的代码示例，并进行相应的修改。

同时，您也可以使用 Web App Manifest 来为您的网页添加添加到主屏幕的功能。Web App Manifest 是一种 JSON 格式的文件，用于描述网页的一些基本信息，比如网页的名称、图标、启动方式等。您可以在网页的 head 标签中添加一个 link 标签，将 Web App Manifest 的 URL 指向您的网页。例如：

Java

<link rel="manifest" href="https://www.example.com/manifest.json">

JavaScript

然后，您可以在 manifest.json 文件中定义一些相关属性，以便描述网页。例如：

JavaScript

{

"name": "My Awesome Web App",

"short_name": "Awesome App",

"start_url": "./index.html",

"display": "standalone",

"background_color": "#fff",

"theme_color": "#fff",

"icons": [

{

"src": "./icon.png",

"sizes": "192x192",

"type": "image/png"

}

]

}

在这个示例中，我们为网页定义了一些基本属性，比如网页的名称、短名称、启动地址、显示方式等。通过这些属性，用户可以将网页添加到手机主屏幕上，并以“独立”模

非常好！如果您想尝试将网页添加到手机主屏幕，可以按照上述方法进行 *** 作。您可以先添加一些 HTML 代码，然后通过点击相应的按钮来触发添加到主屏幕的 *** 作。或者，您也可以使用 Web App Manifest 来描述网页，并让用户在访问网页时进行添加。

如果您遇到任何问题，可以随时联系我。愿您的尝试顺利！

---