Khoa Nguyen khoand0000

usage

return collection. *http code: 200

[
  {id:1},
  {id:2}
]

return single object. http code: 200

What forces layout / reflow

All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.

Generally, all APIs that synchronously provide layout metrics will trigger forced reflow / layout. Read on for additional cases and details.

Element APIs

Getting box metrics

elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent

Below is the list of modern JS frameworks and almost frameworks – React, Vue, Angular, Ember and others.

All files were downloaded from https://cdnjs.com and named accordingly. Output from ls command is stripped out (irrelevant stuff)

As-is (minified)

$ ls -lhS
566K Jan 4 22:03 angular2.min.js

	{
	"AL": "Alabama",
	"AK": "Alaska",
	"AS": "American Samoa",
	"AZ": "Arizona",
	"AR": "Arkansas",
	"CA": "California",
	"CO": "Colorado",
	"CT": "Connecticut",
	"DE": "Delaware",

	/*
	<a href="posts/2" data-method="delete"> <---- We want to send an HTTP DELETE request

	- Or, request confirmation in the process -

	<a href="posts/2" data-method="delete" data-confirm="Are you sure?">
	*/

	(function() {

	(function() {
	var CSSCriticalPath = function(w, d, opts) {
	var opt = opts \|\| {};
	var css = {};
	var pushCSS = function(r) {
	if(!!css[r.selectorText] === false) css[r.selectorText] = {};
	var styles = r.style.cssText.split(/;(?![A-Za-z0-9])/);
	for(var i = 0; i < styles.length; i++) {
	if(!!styles[i] === false) continue;
	var pair = styles[i].split(": ");

	//uses angular-bootstrap-datetimepicker: https://github.com/dalelotts/angular-bootstrap-datetimepicker

	angular.module('mymodule')
	.directive('myDateTimePicker', function ($ionicPopup) {
	return {
	restrict: 'E',
	template: '<input class="my-date-time-picker" type="text" readonly="readonly" ng-model="formatted_datetime" ng-click="popup()" placeholder="{{placeholder}}">',
	scope: {
	'title': '@',
	'dateModel': '=ngModel',

	<?php
	<<<CONFIG
	packages:
	- "symfony/dom-crawler: ~2.3"
	- "symfony/css-selector: ~2.3"
	CONFIG;

	use Symfony\Component\DomCrawler\Crawler;

	$html = <<<HTML

	//Use this directive to open external links using inAppBrowser cordova plugin
	.directive('dynamicAnchorFix', function($ionicGesture, $timeout, $cordovaInAppBrowser) {
	return {
	scope: {},
	link: function(scope, element, attrs) {
	$timeout(function(){
	var anchors = element.find('a');
	if(anchors.length > 0)
	{
	angular.forEach(anchors, function(a) {