xml地图|网站地图|网站标签 [设为首页] [加入收藏]
跨域访问和防盗链基本原理,别人家的面试题
分类:web前端

值得收藏!Web开发的各种性能工具

2015/06/22 · HTML5 · 性能

原文出处: Robin Rendle   译文出处:南北   

嗨,各位,又到了周末总结时间!得益于大量的 Grunt 和 Gulp 插件,我们可以轻松实现网站数据的可视化,虽然深入理解这些工具还比较困难,但分门别类的将它们列出来,也是很有帮助的。

跨域访问和防盗链基本原理(一)

2015/10/18 · HTML5 · 跨域, 防盗链

原文出处: 童燕群 (@童燕群)   

别人家的面试题:统计“1”的个数

2016/05/27 · JavaScript · 5 评论 · Javascript, 算法

本文作者: 伯乐在线 - 十年踪迹 。未经作者许可,禁止转载!
欢迎加入伯乐在线 专栏作者。

小胡子哥 @Barret李靖 给我推荐了一个写算法刷题的地方 leetcode.com,没有 ACM 那么难,但题目很有趣。而且据说这些题目都来源于一些公司的面试题。好吧,解解别人公司的面试题其实很好玩,既能整理思路锻炼能力,又不用担心漏题 ╮(╯▽╰)╭。

长话短说,让我们来看一道题:

内容分发网络(CDN)

CDN 可以帮你把网站的资源分发到世界各地,有助于提高网站的响应速度,当然,这对于那些特殊地区的用户是收效甚微的。

一、什么是防盗链

网站资源都有域的概念,浏览器加载一个站点时,首先加载这个站点的首页,一般是index.html或者index.php等。页面加载,如果仅仅是加载一个index.html页面,那么该页面里面只有文本,最终浏览器只能呈现一个文本页面。丰富的多媒体信息无法在站点上面展现。

那么我们看到的各类元素丰富的网页是如何在浏览器端生成并呈现的?其实,index.html在被解析时,浏览器会识别页面源码中的img,script等标签,标签内部一般会有src属性,src属性一般是一个绝对的URL地址或者相对本域的地址。浏览器会识别各种情况,并最终得到该资源的唯一地址,加载该资源。具体的加载过程就是对该资源的URL发起一个获取数据的请求,也就是GET请求。各种丰富的资源组成整个页面,浏览器按照html语法指定的格式排列获取到各类资源,最终呈现一个完整的页面。因此一个网页是由很多次请求,获取众多资源形成的,整个浏览器在一次网页呈现中会有很多次GET请求获取各个标签下的src资源。

图片 1

上图是一篇本站的博客网页呈现过程中的抓包截图。可以看到,大量的加载css、js和图片类资源的get请求。

观察其中的请求目的地址,可以发现有两类,一个是本站的43.242段的IP地址,这是本站的空间地址,即向本站自身请求资源,一般来说这个是必须的,访问资源由自身托管。另外一类是访问182的网段拉取数据。这类数据不是托管站内的,是在其他站点的。浏览器在页面呈现的过程,拉取非本站的资源,这就称“盗链”。

准确的说,只有某些时候,这种跨站访问资源,才被称为盗链。假设B站点作为一个商业网站,有很多自主版权的图片,自身展示用于商业目的。而A站点,希望在自己的网站上面也展示这些图片,直接使用:

<img src=";

1
<img src="http://b.com/photo.jpg"/>

这样,大量的客户端在访问A站点时,实际上消耗了B站点的流量,而A站点却从中达成商业目的。从而不劳而获。这样的A站点着实令B站点不快的。如何禁止此类问题呢?

HTTP协议和标准的浏览器对于解决这个问题提供便利,浏览器在加载非本站的资源时,会增加一个头域,头域名字固定为:

Referer:

1
Referer:

而在直接粘贴地址到浏览器地址栏访问时,请求的是本站的该url的页面,是不会有这个referer这个http头域的。使用Chrome浏览器的调试台,打开network标签可以看到每一个资源的加载过程,下面两个图分别是主页面和一个页面内资源的加载请求截图:

