Skip to content
This repository was archived by the owner on Sep 20, 2024. It is now read-only.

Commit 63e7ed2

Browse files
shinsentershinsenter
authored
Merge pull request #61 from shinsenter/develop
v2.2.0
2 parents bc19edb + 899f4ff commit 63e7ed2

18 files changed

+105
-111
lines changed

‎README.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
🚀 A PHP library that aims to help you concentrate on web performance optimization.
44

55
- **Package**: [@shinsenter/defer.php](https://www.npmjs.com/package/@shinsenter/defer.php)
6-
- **Version**: 2.0
6+
- **Version**: 2.2.0
77
- **Author**: Mai Nhut Tan <[email protected]>
88
- **Copyright**: 2021 AppSeeds <https://code.shin.company/>
99
- **License**: [MIT](https://raw.githubusercontent.com/shinsenter/defer.php/master/LICENSE)
@@ -125,7 +125,7 @@ $options = [
125125
'manually_add_deferjs' => false,
126126

127127
// URL to defer.js javascript file.
128-
// Default: https://cdn.jsdelivr.net/npm/@shinsenter/defer.js@2.3.0/dist/defer_plus.min.js
128+
// Default: https://cdn.jsdelivr.net/npm/@shinsenter/defer.js@2.4.0/dist/defer_plus.min.js
129129
'deferjs_src' => \AppSeeds\DeferConstant::SRC_DEFERJS_CDN,
130130

131131
// URL to javascript contains fixes.

‎assets/helpers.js

Lines changed: 36 additions & 74 deletions
Original file line numberDiff line numberDiff line change
@@ -37,28 +37,11 @@
3737
|--------------------------------------------------------------------------
3838
*/
3939

40-
// Backup jQuery.ready
41-
var _jqueryReady;
42-
4340
// Common texts
4441
var _dataLayer = 'dataLayer';
45-
var _deferClass = 'deferjs';
46-
var _deferPrefix = 'defer-';
47-
var _lazied = 'lazied';
48-
var _dataPrefix = 'data-';
49-
var _media = 'media';
50-
51-
// Common class names
52-
var _classLazied = _deferPrefix + _lazied;
53-
var _classLoaded = _deferPrefix + 'loaded';
54-
var _classLoading = _deferPrefix + 'loading';
55-
56-
// Common attributes
57-
var _attrClassName = 'className';
58-
var _attrDataIgnore = 'data-ignore';
5942

6043
// Common CSS selectors
61-
var _queryTarget = '.' + _classLoading + ':not([' + _attrDataIgnore + ']):not([lazied])';
44+
var _queryTarget = '.defer-loading:not([data-ignore]):not([lazied])';
6245

6346
/*
6447
|--------------------------------------------------------------------------
@@ -77,49 +60,10 @@
7760
*/
7861

7962
function _replaceClass(node, find, replace) {
80-
node[_attrClassName] = (' ' + node[_attrClassName] + ' ').
81-
replace(' ' + find + ' ', ' ' + replace + ' ').trim();
82-
}
83-
84-
function _lazyload() {
85-
defer.dom(_queryTarget, 0, _classLazied, function (node) {
86-
_replaceClass(node, _classLoading, _classLoaded);
87-
}, _options);
88-
89-
[].slice.call(document.querySelectorAll('style[defer]')).
90-
forEach(function(node) {
91-
node[_media] = node.getAttribute(_dataPrefix + _media) || 'all';
92-
});
63+
node.className = ((' ' + node.className + ' ').
64+
replace(' ' + find + ' ', ' ') + replace).trim();
9365
}
9466

95-
function _copyright(_copyText) {
96-
if (console.log) {
97-
console.log(_copyText || [
98-
'Optimized by defer.php',
99-
'(c) 2021 AppSeeds',
100-
'Github: https://code.shin.company/defer.php'
101-
].join('\n'));
102-
}
103-
}
104-
105-
function _boot() {
106-
defer(_lazyload, _delay);
107-
_replaceClass(document.documentElement, 'no-' + _deferClass, _deferClass);
108-
_copyright();
109-
}
110-
111-
/*
112-
|--------------------------------------------------------------------------
113-
| Define helper object
114-
|--------------------------------------------------------------------------
115-
*/
116-
117-
// Check if missing defer feature
118-
if (!defer) {return;}
119-
120-
// Fallback for older versions
121-
window.defer_helper = {'defermedia': _lazyload};
122-
12367
/*
12468
|--------------------------------------------------------------------------
12569
| Fallback for external libraries
@@ -131,29 +75,47 @@
13175
window.ga = window.ga || function () {(window.ga.q = window.ga.q || []).push(arguments)}; window.ga.l = Number(Date());
13276
window[_dataLayer] = window[_dataLayer] || [];
13377

134-
// Fake jQuery.ready, if jQuery loaded
135-
defer(function (jquery) {
136-
if (_jqueryReady) {
137-
return;
138-
}
78+
/*
79+
|--------------------------------------------------------------------------
80+
| Define helper object
81+
|--------------------------------------------------------------------------
82+
*/
13983

140-
jquery = window.jQuery;
84+
_replaceClass(
85+
document.documentElement,
86+
'no-deferjs',
87+
defer ? 'deferjs' : ''
88+
);
14189

142-
if (jquery && jquery.fn) {
143-
_jqueryReady = jquery.fn.ready;
144-
jquery.fn.ready = function (callback) {
145-
defer(function () {_jqueryReady(callback)}, _delay);
146-
}
147-
}
148-
});
90+
// Check if missing defer feature
91+
if (!defer) {
92+
return;
93+
}
14994

15095
/*
15196
|--------------------------------------------------------------------------
15297
| Main
15398
|--------------------------------------------------------------------------
15499
*/
155100

156-
157-
_boot();
101+
// Lazyload all style tags
102+
defer(function() {
103+
[].slice.call(document.querySelectorAll('style[defer]')).
104+
forEach(defer.reveal);
105+
}, _delay);
106+
107+
// Lazyload all media
108+
defer.dom(_queryTarget, _delay, 0, function (node) {
109+
_replaceClass(node, 'defer-loading', 'defer-loaded');
110+
}, _options);
111+
112+
// Copyright
113+
if (console.log) {
114+
console.log([
115+
'Optimized by defer.php',
116+
'(c) 2021 AppSeeds',
117+
'Github: https://code.shin.company/defer.php'
118+
].join('\n'));
119+
}
158120

159121
})(this, document, console);

