FPs

Articles with the Web tag

《HTTP/2 基础教程》读书笔记

Learning_HTTP_2

最近拿到一本新书:《HTTP/2 基础教程》,薄薄一本,除去附录100页不到,卖的挺贵,49元。《精通正则表达式》的译者余晟为这书写了序,也在他的个人公众号上推荐,读完却觉得作为基础教程还不错,翻译上觉得略生硬。作点简单的笔记,方便以后“按图索骥”。

Continue ->

获取Local DNS 地址信息

在网页中获取local dns 不太方便,看看大家是怎么做的。

阿里云CDN 诊断工具

阿里云CDN提供的阿里昆仑用户诊断工具
alicdn_local_dns

获取到local dns 的这个请求:

https://123-66-35-57-122894414.dns-detect.alicdn.com/api/cdnDetectHttps?method=commitDetectHttps&detectId=122894414&cb=jQuery110102821084573750223_1503489263656&_=1503489263658

一个奇怪的域名,每次访问都不一样:
123-66-35-57-122894414.dns-detect.alicdn.com
设备ID :
detectId=122894414

用户访问一个域名,浏览器给按照分配的local dns 发起dns 迭代查询,最后向域名的权威服务器名查询,最后这一步的时候可以得到local dns 的地址。

Continue ->

《Web 性能权威指南》读书笔记

bookcover

《Web 性能权威指南》的起因是在看《HTTPS 权威指南》的时候,看到优化相关的,然后就延伸到想看一下这本书。
这本书,作者提供了免费的在线英文版,建议还是看英文的,中文翻译版有些地方略生硬。

TCP 优化

这部分从协议出发,讲解了优化的要点。

三次握手带来的延迟使得创建每创建一个新的TCP连接都要付出很大的代价。而这也决定了提高TCP应用性能的关键,在于想办法重用连接。

可以看到重用连接在后续的HTTP 优化都是重点。
第二章分内容和《HTTPS 权威指南》的9.1 有重合,可以都看下。

把服务器内核升级到最新版本(Linux: 3.2+)

新内核能获得更好的性能,例如采用了PRR,比例降速算法。

Continue ->

React 从入门到做个实时搜索框

之前给内网做的DNS 平台的查询接口是通过API 的方式,想着不如撸一个搜索框给大家用,顺便也看看React。 先按照阮一峰的React 入门实例教程 过了一遍,有个大概的了解之后,以文中第十一个例子为模板,照猫画虎。

原来的平台是用Flask+Jinja2 写的,所以先引入一些react 的资源,都是手动加的,还没看前端那一堆包管理的工具,用了browser.js 做转换,先不考虑效率。这里在版本上遇到几个坑,react.js 和browser.js 似乎有依赖性问题。

{% block head %}
{{super()}}
<script src="{{ url_for('static',filename="react.min.js") }} "></script>
<script src="{{ url_for('static',filename="react-dom.min.js") }} "></script>
<script src="{{ url_for('static',filename="react-with-addons.min.js") }} "></script>
<script src="{{ url_for('static',filename="browser.min.js") }} "></script>
{% endblock %}

服务端的搜索API:

http://abc.com/search?keyword=

希望达到的效果是用户输入查询关键词之后,通过AJAX 请求实时的在页面上显示结果。

源码:

Continue ->

面向网页工程师与网站管理员的Web缓存教程

这是一篇知识性的文档。尽管是技术性文章,但是本文试图让相关的概念更容易被理解,及更容易被应用到实际场景中去。正因如此,为了更加简明,某些原理方面的东西在文中被简化或省略了。如果你对这些细节部分感兴趣,请深入阅读文末的【参考文档和更多信息】。

1.什么是Web缓存?为什么人们使用它?

Web缓存位于一个或多个Web服务器(即源服务器)和一个或多个客户端之间,监视着进入的请求,保存着服务器响应的内容(例如HTML页面、图片和文件(统称为代表))的代表。然后,当下一个同样URL的请求到来时,它可以使用保存的内容响应请求,而不是向源服务器再次请求。

使用Web缓存的两大主要理由:

  • 降低响应延时:因为请求被缓存(离客户端更近)响应而不是源服务器,可以花更少的时间得到服务文件并渲染展示。这让网页看起来响应更迅速。
  • 降低网络流量:因为代表文件被重用,这将降低客户端所用的带宽总量。这也将为按流量计费的客户端节省资费,和保持更低的带宽以及让带宽更容易管理。

2.Web缓存类型

2.1 浏览器缓存

如果你查看任何一款现代浏览器(例如 Internet Explorer, Safari 或 Mozilla)的首选项,可能会注意到一项叫“缓存”的设置,它可以在你的计算机上设置一块硬盘空间用于存储你浏览器过的网页的代表文件。浏览器缓存依照非常简单的规则进行运作:在同一个用户会话中(即当前使用浏览器没有关闭前)会检查并确保存储的代表文件是最新的。

当用户单击浏览器的‘返回’按钮或者点击某个浏览过的页面链接时,浏览器缓存特别有用。另外,如果你在你的网站中使用相关的导航图片,这些图片的访问请求可以从用户浏览器缓存中及时得到响应。

2.2 代理缓存

Web代理缓存依据同样的原理工作,只是规模更大。代理服务器以同样的方式为成千上万的用户服务。大公司和网络服务提供商(ISP)们经常将代理服务器部署在它们的防火墙上,或者使用独立的设备(也称为中介服务器)。

由于代理服务器既不是客户端也不是源服务器的一部分,但是它们位于网络中间,并且请求都必须经由它们发往别处。一种方式是手动设置你的浏览器,告诉它们使用哪些代理。另一种方式是使用拦截代理。拦截代理服务器自己会将所有网页请求转发给后台网络,客户端无需进行设置,甚至对于客户端来说代理服务器是透明的。

代理缓存是共享缓存的一种:通常有大量的用户使用它而不是单个用户,多次请求的代表文件会被大量重复利用,所以使用代理缓存非常有利于降低响应延时和降低网络流量。

Continue ->

校园网内网建站

在校园网内,无法实现内网穿透,不过学校给分配了ipv6地址,可以利用这个地址。

涉及到:

  • 域名注册
  • DNS解析服务商处AAAA记录解析

本地服务器listen [::1]:80

注册一个免费的域名,并设置好dns

以.tk域名为例子(还有许多的,比如co.cc) 注册网址注册好之后设置Custom DNS为你使用的dns解析服务的服务器地址 dnspod的为:

  • f1g1ns1.dnspod.net
  • f1g1ns1.dnspod.net

设置DNS解析 以[dnspod]提供的服务为例子,dnspod免费用户进行AAAA记录,注册dnspod,将在tk注册的免费域名进行解析 添加AAAA记录

本机listen for ipv6

以nginx为例,编辑/etc/nginx/sites-available/default:

server{
…..
listen 80;
listen [::]:80 default_server ipv6only=on; #listen for ipv6
….
}

sudo nginx -s reload 生效即可。