最近项目并不紧张了,于是得空把一些基础理论梳理下

  1. 当用户URL输入一个网址,浏览器根据用户输入的信息判断是关键词还是网址,如果是关键词则利用默认搜索引擎拼接输入的关键词形成网址,如果输入即是有效网址,则加上协议形成URL,用户输入完内容,按下回车
  2. 回车前,如果当前有页面存在则,执行beforeunload方法
  3. 浏览器导航栏显示loading
  4. 浏览器进程构建请求行信息,以IPC方式将请求行信息发送给网络进程
  5. 网络进程接收到该URL请求
  6. 网络进程中查询该URL资源是否有缓存(强缓存),如果有则相当于请求结束拿到响应数据,直接返回200响应头给浏览器进程,如果没有,则继续发起网络请求
  7. 网络进程中查询DNS确定URL对应的真正IP地址,如果是HTTPS,建立TLS连接
  8. 通过IP地址和端口与目标服务器建立TCP连接【TCP连接三次握手】,成功后开始构建请求头(附带Cookie),向服务器发送HTTP请求【单个域名TCP连接数量限制,比如Chrome是6】
  9. 服务器获得信息后,会构建响应信息,发送给网络进程
  10. 网络进程获得响应信息,解析响应行的状态码来确定下一步的动作,如果是301,302则获取location,然后重复执行接收到一个URL之后的一系列动作,如果是304说明客户端有缓存,则返回304头部到浏览器进程,如果是200则继续
  11. 根据响应头的内容类型来确定下一步的动作,如果是下载类型,则唤起浏览器下载器进行下载,如果是HTML则继续
  12. 渲染进程存在打开新进程的情况,如果是新开的页面,开启新的渲染进程,如果是A页面打开的B页面,同站点,且没有开启noopener则复用A的渲染进程
  13. 浏览器进程接收网络进程的响应头数据,向渲染进程发送【提交文档】信息,渲染进程接收到【提交文档】信息后,与网络进程建立传输数据管道
  14. 渲染进程接收完毕,向浏览器进程发送【确认提交】
  15. 浏览器进程接收【确认提交】信息后,进行安全栏,前进后退界面更新
  16. 渲染进程:DOM生成=>样式计算=>布局=>分层=>图层绘制=>分块=>光栅化=>合成绘制
  17. 渲染进程渲染完成后,向浏览器进程提交页面加载完毕

参考资料

阅读全文 »

作为前端developer总是要经常查看networks,HTTP请求不可避免要接触,但一直缺乏系统的学习,于是查询这里梳理下,加深下记忆。

HTTP定义

超文本传输协议(英语:HyperText Transfer Protocol,缩写:HTTP)是一种用于分布式、协作式和超媒体信息系统的应用层协议HTTP是万维网的数据通信的基础。HTTP协议是1989年发起的,当前标准由万维网协会(World Wide Web Consortium,W3C)和互联网工程任务组(Internet Engineering Task Force,IETF)进行协调发布。

需要知道

  1. HTTP是个已有30多年的历史的协议
  2. HTTP通常建立在TCP/IP协议之上,但HTTP协议中并没有规定它必须使用或支持的层。因此HTTP可以在任何互联网协议或其它网络上实现
  3. HTTP请求的发起端不一定是在浏览器,爬虫或者其他工具均可
阅读全文 »

Chrome DevTools下调试前端请求时,会注意到缓存分为两种MemoryCache,DiskCache,针对两者区别和Chrome是如何选择缓存介质的,这里基于我的认知总结下。

概念

单说区别,简单,仅从名字上也可以看出两者的区别,MemoryCache是从内存中存取,因此速度快,但时生命周期短,而DiskCache是磁盘存取,因此读写较慢,但生命周期相对较长,属于持久化存取。

缓存介质选择

对于两种缓存介质的选择,官方权威资料并没有找到,于是我只能做了下测试,同时得出以下的结论。

阅读全文 »

身为前端er,在过去的几年经常使用这两个函数但是真的傻傻分不清,总是需要使用使用看API,或者TS定义,还是抵消,最好的办法还是脑子里彻底记住,毕竟漫威英雄啥的咱不是记得都门儿清吗。so,还是功夫用的不够。

这里就mark下两者的区别,用于记忆。

splice

单词含义

绞接,捻接

阅读全文 »

最近Stackoverflow上看到一个问题,Are ES6 template literals faster than Array join at constructing long strings,这个问题被管理员直接关闭了,因此看不到有人给出答案,但问题确实有点意思,毕竟我不确定,于是这里就测试并记录下。

Benchmark

测试数据及代码如下。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var arr = Array(10000)
.fill(1)
.map(() => 'A' + Math.ceil(Math.random() * 100));


// array.join
var res=arr.join('; ');

// string literal
var finalString2 = arr.reduce((res, item) => {
return `${res}; ${item}`;
}, '');

// string concatenation
var finalString3 = arr.reduce((res, item) => {
return res + '; ' + item;
}, '');

测试结果如下,可以看出array.join的性能最佳,我尝试改变样本数据量即数组长度,但结果还是很固定。

阅读全文 »
0%