首页 ›存档› 技术 › 查看内容

PHP 7 CSS与JavaScript优化

2018-3-30 13:00 |来自: 互联网 302 0

摘要: 小编说：每个Web应用程序都会有CSS和JavaScript文件。现在大多数应用程序都包含很多CSS和JavaScript文件，用来增强应用的粘度与互动效果。每个CSS和JavaScript文件都需要浏览器向服务器发送请求，以获取文件内容。 ...

小编说：每个Web应用程序都会有CSS和JavaScript文件。现在大多数应用程序都包含很多CSS和JavaScript文件，用来增强应用的粘度与互动效果。每个CSS和JavaScript文件都需要浏览器向服务器发送请求，以获取文件内容。因此，CSS和JavaScript文件越多，浏览器需要发送的请求就越多，从而越容易影响其性能。

本文我们将讨论两种针对CSS、JavaScript文件的优化手段合并和缩小。本文选自《高性能PHP 7》，了解本书更多详情请点击阅读原文。

性能在Web应用程序中起着至关重要的作用，甚至谷歌也很在意其查询性能。不要因为一个几KB的文件只需要1毫秒的下载时间就不去重视，因为涉及性能时每个毫秒都需要去关注。最好能优化、压缩和缓存一切。

合并

在合并过程中，我们可以将所有CSS文件合并为一个文件，并且使用同样的方法对JavaScript文件进行合并，从而为CSS和JavaScript创建一个单独的文件。假如我们有10个CSS文件，浏览器要发送10个请求给所有这些文件。但是，如果我们将它们合并到一个文件中，浏览器只需发送一个请求即可，从而节省了9个请求所需的时间。

缩小

在缩小过程中，从CSS和JavaScript文件中删除所有空行、注释和额外空格。这样，文件尺寸大大减小，从而文件加载速度更快。

我们来看看下面这段CSS代码。

.header {
  width: 1000px;
  height: auto;
  padding: 10px
}
/* 让区域位于左侧 */
.float-left {
  float: left;
}
/* 让区域位于右侧 */
.float-right {
  float: right;
}

在缩小文件后，我们将得到如下所示的CSS代码。

.header{width:100px;height:auto;padding:10px}.float-left{float:left}.float-right{float:right}

同样地，缩小文件的方法也可以用于JavaScript中，代码如下。

/* 在页面上显示一个弹框 */
$(document).ready(function() {
  alert("Page is loaded");
});
/* 三个数相加 */
function addNumbers(a, b, c) {
  return a   b   c;
}

在缩小文件后，得到如下JavaScript代码。

$(document).ready(function(){alert("Page is loaded")});function addNumbers (a,b,c){return a b c;}

可以看到，在缩小后的代码中，所有不必要的空白空间和空白行都被去掉了。此外，该示例将完整的代码放在一行，所有代码注释也都被删除了。这种缩小尺寸的方法有助于快速装载，并且该文件将消耗更少的带宽，这在服务器资源有限的情况下是非常有用的。

大多数开源应用程序，如Magento、Drupal和WordPress，对缩小文件提供了内置支持，或通过第三方插件/模块支持这一功能。在这里我们不介绍如何在这些应用程序中合并CSS或JavaScript文件了，只讨论一些可以合并CSS和JavaScript文件的工具。

1Minify

Minify是一组完全使用PHP编写的库。Minify支持CSS、JavaScript文件的合并与缩小，代码是完全面向对象和命名空间的，所以它可以嵌入任何当前流行或自主研发的框架中。

现在创建一个小项目，我们将缩小和合并CSS与JavaScript文件。项目的文件夹结构如下图所示。

上图显示了完整的项目结构。项目名称为minify。css文件夹中包含所有CSS文件，包括最小化后的文件与合并后的文件。同样，js文件夹中包含所有JavaScript文件，也包括最小化后的文件与合并后的文件。libs文件夹中包含Minify库以及Converter库。Index.php中是缩小和合并CSS与JavaScript文件的主要代码。

项目树中的data文件夹都是JS最小化后的内容。由于JavaScript的关键字需要前后都有空格，因此这些.txt文件可以用于标识它们。

下面，我们用index.php中的代码缩小CSS和JavaScript文件。

include('libs/Converter.php');
include('libs/Minify.php');
include('libs/CSS.php');
include('libs/JS.php');
include('libs/Exception.php');

use MatthiasMullie\Minify;

/* 最小化CSS */
$cssSourcePath = 'css/styles.css';
$cssOutputPath = 'css/styles.min.css';
$cssMinifier = new Minify\CSS($cssSourcePath);
$cssMinifier-

声明：文章版权归原作者所有部分文章转自互联网如有侵权请联系 [邮箱地址] 删除

路过

雷人

握手

鲜花

鸡蛋

收藏分享邀请

上一篇：软件: 补充 JavaScript 的 WebAssembly 正逐渐走向主流下一篇：怎样让你的JavaScript代码更加语义化？

PHP 7 CSS与JavaScript优化

相关分类