‎assets/styles.css

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -20,9 +20,9 @@ embed {
2020
}
2121

2222
.defer-faded [lazied]{
23-
transition: opacity 0.3s;
23+
transition: opacity 0.2s;
2424
}
2525

26-
.defer-faded .defer-loading:not([data-ignore]) {
27-
opacity: 0.1!important;
26+
.defer-faded .defer-loading {
27+
opacity: 0.5!important;
2828
}

‎package-lock.json

Lines changed: 7 additions & 7 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
"author": "Mai Nhut Tan <[email protected]>",
44
"license": "MIT",
55
"dependencies": {
6-
"@shinsenter/defer.js": "^2.3.0"
6+
"@shinsenter/defer.js": "^2.4.0"
77
},
88
"scripts": {
99
"cleanup": "rm -rf ./node_modules package-lock.json",

‎public/helpers.min.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎public/lib/defer.min.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎public/lib/defer_plus.min.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎public/styles.min.css

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/Defer.php

Lines changed: 18 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -88,6 +88,7 @@ public function __construct(
8888
];
8989

9090
$this->options = new DeferOptions($options ?: []);
91+
$this->options->mergeFromRequest();
9192

9293
$this->fromHtml($html);
9394
}
@@ -176,8 +177,10 @@ public function toHtml()
176177
*/
177178
public function optimize()
178179
{
179-
$dom = $this->document;
180-
$html = $dom->root();
180+
$dom = $this->document;
181+
$html = $dom->root();
182+
$debug = $this->options->debug_mode || $this->options->debug_time;
183+
$isAmp = $dom->isAmpHtml();
181184

182185
// Skip if already _optimized
183186
if ($this->_optimized || empty($html)) {
@@ -188,7 +191,7 @@ public function optimize()
188191
$dom->optimize($this->options);
189192

190193
// Embed defer.js library
191-
if (!$dom->isAmpHtml()) {
194+
if (!$isAmp) {
192195
$node = null;
193196
$lib = $this->deferjs();
194197

@@ -207,23 +210,30 @@ public function optimize()
207210
// Optimize the script tag
208211
if (!empty($node)) {
209212
$node->optimize($this->options);
210-
$lib->cleanHelperTags($this->document);
213+
$lib->cleanHelperTags($dom);
214+
215+
// Debug
216+
if ($debug) {
217+
$node->precede($lib->getDebugJsNode($dom, 'time'));
218+
$node->follow($lib->getDebugJsNode($dom, 'timeLog', 'defer.js finished.'));
219+
$dom->body()->appendWith(($lib->getDebugJsNode($dom, 'timeEnd', 'body finished.')));
220+
}
211221

212222
// Append helper CSS
213-
$node->precede($lib->getHelperCssNode($this->document));
223+
$node->precede($lib->getHelperCssNode($dom));
214224

215225
// Append helper script
216226
$defer_time = $this->options->default_defer_time;
217227
$copy = $this->options->console_copyright;
218-
$node->follow($lib->getHelperJsNode($this->document, $defer_time, $copy));
228+
$node->follow($lib->getHelperJsNode($dom, $defer_time, $copy));
219229

220230
// Append polyfill
221-
$node->follow($lib->getPolyfillNode($this->document));
231+
$node->follow($lib->getPolyfillNode($dom));
222232

223233
// Custom type for deferred script tags
224234
if ($this->options->deferjs_type_attribute != '') {
225235
$dom->body()->appendWith($lib->getCustomDeferTypeNode(
226-
$this->document,
236+
$dom,
227237
$this->options->deferjs_type_attribute
228238
));
229239
}

‎src/Helpers/DeferConstant.php

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -152,7 +152,7 @@ class DeferConstant
152152
// -------------------------------------------------------------------------
153153

154154
// Source files
155-
const SRC_DEFERJS_CDN = 'https://cdn.jsdelivr.net/npm/@shinsenter/defer.js@2.3.0/dist/defer_plus.min.js';
155+
const SRC_DEFERJS_CDN = 'https://cdn.jsdelivr.net/npm/@shinsenter/defer.js@2.4.0/dist/defer_plus.min.js';
156156
const SRC_POLYFILL_CDN = 'https://polyfill.io/v3/polyfill.min.js?features=IntersectionObserver';
157157
const SRC_DEFERJS_FALLBACK = DEFER_PHP_ROOT . '/public/lib/defer_plus.min.js';
158158
const SCR_DEFERJS_CACHE = DEFER_PHP_ROOT . DIRECTORY_SEPARATOR . 'cache' . DIRECTORY_SEPARATOR;

‎src/Helpers/DeferJs.php

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -155,6 +155,27 @@ public function getDeferJsNode(DocumentNode $dom)
155155
]);
156156
}
157157

158+
/**
159+
* Return new <script> node with debug information
160+
* @param mixed $method
161+
* @param mixed $label
162+
* @param mixed $message
163+
* @return ElementNode
164+
*/
165+
public function getDebugJsNode(DocumentNode $dom, $method = 'time', $message = '')
166+
{
167+
$label = 'defer.js perf';
168+
169+
if ($message) {
170+
$message = strtr($message, ["'" => "\\'"]);
171+
$message = ";console.info('${label}: ${message}')";
172+
}
173+
174+
$script = "try{console.${method}('${label}')${message}}finally{}";
175+
176+
return $dom->newNode('script', $script);
177+
}
178+
158179
/**
159180
* Return polyfill script node
160181
*

‎src/Helpers/DeferOptimizer.php

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -238,8 +238,6 @@ public static function optimizeElement(ElementNode &$node, DeferOptions &$option
238238
$lazied = $resolver->lazyload();
239239

240240
if ($lazied) {
241-
$node->addClass(DeferConstant::CLASS_DEFER_LOADING);
242-
243241
if (!empty($fallback)) {
244242
$fallback->detach();
245243
$node->follow($fallback);

0 commit comments

Comments
 (0)