作为前端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的性能最佳,我尝试改变样本数据量即数组长度,但结果还是很固定。

阅读全文 »

12036最难的应该是班次查询买票,但前端性能也可以做的更好,这里以前端视角来分析下页面性能可以优化的项。

  1. HTML,CSS,JS没有做压缩,通过Webpack等打包工具去除空格,换行等
  2. GZIP/BR压缩开启,体积可以进一步缩小,降低带宽开销2/3
  3. 全部使用的协商缓存,强缓存设置的0,这样带来了部分没必要的请求代价,应该两种结合使用
  4. HTTP2.0应该开启,实现多路复用,请求效率更高
  5. CDN静态资源,实现域名分片
  6. 部分JS,CSS通过Webpack等打包工具bundle到一起,进一步降低请求次数
  7. 懒加载部分资源比如非可见的图片,及部分数据请求
  8. 预DNS解析,配置<link rel="dns-prefetch" href="//kyfw.12306.cn">

以上即观察后发现可以优化的项。

Chrome Dev Tools中有LightHouse可以对网站性能作出测试,同时给出优化建议,试了下,60分。so,还是有很多优化空间的。

阅读全文 »
0%