图片 2

图片 3

这个referer标签正是为了告诉请求响应者(被拉取资源的服务端),本次请求的引用页是谁,资源提供端可以分析这个引用者是否“友好”,是否允许其“引用”,对于不允许访问的引用者,可以不提供图片,这样访问者在页面上就只能看到一个图片无法加载的浏览器默认占位的警告图片,甚至服务端可以返回一个默认的提醒勿盗链的提示图片。

一般的站点或者静态资源托管站点都提供防盗链的设置,也就是让服务端识别指定的Referer,在服务端接收到请求时,通过匹配referer头域与配置,对于指定放行,对于其他referer视为盗链。

1 赞 1 收藏 评论

图片 4

统计“1”的个数

给定一个非负整数 num,对于任意 i,0 ≤ i ≤ num,计算 i 的值对应的二进制数中 “1” 的个数,将这些结果返回为一个数组。

例如:

当 num = 5 时,返回值为 [0,1,1,2,1,2]。

/** * @param {number} num * @return {number[]} */ var countBits = function(num) { //在此处实现代码 };

1
2
3
4
5
6
7
/**
* @param {number} num
* @return {number[]}
*/
var countBits = function(num) {
    //在此处实现代码
};

CloudFlare

CloudFlare 的强大之处在于它可以成为你的 DNS 服务器(CDN 只是它所有服务的一个组成部分),这样对你的网站发起的所有请求都会经过它。

CloudFlare 的 CDN 在过去十五年的设计和发展中,并没有一味的守旧和固步自封。我们的专利技术中充分利用了最新的技术进步,包括并不限于硬件、web 服务器和网络路由。换言之,我们创新的建设了下一代的 CDN。新的 CDN 配置简单、价格低廉,其性能也一定比你使用过的任何传统 CDN 都要优秀。

解题思路

这道题咋一看还挺简单的,无非是:

  • 实现一个方法 countBit,对任意非负整数 n,计算它的二进制数中“1”的个数
  • 循环 i 从 0 到 num,求 countBit(i),将值放在数组中返回。

JavaScript中,计算 countBit 可以取巧:

function countBit(n){ return n.toString(2).replace(/0/g,"").length; }

1
2
3
function countBit(n){
    return n.toString(2).replace(/0/g,"").length;
}

上面的代码里,我们直接对 n 用 toString(2) 转成二进制表示的字符串,然后去掉其中的0,剩下的就是“1”的个数。

然后,我们写一下完整的程序:

版本1

function countBit(n){ return n.toString(2).replace(/0/g,'').length; } function countBits(nums){ var ret = []; for(var i = 0; i <= nums; i++){ ret.push(countBit(i)); } return ret; }

1
2
3
4
5
6
7
8
9
10
11
function countBit(n){
   return n.toString(2).replace(/0/g,'').length;
}
 
function countBits(nums){
   var ret = [];
   for(var i = 0; i <= nums; i++){
       ret.push(countBit(i));
   }
   return ret;
}

上面这种写法十分讨巧,好处是 countBit 利用 JavaScript 语言特性实现得十分简洁,坏处是如果将来要将它改写成其他语言的版本,就有可能懵B了,它不是很通用,而且它的性能还取决于 Number.prototype.toString(2) 和 String.prototype.replace 的实现。

所以为了追求更好的写法,我们有必要考虑一下 countBit 的通用实现法。

我们说,求一个整数的二进制表示中 “1” 的个数,最普通的当然是一个 O(logN) 的方法:

function countBit(n){ var ret = 0; while(n > 0){ ret += n & 1; n >>= 1; } return ret; }

1
2
3
4
5
6
7
8
function countBit(n){
    var ret = 0;
    while(n > 0){
        ret += n & 1;
        n >>= 1;
    }
    return ret;
}

所以我们有了版本2

这么实现也很简洁不是吗?但是这么实现是否最优?建议此处思考10秒钟再往下看。


MaxCDN

CSS-Tricks 当前就在使用 MaxCDN 托管所有的静态资源。它可以无缝地融合 WordPres 和 W3 的所有缓存资源,所以我们无需做什么特别处理,即可将资源移入 CDN,并能保证链接的准确性。

图片 5

对于一个博客来说,考虑到其中的大文件主要是 JavaScript、CSS 和图片,而不是视频等类型,这贷款占用的可真多。

我们的 CDN 服务同样是一个网站加速器和实时控制中心。创建它,就是为了让网站的用户和运维都能从下一代 CDN 中获得最大收益。

更快的 countBit

上一个版本的 countBit 的时间复杂度已经是 O(logN) 了,难道还可以更快吗?当然是可以的,我们不需要去判断每一位是不是“1”,也能知道 n 的二进制中有几个“1”。

有一个诀窍,是基于以下一个定律:

  • 对于任意 n, n ≥ 1,有如下等式成立:

countBit(n & (n - 1)) === countBit(n) - 1

1
countBit(n & (n - 1)) === countBit(n) - 1

这个很容易理解,大家只要想一下,对于任意 n,n – 1 的二进制数表示正好是 n 的二进制数的最末一个“1”退位,因此 n & n – 1 正好将 n 的最末一位“1”消去,例如:

  • 6 的二进制数是 110, 5 = 6 – 1 的二进制数是 101,6 & 5 的二进制数是 110 & 101 == 100
  • 88 的二进制数是 1011000,87 = 88 – 1 的二进制数是 1010111,88 & 87 的二进制数是 1011000 & 1010111 == 1010000

于是,我们有了一个更快的算法:

版本3

function countBit(n){ var ret = 0; while(n > 0){ ret++; n &= n - 1; } return ret; } function countBits(nums){ var ret = []; for(var i = 0; i <= nums; i++){ ret.push(countBit(i)); } return ret; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function countBit(n){
    var ret = 0;
    while(n > 0){
        ret++;
        n &= n - 1;
    }
    return ret;
}
 
function countBits(nums){
   var ret = [];
   for(var i = 0; i <= nums; i++){
       ret.push(countBit(i));
   }
   return ret;
}

上面的 countBit(88) 只循环 3 次,而“版本2”的 countBit(88) 却需要循环 7 次。

优化到了这个程度,是不是一切都结束了呢?从算法上来说似乎已经是极致了?真的吗?再给大家 30 秒时间思考一下,然后再往下看。


CloudFront

亚马逊网络服务(AWS)版本的 CDN。

亚马逊 CloudFront 是一个内容分发网络服务。它可以无缝融合入其他的亚马逊网络服务产品,为开发者和企业分发内容到最终用户手中提供了一种简单的方式,整个过程都具有低延迟、高转换速度的特点,也没有最小使用量的强制要求。

countBits 的时间复杂度

考虑 countBits, 上面的算法:

  • “版本1” 的时间复杂度是 O(N*M),M 取决于 Number.prototype.toString 和 String.prototype.replace 的复杂度。
  • “版本2” 的时间复杂度是 O(N*logN)
  • “版本3” 的时间复杂度是 O(N*M),M 是 N 的二进制数中的“1”的个数,介于 1 ~ logN 之间。

上面三个版本的 countBits 的时间复杂度都大于 O(N)。那么有没有时间复杂度 O(N) 的算法呢?

实际上,“版本3”已经为我们提示了答案,答案就在上面的那个定律里,我把那个等式再写一遍:

countBit(n & (n - 1)) === countBit(n) - 1

1
countBit(n & (n - 1)) === countBit(n) - 1

也就是说,如果我们知道了 countBit(n & (n - 1)),那么我们也就知道了 countBit(n)

而我们知道 countBit(0) 的值是 0,于是,我们可以很简单的递推:

版本4

function countBits(nums){ var ret = [0]; for(var i = 1; i <= nums; i++){ ret.push(ret[i & i - 1] + 1); } return ret; }

1
2
3
4
5
6
7
function countBits(nums){
   var ret = [0];
   for(var i = 1; i <= nums; i++){
       ret.push(ret[i & i - 1] + 1);
   }
   return ret;
}

原来就这么简单,你想到了吗 ╮(╯▽╰)╭

以上就是所有的内容,简单的题目思考起来很有意思吧?程序员就应该追求完美的算法,不是吗?

这是 leetcode 算法面试题系列的第一期,下一期我们讨论另外一道题,这道题也很有趣:判断一个非负整数是否是 4 的整数次方,别告诉我你用循环,想想更巧妙的办法吧~

打赏支持我写出更多好文章,谢谢!

打赏作者

CDNperf

上述的 CDNs 并不能托管你任意的资源,它们往往只是托管最频繁用到的文件。虽然对于线上产品来说将资源和服务器托管到私有的 CDN 上并不是最好的方式,但这种方式对于分发资源来说仍然是快速和简单的。

CDNperf 可以帮你找出最快和最可信赖的 JavaScript CDNS,让你的网站更快更有朝气。

图片 6

打赏支持我写出更多好文章,谢谢!

任选一种支付方式

图片 7 图片 8

3 赞 8 收藏 5 评论

性能测试

下面的这些性能测试工具,使用了量化的方式测试了网站中诸如首字节加载时间(time to first byte)或者渲染时间等表现。有些工具还会检查特别检查资源是否被缓存,多个 CSS 或 JS 文件是否值得合并。

关于作者:十年踪迹

图片 9

月影,奇舞团团长,热爱前端开发,JavaScript 程序猿一枚,能写代码也能打杂卖萌说段子。 个人主页 · 我的文章 · 14 ·     

图片 10

WebPagetest

WebPagetest 是性能测试的黄金标准,它提供了多方面的量化指标用于性能测试,比如有一个基本的评分,用于评价当前页面优化的水平;有一个截图,显示页面加载后的视觉效果;还有一个浏览器加载资源的瀑布流…

根据用户浏览器真实的连接速度,在全球范围内进行网页速度测试,并提供详细的优化建议。

图片 11

通过使用 API wrapper,也可以将 WebPagetest 的相关服务添加到 NPM 模块和命令行工具中。

  • webpagetest-mapper:将 WebPageTest 的测试数据转换为可读的文档格式。
  • WPT Bulk Tester:使用 Google Docs 测试多个 URLs(如果你拥有 API key,也可以使用 webpagetest.org 来做这件事,或者其他公开可访问的实例)。

Yslow

Yslow 基于 Yahoo 的高性能网页教条,分析网页的性能并给出响应缓慢的原因。

Google PageSpeed

PageSpeed 根据网页最佳实践分析和优化测试的网页。

图片 12

PageSpeed 也有一个 CLI(Command Line Interface)工具:PSI(PageSpeed Insights with reporting)

在构建进程中,可以使用 PSI 测试移动端和桌面端的性能,最终得到可读性良好的测试结果。

图片 13

我的网站都开销到哪里去了?

评估网站在世界各地为每个移动端用户支出的维护成本。

图片 14

Pingdom 网站速度测试

输入 URL 地址,即可测试页面加载速度,分析并找出性能瓶颈。

图片 15

SpeedCurve

SpeedCurve 既可以让你追踪竞争对手的性能表现,也可以追踪自己的性能表现。使用 SpeedCurve 时,你可以查看某个因素在不同站点的速度表现。对于移动用户来说,他们希望网站在手机上加载起来要快于电脑,如果感到加载迟缓,往往会迅速关上网页,所以,网站的响应速度对他们很重要。

图片 16

Calibre

Calibre 可以帮你追踪页面的加载时间,以及页面大小。问题页面(Janky page)?是的,Calibre 会直接告诉你哪些页面有问题。

图片 17

GT Metrix

GT Metrix 结合了 Google PageSpeed 和 YSlow,帮助开发者创建快速、高效和全面优化的网页浏览体验。

图片 18

perf.js

在开发过程中,将性能的时序情况显示在页面上。

本文由澳门新葡亰手机版发布于web前端,转载请注明出处:跨域访问和防盗链基本原理,别人家的面试题

上一篇:Web品质优化类别,谈谈前后端的分工同盟 下一篇:偶尔候比,网页无图再不是期待
猜你喜欢
热门排行
精彩图文