分类目录归档:FrontEnd

为什么要关注前端性能优化

5169mD4idJL

首先通知一下,因为考虑到读者同学们所处的阶段各有不同,从今天开始,以后每篇推送文章的最后部分,会有一则简短的 PHP 编程小技巧。这样我在乱扯的时候,还是有部分内容不会偏离我们最基础的主题:PHP 编程。希望能照顾到更多同学。

下面进入正题。

这几年,前端在网站建设中的位置越来越重要。YahooGoogle 等公司也早公布了网站前端优化的攻略,同时也发布了强大的检测工具:YSlowPageSpeed 等。当你阅读了这些攻略,使用了这些工具,觉得很酷,但有没有问自己:为什么要如此关注前端性能?为什么要采用那些策略去优化?

有个后端工程师,一直忠实地实现性能设计、进行正规的后端优化。他也知道有很多书都关注如何在这些领域中进行优化,在寻求改进的时候,大量的时间也都花在这些地方。后来他发现,事实上,只有 10%~20% 的最终用户响应时间是花在从 Web 服务器获取 HTML 文档并传送到浏览器中的。如果希望能够有效地减少页面的响应时间,就必须关注剩下的 80%~90% 的最终用户体验。这 80%~90%的时间大部分花在等待组件(图片、样式表、脚本 等)的下载,还有一小部分时间花在解析 HTML、脚本和样式表上面。

如果我们将后端的响应时间缩短一半,整体响应时间只能减少 5%~10%;而如果关注前端性能,同样是将其响应时间减少一半,则整体响应时间可以减少 40%~45%。改进前端通常只需要较少的时间和资源;而减少后端延迟会带来很大的改动,比如重新设计架构啥的,这些改动需要花数周或数月。

那个后端工程师就是《高性能网站建设指南》的作者 。上面的文字,其实是书上开篇的几段话,给我们阐述:为什么要关注前端性能。能了解一项技术的出发点,才是好的沟通的开始。

———- 今天的 PHP 编程小技巧 ———-

数组合并,有两种方式。一个是用 array_merge(原数组, 新来的数组),一个是直接用 + 号。

array_merge() 的特征是:如果合并的两个数组中有相同的字符串键名,则新来的数组中的该键名的值将覆盖原数组的。但是,如果两个数组中包含数字键名,新来的数组中的值不会覆盖原数组中的值,而是键名重新编号,并附加到后面。

array_merge() 适用的场景:在字符串键名有冲突时,原数组中的值会被覆盖。或者两个纯数字键名数组的合并。

直接用 + 号的特征是:比如(原数组 + 新来的数组)这个表达式,如果两个数组有相同的键名(不管是字符串类型的还是数字类型的),原数组的值不变,效果相当于,新来的数组把没有冲突的关联关系附加到原数组上。

直接用 + 号的适用场景:不管键名有没有冲突,保留原数组不变,将新来的数组中没冲突的部分的关联关系附加到原数组上。

一般数组合并用其中一种可以搞定,不过容易混淆。

 

封面图片,就放书的封面吧。

什么是JSONP

jsonp

Asynchronous JavaScript and XML(Ajax)是目前 Web 开发关键技术之一,允许客户端 JavaScript 通过 HTTP 与服务器进行交互。

浏览器的安全模型规定了 XMLHttpRequest、frames 等必须在相同域名下才能进行通信。这就是所谓的“同源策略限制”。

为了 Web 应用的安全,同源策略并不是坏东西,但当我们真的需要请求其他域名下的数据时,这个策略确实造成了麻烦。

克服该限制的方法:

1、还是请求自己的服务器,让服务器做代理,把请求转发给真正的第三方服务器。这个方案的使用比较普遍,但一看上去就挺浪费的。

2、Flash。服务器上要部署一个 crossdomain.xml 文件,并将功能在 Flash 中开发,以达到跨域目的。但是要学习 AS 开发语言,成本较高。

3、通过 <script src=””> 标签,进行脚本插入。标签中的脚本源指向第三方服务器,因为同源策略并不阻止标签中引进第三方服务器的脚本。通过 JSON 可以改进该方案。缺点在于:难调试、被不信任的服务使用时会存在危险。
JSONP 属于第 3 种方案。

JSONP(JSON with Padding)是一个非官方的协议,他的实现方式简单,但需要一点服务端的配合。大致就是:让客户端决定要回调的 Javascript 函数名,在第三方服务端将 JSON 数据拼装到回调函数名中,返回的就是参数为 JSON 数据的函数调用脚本,浏览器加载脚本,并执行,达到获取第三方数据的目的。下面是最初级的实现代码。

客户端代码:

服务端 services.php 代码:

jQuery中的 $.getJSON   $.ajax  $.get  也有用到 JSONP,不知道大家注意到没。

我之前没特别注意这个技术,遇到了,就写下,算是入个门。有经验的同学可以给大家分享下。