**浏览器中点击链接:**
1. 如果是在当前页打开的链接(也就是在当前选项卡打开的页面),那么在点击之后,浏览器的**加载状态**立即变成加载中的(实际上这里面有不同的过程,待会说),此时会开始“**寻址**”,当前页面维持原状,不会变化,**浏览器地址栏URL**也没有变化(请记住这些微妙的特征),当寻址完成(这个过程如果线路进,网络通畅则一般很快),寻址完成后就会开始加载新的链接页面了,此时当前页面会清空,浏览器地址栏URL也变成目标地址,也就是**白屏**了,然后开始渲染加载的新页面,如果加载渲染这个过程比较长,那么白屏显示也就越久。不过现代浏览器为了提升体验,减少白屏等待时间,对这个过程进行了优化,一般在开始加载新页面时不立即显示白屏,而是先停留原页面,维持不变(请注意现在浏览器是加载状态,而不是寻址状态,这两个状态有为妙区别,稍后再说),等加载的内容可以渲染时,浏览器会检测到,此时就清空原页面,开始进入直接渲染新页面的过程了,所以我们几乎感觉不到白屏页面,当然这是现代浏览器优化的结果。
记得上面说的浏览器加载状态的那个微妙特征了吗,细心的我们可以注意到谷歌浏览器在寻址的时候是逆时针旋转,寻址完成后加载时会顺时针旋转,这个微妙的细节凸显出来谷歌浏览器对细节的深入思考及卓越的极客、工程师文化。网上有一篇文章对谷歌留言器这个细节进行了说明:
[chrome浏览器的小圈圈逆时针转动是什么意思?](http://www.zhihu.com/question/21138264)
[Google Chrome浏览器的标签在读取页面时有两种读取状态,一种高亮顺时针快速转动,一种稍暗逆时针慢速转动,分别表示什么或有什么含义吗?](http://www.zhihu.com/question/20584542?sort=created)。
>[info] 前期逆时针(寻址)慢转时状态栏显示「正在发送请求」和「正在等待回应」,后来顺时针(加载)快转时就是「正在传输数据」,所以猜测分别是对应 DNS 查询和传输数据。
2. 如果是在新标签打开的页面,那么直接跳转到新标签,就没上面那些优化了,新页面会由白屏状态(寻址),到加载渲染完成。
根据这个原理,可以在头部设置域让浏览器提前缓存DNS,以加快页面打开速度:
~~~html
<link rel="dns-prefetch" href="//static.360buyimg.com" />
<link rel="dns-prefetch" href="//misc.360buyimg.com" />
<link rel="dns-prefetch" href="//img10.360buyimg.com" />
<link rel="dns-prefetch" href="//img11.360buyimg.com" />
<link rel="dns-prefetch" href="//img12.360buyimg.com" />
<link rel="dns-prefetch" href="//img13.360buyimg.com" />
<link rel="dns-prefetch" href="//img14.360buyimg.com" />
<link rel="dns-prefetch" href="//img30.360buyimg.com" />
~~~
# 扩展知识
- 开始
- 微信小程序
- 获取用户信息
- 记录
- HTML
- HTML5
- 文档根节点
- 你真的了解script标签吗?
- 文档结构
- 已经落后的技术
- form表单
- html实体
- CSS
- css优先级 & 设计模式
- 如何编写高效的 CSS 选择符
- 笔记
- 小计
- flex布局
- 细节体验
- Flex
- Grid
- tailwindcss
- JavaScript
- javascript物语
- js函数定义
- js中的数组对象
- js的json解析
- js中数组的操作
- js事件冒泡
- js中的判断
- js语句声明会提前
- cookie操作
- 关于javascript你要知道的
- 关于innerHTML的试验
- js引擎与GUI引擎是互斥的
- 如何安全的修改对象
- 当渲染引擎遇上强迫症
- 不要使用连相等
- 修改数组-对象
- 算法-函数
- 事件探析
- 事件循环
- js事件循环中的上下文和作用域的经典问题
- Promise
- 最佳实践
- 页面遮罩加载效果
- 网站静态文件之思考
- 图片加载问题
- 路由及转场解决方案
- web app
- 写一个页面路由转场的管理工具
- 谈编程
- 技术/思想的斗争
- 前端技术选型分析
- 我想放点html模板代码
- 开发自适应网页
- 后台前端项目的开发
- 网站PC版和移动版的模板方案
- 前后端分离
- 淘宝前后端分离
- 前后端分离的思考与实践(一)
- 前后端分离的思考与实践(二)
- 前后端分离的思考与实践(三)
- 前后端分离的思考与实践(四)
- 前后端分离的思考与实践(五)
- 前后端分离的思考与实践(六)
- 动画
- 开发小技巧
- Axios
- 屏幕适配
- 理论基础
- 思考
- flexible.js原理
- 实验
- rem的坑,为什么要设置成百分比,为什么又是62.5%
- 为什么以一个标准适配的,其它宽度也能同等适配
- 自适应、响应式、弹性布局、屏幕适配
- 适配:都用百分比?
- 番外篇
- 给你看看0.5px长什么样?
- 用事实证明viewport scale缩放不会改变rem元素的大小
- 为什么PC端页面缩放不会影响rem元素
- 究竟以哪个为设备独立像素
- PC到移动端初试
- 深入理解px
- 响应式之栅格系统
- 深入理解px(二)
- 一篇搞定移动端适配
- flex版栅格布局
- 其他
- 浏览器加载初探
- 警惕你的开发工具
- JS模块化
- webpack
- 打包原理
- 异步加载
- gulp
- 命名规范
- 接口开发
- sea.js学习
- require.js学习
- react学习
- react笔记
- vue学习
- vue3
- 工具、技巧
- 临时笔记
- 怎么维护好开源项目
- 待办
- 对前端MVV*C框架的思考
- jquery问题
- 临时
- 好文
- 节流防抖