浏览器输入url后发生了什么
浏览器输入url后发生了什么
- 找本地HOST文件，检查文件中是否有相应域名和IP的对应关系
- 找DNS服务器，从DNS服务器获取域名对应的IP地址
- 建立TCP链接，三次握手
- 客户端发送http请求
- 服务器处理http请求
- 服务器返回响应结果
- 关闭TCP链接，四次握手
- 浏览器解析HTML
- 浏览器布局渲染，页面展示给用户
最后一步这里有两个概念需要了解，重绘（repaint）和回流（reflow、layout）
- 重绘（repaint）：屏幕的一部分重画，不影响整体布局，比如某个CSS的背景色变了，但元素的几何尺寸和位置不变
- 回流（reflow）：render tree渲染树的一部分（或者全部）因为元素的规模尺寸、布局、隐藏等改变需要重新构建。这就称为回流，每个页面至少需要一次回流，就是在页面首次加载时，因为构建render tree 一定会发生回流，完成回流后，浏览器会重新绘制受影响的部分到屏幕中，该过程称之为重绘。
本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来源 AnyJohn！
相关推荐
2020-09-22
Flex布局
引言Flex布局区别于传统布局，可以更好、更简便响应式地实现各种布局。通过简单的属性设置，即可达成曾经十分复杂的，如盒子垂直居中等情况。 目前已得到所有浏览器的支持。具体支持如下图。其中红色表示不支持、绿色条纹表示部分支持、黄色角标表示需要使用-webkit-语法。 布局的传统解决方案，基于盒状模型，依赖display属性+position属性+float属性。这种布局方案对于特殊的布局（尽管现在非常常用，但不得不承认对于最初的设计而言，横向排列与垂直居中是很特殊的），比如，垂直居中就不容易实现。于是，2009年，W3C提出了一种新的布局方案——flex布局，未来即现在的布局首选方案。 Flex布局是什么？Flex是Flexible Box的缩写，意为“弹性布局”，用来为盒子模型提供最大的灵活性。任何一个容器都可以被指定为Flex布局。 123.container { display: flex;} 行内元素也可以使用Flex布局。 123.container { display:...
2020-01-15
Java包装类
什么是包装类?我们都对Java中的基本类型很熟悉,基本类型是不具备对象的特性的,比如基本类型不能调用方法,功能很少,为了让基本数据类型也具有对象的特性,java为每个基本类型提供了一个包装类,这样我们就可以像操作对象一样操作基本数据类型包装类都在java.lang包内基本类与包装类的对应关系: 包装类主要提供了两大类方法: 将本类型和其他基本类型进行转换的方法 将字符串和本类型及包装类互相转换的方法 Java中基本类型和包装类之间的转换基本类型和包装类之间经常需要转换在JDK1.5引入自动装箱和拆箱的机制后,包装类和基本类型之间的转换就更加轻松便利了那么什么是装箱和拆箱呢?装箱: 把基本类型转换成包装类,使其具有对象的性质,又可分为手动装箱和自动装箱 123int i = 0;//定义一个int基本类型值Integer x = new Integer(i);//手动装箱Integer y = i;//自动装箱 拆箱: 和装箱相反,把包装类对象转换成基本类型的值,又可分为手动拆箱和自动拆箱 123Integer j = new Integer(8);int m =...
2019-11-14
Java理解String的不变性
String对象创建后不能被修改,是不可变的,所谓的修改其实是创建了新的对象,所指向的内存空间不同1234567891011121314//比如创建四个String对象,值都为"Love"String s1 = "Love";String s2 = "Love";String s3 = new String("Love");String s4 = new String("Love");//对于字符常量,只创建一个,重复的会引用常量池中的内容,所以比对s1,s2的内存,会返回trueSystem.out.println(s1 == s2);//s1和s3是不同的对象,会返回falseSystem.out.println(s1 == s3);//s3和s4是不同的对象,两者都开辟了不同的内存空间,所以返回falseSystem.out.println(s3 == s4);//修改s1,s1会指向新的内存空间s1 = s1+"...
2019-10-14
Http与Https
Http与Https概括超文本传输协议HTTP协议被用与在Web浏览器和网站服务器之间传递信息，http是无状态的，以明文方式发送内容，不提供任何方式的数据加密，如果攻击者截取了Web浏览器和网站服务器之间的传输报文，就可以直接读懂其中的信息，因此，http协议不适合传输一些敏感信息。为了解决http协议的这一缺陷，需要使用另一种协议：安全套接字层超文本传输协议https，为了数据传输的安全，https在http的基础上加入了SSL协议，SSL依靠证书来验证服务器的身份，并为浏览器和服务器之间的通信加密。 http和https的基本概念http：是互联网上应用最为广泛的一种网络协议，是一个客户端和服务器端请求和应答的标准（tcp），用于从WWW服务器传输超文本到浏览器的传输协议，他可以使浏览器更加高效，使网络传输减少。https：是以安全为目的的http通道，即http（应用层）下加入SSL层，https的安全基础是SSL，因此加密的详细内容就需要SSL ...
2019-10-17
三次握手
三次握手三次握手（Three-way Handshake）其实就是指建立一个TCP连接时，需要客户端和服务器总共发送3个包。进行三次握手的主要作用就是为了确认双方的接收能力和发送能力是否正常、指定自己的初始化序列号为后面的可靠性传送做准备。实质上其实就是连接服务器指定端口，建立TCP连接，并同步连接双方的序列号和确认号，交换TCP窗口大小信息。 刚开始客户端处于 Closed 的状态，服务端处于 Listen 状态。 进行三次握手： 第一次握手：客户端给服务端发一个 SYN 报文，并指明客户端的初始化序列号 ISN©。此时客户端处于 SYN_SEND 状态。 ISN(Initial Sequence Number)是固定的吗？ 当一端为建立连接而发送它的SYN时，它为连接选择一个初始序号。ISN随时间而变化，因此每个连接都将具有不同的ISN。ISN可以看作是一个32比特的计数器，每4ms加1 。这样选择序号的目的在于防止在网络中被延迟的分组在以后又被传送，而导致某个连接的一方对它做错误的解释。三次握手的其中一个重要功能是客户端和服务端交换 ISN(Initial...
2019-10-17
什么是前端
前端五要义：系统全面的知识体系：CSS HTML JavaScript企业主流开发技术：react、Vue.js、ES6、webpack、微信小程序相对丰富完整的项目经验：电商、社交、小程序师从大厂技术大牛快速高效的学习方法：项目——文档——视频，结合学习。 什么是前端？完成你所看到的一切！ HTML制作网页的结构和内容 CSS负责网页的样式 JavaScript完成和用户之间的动态交互 所有的框架都是基于这三者。 前端开发兵器： webstrom：前端开发神器 sublime：强大的编辑功能 vscode：微软出品 HbuildX：国内
评论
