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 生效即可。