Google/QUIC, Quick UDP Internet Connections 是一种实验性的网络传输协议，位于OSI模型的传输层。由Google开发，在2013年实现。QUIC使用UDP协议，它在两个端点间创建连线，且支持多路复用连线。 现代 TCP 是在 RFC 793 中定义的，进过数十年的的实验，实践出来。它在 1981 年发布。HTTP Working Group 在2013开始关注 HTTP/2 的工作，他们聚焦到如何优化 HTTP 在 TCP 的使用上。他们尽可能的消除队头阻塞, 提升对连接的利用。HTTP/2 支持了多路复用，从而高效的利用 TCP 连接。但是 队头阻塞的问题并没有完全解决，因为包传输是有序的，于是 QUIC 为了克服这个问题，将 数据流层移至传输层，它在 UDP 之上构建了一个类似 TCP 详情 »
一般我们本地预览的时候，一般就用 localhost + 端口 就行了，再有需要的话，会类似修改 Hosts ，然后进行域名的绑定 127.0.0.1 dev.xxxx.com 这样我们可以借助本地 hosts 来实现对域名访问本地的服务。 借助 Fiddler 或者 Charles 可以实现代理，从而让手机进行域名的访问。 不过我们有的时候需要访问 https 的服务。 这个时候相对来说，我们可以在使用 serve 基础上，安装 https-localhost 来进行服务的启动。 在这之前，我们也需要安装 nss 。 brew install nss 然后，我们执行 npm 安装命令就好。 npm i -g --only=prod https-localhost 安装完成后，这个时候我们进入目录。 serve ./ 如果我们看到这些字样 Serving 详情 »
一般我们如果做页面性能分析，我们自己带着 Chrome 的 PageSpeed 或者 Audit 就可以了。但是如果我们涉及对关键资源的网络请求的性能埋点的话，我们可以尝试利用 PerformanceTiming 。 它提供了诸如一系列 connectStart domainLookupStart responseEnd 等时间戳的数据。我们可以轻松借用这个 API 做页面的 Performance 的数据埋点。比如可以使用： const pt = performance.timing; const domReady = pt.domInteractive - pt.navigationStart //... 初次之外，我们可以利用 getEntries() 来筛选关键资源，比如你希望埋点的 JS 或者 CSS 资源又或者视频音频资源。 const resource = performance.getEntriesByType('resource'); resource.forEach((item) => { // handle your resource timing data 详情 »
引言 HTTP/2 目前已经逐渐推广开来，很多站点都开始迁移至 HTTP/2 ，比如 https://v.qq.com/ 或者 https://www.google.com.hk/ 都启用了 HTTP/2; 我们可以先看下浏览器的支持情况: HTTP/2 相对 HTTP1 带来了诸多特性; 多路复用 (Multiplexing) 头部压缩 服务端推送 HTTP/2 采用二进制格式而非文本格式 这些好处无疑对提升 Web 性能有很大的帮助，不过还是建议详细阅读 HTTP/2：新的机遇与挑战 了解这背后究竟发生了什么；本文不详细讨论 HTTP/2 的具体特性和实现，更多提供升级实践。 升级 Nginx 机器环境，亚马逊的 EC2 和 ubuntu 系统; 确保你的 详情 »
忽然发现很多人都喜欢用这个问题来问，其实这个问题和 “输入url到网页出现发生了什么”类似，详见知乎上的讨论， 很多人都能回答上来，但是这个问题所能涉及到的知识点却非常多。 那么其实如果我们能够理解输入url都经历了什么，那么我们要做的优化点就是针对这个过程中的每个环节，虽然有些方面并不算前端范畴，但是也需要有所了解。 这个问题有人都已经回到到硬件，用户网络层面这里就忽略吧，我们直接从url解析开始； DNS查找 输入url会先经理一系列事情，前端不用负责这一块，都是浏览器自己做的，url会先找到对应的ip，如果有DNS缓存就快很多，如果没有呢，就不得不去搜索域名直到找到你的要去的域名。 服务器接受请求 服务器接收到数据请求的时候就需要响应并吐出数据。如果是一个静态页面，它就吐出写好的html代码，如果是服务端语言处理过，那部分还需要服务端工程师参与。所以呢，这个时候你有理由去质疑下是不是服务端工程师那边程序是不是出了问题。不过这个解决的事情也不是我们能够做的咯。 浏览器接受到html内容后 接下来，就是我们的事情咯。自己觉得优化一个字小一定不会错（错这个字是相对的，），“变小”。都知道吐出一个400kb的页面和10KB的页面，明显后者快，（在相同物理环境下）。所以变小的过程我们就可以大作文章。 优化其实来源支撑原有体系的每个细节 一个关键字，小。那么一个页面，我们自己写的自然就心里有数。JS + CSS + HTML。如果我们发觉我们把JS CSS都推挤在了html上，html上自然体积就大了。这个时候我们尝试用外链，这样html就会小很多。如果我们再把CSS 和 详情 »
最近温习Http的时候看到方法这里，发觉又遗忘了很多。我们日常生工作中遇到最多的是用Get和Post。然而Http1.1中明确规定的方法还有几种。而且掌握每种方法的具体含义也有助于我们更好的定义接口，以及前端写页面请求。 GET方法，主要是用于请求某个资源，它也是我们最常用到的一种方法，当我们获取列表数据分页等等。但是我们知道GET方法数据是存放在头部的，因此它有大小的限制，详见各家浏览器对URL的限制。 POST方法，主要是向服务端发送数据，运用非常广泛比如用户登陆，修改用户资料等。我们有的时候不能因为修改信息少而去改变为get方法，这是违背定义的。 PUT方法，主要让服务器创建一个资源。如果接触过restful设计的话，大家都很明白其中的含义。可能实际过程中我们也有用POST去代替其功能。 HEAD方法，大家用的就少了，与Get类似，但是知识要求返回头部信息即可，不用返回数据主体。因此用Head可以判断数据类型，查看相应状态。 OPTIONS 方法主要是告知服务器应该支持的功能。如果设置过nginx 的跨域，我们会对options这个方法有所了解。 DELETE方法主要用于删除URL所请求的资源，有的接口设计中会用这样的方法来表示。 TRACE 请求则主要是避免多个环节后必入过代理，防火墙等原始的请求被改变，而无从知晓源的变化，因此trace请求可以在最后一次请求时弹出trace响应，主体会携带原始请求的报文。除此之外，我们还定义了一些扩展方法: LOCK 锁定资源 MKCOL 允许用户创建资源 COPY 服务器上复制资源 MOVE 服务器上移动资源 详情 »
最近自己的 https://www.jackzoo.org/ 切换到了 https。其实去年想把博客给迁移过去，但是太穷找了个免费的证书(可以去这里弄Let's Encrypt)，实际效果不是很好。 （可以访问 https://www.jackpu.com ）但是最近腾讯云推出了免费的ssl证书申请。楼主是亲测有效的。（我没有打广告） 申请成功后，你直接下载证书就可以用了。 配置nginx 在/etc/nginx/conf.d/下加入你的域名配置比如xxx.com.conf,内容如下 server { listen 80; listen 443 ssl; server_name www.xxx.com; ssl_certificate /etc/nginx/ssl/www.xxx.com_cert.crt; ssl_certificate_key 详情 »
