当前位置:千赢国际官网 > 千赢网页手机版登入 > 一个整数是否是,值得收藏

一个整数是否是,值得收藏

文章作者:千赢网页手机版登入 上传时间:2019-09-16

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

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

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

别人家的面试题:一个整数是否是“4”的N次幂

2016/05/30 · 基础技术 · 2 评论 · 算法

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

这是 leetcode.com 的第二篇。与上一篇一样,我们讨论一道相对简单的问题,因为学习总讲究循序渐进。而且,就算是简单的问题,追求算法的极致的话,其中也是有大学问的。

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

2015/06/22 · HTML5 · 性能

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

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

二、跨域访问基本原理

在上一篇,介绍了盗链的基本原理和防盗链的解决方案。这里更深入分析一下跨域访问。先看看跨域访问的相关原理:跨网站指令码。维基上面给出了跨站访问的危害性。从这里可以整理出跨站访问的定义:JS脚本在浏览器端发起的请求其他域(名)下的网站数据的HTTP请求。

这里要与referer区分开,referer是浏览器的行为,所有浏览器发出的请求都不会存在安全风险。而由网页加载的脚本发起请求则会不可控,甚至可以截获用户数据传输到其他站点。referer方式拉取其他网站的数据也是跨域,但是这个是由浏览器请求整个资源,资源请求到后,客户端的脚本并不能操纵这份数据,只能用来呈现。但是很多时候,我们都需要发起请求到其他站点动态获取数据,并将获取到底数据进行进一步的处理,这也就是跨域访问的需求。

 

现在从技术上有几个方案去解决这个问题。

“4”的整数次幂

给定一个32位有符号整数(32 bit signed integer),写一个函数,检查这个整数是否是“4”的N次幂,这里的N是非负整数。

例如:

  • 给定 num = 16,返回 true,因为 16 = 42
  • 给定 num = 5,返回 flase

附加条件: 你能够不用循环和递归吗?

内容分发网络(CDN)

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

1、JSONP跨域访问

利用浏览器的Referer方式加载脚本到客户端的方式。以:

<script type="text/javascript" src=";

1
<script type="text/javascript" src="http://api.com/jsexample.js"></script>

这种方式获取并加载其他站点的JS脚本是被允许的,加载过来的脚本中如果有定义的函数或者接口,可以在本地使用,这也是我们用得最多的脚本加载方式。但是这个加载到本地脚本是不能被修改和处理的,只能是引用。

而跨域访问需要正是访问远端抓取到的数据。那么能否反过来,本地写好一个数据处理函数,让请求服务端帮助完成调用过程?JS脚本允许这样。

<script type="text/javascript"> var localHandler = function(data) { alert('我是本地函数,可以被跨域的remote.js文件调用,远程js带来的数据是:'

  • data.result); }; </script> <script type="text/javascript" src=";
1
2
3
4
5
6
7
<script type="text/javascript">
var localHandler = function(data)
{
    alert('我是本地函数,可以被跨域的remote.js文件调用,远程js带来的数据是:' data.result);
};
</script>
<script type="text/javascript" src="http://remoteserver.com/remote.js"></script>

远端的服务器上面定义的remote.js是这样的:

JavaScript

localHandler({"result":"我是远程js带来的数据"});

1
localHandler({"result":"我是远程js带来的数据"});

上面首先在本地定义了一个函数localHandler,然后远端返回的JS的内容是调用这个函数,返回到浏览器端执行。同时在JS内容中将客户端需要的数据返回,这样数据就被传输到了浏览器端,浏览器端只需要修改处理方法即可。这里有一些限制:1、客户端脚本和服务端需要一些配合;2、调用的数据必须是json格式的,否则客户端脚本无法处理;3、只能给被引用的服务端网址发送get请求。

<script type="text/javascript"> var localHandler = function(data) { alert('我是本地函数,可以被跨域的remote.js文件调用,远程js带来的数据是:'

  • data.result); }; </script> <script type="text/javascript" src=";
1
2
3
4
5
6
7
<script type="text/javascript">
var localHandler = function(data)
{
    alert('我是本地函数,可以被跨域的remote.js文件调用,远程js带来的数据是:' data.result);
};
</script>
<script type="text/javascript" src="http://remoteserver.com/remote.php?callBack=localHandler"></script>

服务端的PHP函数可能是这样的:

PHP

<?php $data = "......."; $callback = $_GET['callback']; echo $callback.'('.json_encode($data).')'; exit; ?>

1
2
3
4
5
6
7
8
<?php
 
$data = ".......";
$callback = $_GET['callback'];
echo $callback.'('.json_encode($data).')';
exit;
 
?>

这样即可根据客户端指定的回调拼装调用过程。

解题思路

如果忽略“附加条件”,这题还挺简单的对吧?简直是信手拈来:

版本1

JavaScript

function isPowerOfFour(num){ while(!(num % 4)){ num /= 4; } return num === 1; }

1
2
3
4
5
6
function isPowerOfFour(num){
    while(!(num % 4)){
        num /= 4;
    }
    return num === 1;
}

版本1 好像很简单、很强大的样子,它的时间复杂度是 log4N。有同学说,还可以做一些微小的改动:

版本1.1

JavaScript

function isPowerOfFour(num){ while(!(num % 4)){ num >>>= 2; } return num === 1; }

1
2
3
4
5
6
function isPowerOfFour(num){
    while(!(num % 4)){
      num >>>= 2;
    }
    return num === 1;
}

上面的代码用位移替代除法,在其他语言中更快,鉴于 JS 通常情况下非常坑的位运算操作,不一定速度能变快。

好了,最关键的是,不管是 版本1 还是 版本1.1 似乎都不满足我们前面提到的“附加条件”,即不使用循环和递归,或者说,我们需要寻找 O(1) 的解法。

按照惯例,大家先思考10秒钟,然后往下看 ——


CloudFlare

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

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

2、CORS(Cross-origin resource sharing)跨域访问

上述的JSONP由于有诸多限制,已经无法满足各种灵活的跨域访问请求。现在浏览器支持一种新的跨域访问机制,基于服务端控制访问权限的方式。简而言之,浏览器不再一味禁止跨域访问,而是需要检查目的站点返回的消息的头域,要检查该响应是否允许当前站点访问。通过HTTP头域的方式来通知浏览器:

JavaScript

Response headers[edit] Access-Control-Allow-Origin Access-Control-Allow-Credentials Access-Control-Expose-Headers Access-Control-Max-Age Access-Control-Allow-Methods Access-Control-Allow-Headers

1
2
3
4
5
6
7
Response headers[edit]
Access-Control-Allow-Origin
Access-Control-Allow-Credentials
Access-Control-Expose-Headers
Access-Control-Max-Age
Access-Control-Allow-Methods
Access-Control-Allow-Headers

服务端利用这几个HTTP头域通知浏览器该资源的访问权限信息。在访问资源前,浏览器会先发出OPTIONS请求,获取这些权限信息,并比对当前站点的脚本是否有权限,然后再将实际的脚本的数据请求发出。发现权限不允许,则不会发出请求。逻辑流程图为:

图片 1

浏览器也可以直接将GET请求发出,数据和权限同时到达浏览器端,但是数据是否交给脚本处理需要浏览器检查权限对比后作出决定。

一次具体的跨域访问的流程为:

图片 2

因此权限控制交给了服务端,服务端一般也会提供对资源的CORS的配置。

跨域访问还有其他几种方式:本站服务端代理、跨子域时使用修改域标识等方法,但是应用场景的限制更多。目前绝大多数的跨域访问都由JSONP和CORS这两类方式组成。

1 赞 1 收藏 评论

图片 3

不用循环和递归

其实这道题真心有好多种思路,计算指数之类的对数学系学霸们完全不是问题嘛:

版本2

JavaScript

const log4 = Math.log(4); function isPowerOfFour(num){ var n = Math.log(num) / log4; return n === (0|n); }

1
2
3
4
5
const log4 = Math.log(4);
function isPowerOfFour(num){
    var n = Math.log(num) / log4;
    return n === (0|n);
}

嗯,通过对数公式 logm(n) = log(n) / log(m) 求出指数,然后判断指数是不是一个整数,这样就可以不用循环和递归解决问题。而且,还要注意细节,可以将 log4 当做常量抽取出来,这样不用每次都重复计算,果然是学霸范儿。

不过呢,利用 Math.log 方法也算是某种意义上的犯规吧,有没有不用数学函数,用原生方法来解决呢?

当然有了!而且还不止一种,大家可以继续想30秒,要至少想出一种哦 ——


MaxCDN

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

图片 4

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

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

不用内置函数

这个问题的关键思路和上一道题类似,先考虑“4”的幂的二进制表示:

  • 40 = 1B
  • 41 = 100B
  • 42 = 10000B
  • 43 = 1000000B
  • ……

也就是每个数比上一个数的二进制后面多两个零嘛。最重要的是,“4”的幂的二进制数只有 1 个“1”。如果仔细阅读过上一篇,你就会知道,判断一个二进制数只有 1 个“1”,只需要:

JavaScript

(num & num - 1) === 0

1
(num & num - 1) === 0

但是,二进制数只有 1 个“1”只是“4”的幂的必要非充分条件,因为“2”的奇数次幂也只有 1 个“1”。所以,我们还需要附加的判断:

JavaScript

(num & num - 1) === 0 && (num & 0xAAAAAAAA) === 0

1
(num & num - 1) === 0 && (num & 0xAAAAAAAA) === 0

为什么是 num & 0xAAAAAAAA === 0? 因为这个确保 num 的二进制的那个 “1” 出现在“奇数位”上,也就确保了这个数确实是“4”的幂,而不仅仅只是“2”的幂。

最后,我们得到完整的版本:

版本3

JavaScript

function isPowerOfFour(num) { return num > 0 && (num & (num-1)) === 0 && (num & 0xAAAAAAAA) === 0; };

1
2
3
4
function isPowerOfFour(num) {
    return num > 0 && (num & (num-1)) === 0
                   && (num & 0xAAAAAAAA) === 0;
};

上面的代码需要加上 num > 0,是因为 0 要排除在外,否则 (0 & -1) === 0 也是 true


CloudFront

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

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

其他版本

上面的版本已经符合了我们的需求,时间复杂度是 O(1),不用循环和递归。

此外,我们还可以有其他的版本,它们严格来说有的还是“犯规”,但是我们还是可以学习一下这些思路:

版本4:用 Math.sqrt

JavaScript

function isPowerOfFour(num) { num = Math.sqrt(num); return num > 0 && num === (0|num) && (num & (num-1)) === 0; };

1
2
3
4
function isPowerOfFour(num) {
    num = Math.sqrt(num);
    return num > 0 && num === (0|num) && (num & (num-1)) === 0;
};

版本5:用正则表达式

JavaScript

function isPowerOfFour(num) { return /^1(00)*$/g.test(num.toString(2)); };

1
2
3
function isPowerOfFour(num) {
    return /^1(00)*$/g.test(num.toString(2));
};

以上就是所有的内容,这道题有非常多种思路,相当有趣,也比较考验基本功。如果你有自己的思路,可以留言参与讨论。

下一期我们讨论另外一道题,这道题比这两道题要难一些,但也更有趣:给定一个正整数 n,将它拆成至少两个正整数之和,对拆出的正整数求乘积,返回能够得到的乘积最大的结果

想一想你的解法是什么?你能够尽可能减少算法的时间复杂度吗?期待你的答案~~

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

打赏作者

CDNperf

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

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

图片 5

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

任选一种支付方式

图片 6 图片 7

1 赞 7 收藏 2 评论

性能测试

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

关于作者:十年踪迹

图片 8

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

图片 9

WebPagetest

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

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

图片 10

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

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

Yslow

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

Google PageSpeed

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

图片 11

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

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

图片 12

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

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

图片 13

Pingdom 网站速度测试

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

图片 14

SpeedCurve

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

图片 15

Calibre

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

图片 16

GT Metrix

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

图片 17

perf.js

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

本文由千赢国际官网发布于千赢网页手机版登入,转载请注明出处:一个整数是否是,值得收藏

关键词: 千赢国际官网