Index

Search in book...
Toggle Font Controls
Create new playlist

Name your new playlist

Playlist description (optional)
Sign In

Email address

Password

Forgot Password?

or

Continue with Facebook

Continue with Google
Sign Up

Full Name

Email address

Confirm Email Address

Password

or

Continue with Facebook

Continue with Google

Previous Chapter

Appendix B. Native equivalents of common jQuery functionality

List of Figures

Index

[SYMBOL][A][B][C][D][E][F][G][H][I][J][L][M][N][O][P][Q][R][S][T][U][V][W][X][Z]

SYMBOL

$ method 304 Not Modified status

A

above-the-fold styles identifying and separating, 2^nd identifying critical components identifying fold separating critical CSS, 2nd loading Accept-Encoding header, 2^nd, 3^rd Access-Control-Allow-Origin activate event, 2^nd, 3^rd ad hoc commands addClass method, 2^nd, 3^rd addEventListener method, 2^nd, 3^rd $.ajax method, 2^nd, 3^rd, 4^th AJAX requests, making with Fetch API $.ajax Standalone Implementation Alameda, 2^nd AMD (Asynchronous Module Definition) Android devices, debugging websites remotely on animate function, 2^nd animation requestAnimationFrame implementing overview performance comparison timer function-driven animations and Velocity.js antipatterns, performance asset inlining bundling CSS and JavaScript identifying for HTTP/2 image sprites Application tab, Chrome’s Developer Tools Archibald, Jake art direction ASP.NET CDN assessment tools benchmarking JavaScript in Chrome browser-based assessment tools inspecting network requests viewing HTTP request and response headers custom network throttling profiles, creating debugging websites remotely on Android devices on iOS devices Google PageSpeed Insights appraising website performance Google Analytics, using for bulk reporting rendering performance-auditing tools browsers, how render web pages Google Chrome’s Timeline tool jank marking points in timeline with JavaScript rendering profilers in other browsers simulating devices in desktop web browser assets caching Cache-Control header controlling asset revalidation with no-cache, no-store, and stale-while-revalidate invalidating cached assets strategy for CDNs overview referencing verifying with Subresource Integrity compressing Brotli compression configuring compression levels of right file types granularity inlining minifying CSS HTML JavaScript resource hints preconnect resource hint prefetch resource hint preload resource hint prerender resource hint sending preemptively with Server Push serving. See also caching. async attribute, 2^nd, 3^rd, 4^th, 5^th, 6^th Asynchronous Module Definition. See AMD. asynchronous script-loading attr method, 2^nd attributes in jQuery reading and modifying auditing client’s website autoprefixer plugin, 2^nd autorem plugin, 2^nd

B

background-image property, 2^nd, 3^rd, 4^th background-position property Behavior Flow link, Google Analytics Behavior section, Google Analytics, 2^nd below-the-fold styles, loading asynchronously with preload resource hint polyfilling preload resource hint bench() function benchmarking constructing and running examining benchmark results, 2^nd JavaScript in Chrome Bézier curves bind method, 2^nd, 3^rd binding events, in jQuery overview removing event bindings simple event binding targeting elements that don’t exist yet triggering events programmatically blocking head-of-line <body> element, 2^nd Bootstrap border property border-bottom property border-left property border-radius property border-right property border-top property boundFunctionReference .box element box model, comparing flexbox styles and breakpoints, 2^nd Brotli compression checking for support comparing to GZIP writing Brotli-enabled web server in Node browser caches browsers capability HTTP/2-incapable buffer property build task, 2^nd, 3^rd buildCSS task, 2^nd bulk reporting, using Google Analytics for bundling CSS and JavaScript

C

Cache Storage section, Application tab Cache-Control header CDNs and max-age directive overview Cache-Control max-age value cachedAssets array, 2^nd caches.match method caches.open method CacheStorage API, 2^nd cacheVersion variable, 2^nd cacheWhitelist variable caching Cache-Control header CDNs and max-age directive controlling asset revalidation with no-cache, no-store, and stale-while-revalidate invalidating cached assets CSS and JavaScript assets images and other media files network requests strategy for categorizing assets implementing. See assets. Can I Use website Capture Screenshots button, Network tab Cascading Style Sheets. See CSS. CDN-hosted assets cdnjs CDNs (Content Delivery Networks) assets overview referencing verifying with Subresource Integrity Cache-Control header and troubleshooting certutil command checksums, generating claim event classes adding HTTP/1 in jQuery, manipulating using classList to manipulate on elements classList API overview, 2^nd using to manipulate classes on elements className property, 2^nd clean builds click event, 2^nd .click-me element client’s website auditing downloading optimizing minifying assets optimizing images using server compression running closeModal function CMS (content management system) collapseWhitespace .collection elements compression, 2^nd Brotli compression checking for support comparing to GZIP writing Brotli-enabled web server in Node font formats levels of, configuring of headers, solving via HTTP/2 of right file types web servers compression module, 2^nd, 3^rd concatenating scripts concatJS task, 2^nd Content Delivery Networks. See CDNs. content management system. See CMS. content property Content-Encoding header, 2^nd, 3^rd content-specific images contents of elements, in jQuery converting fonts, @font-face cascades Coyle Appliance Repair website, 2^nd, 3^rd, 4^th, 5^th critical components critical CSS above-the-fold styles, identifying and separating identifying critical components identifying fold separating critical CSS above-the-fold styles, loading below-the-fold styles, loading, 2^nd asynchronously with preload resource hint polyfilling preload resource hint maintainability multipage websites and overview recipe website downloading and running reviewing project structure render blocking weighing benefits critical_medium.less file critical_small.less file crossorigin attribute crt folder CSS (Cascading Style Sheets) above-the-fold styles, identifying and separating identifying critical components identifying fold loading separating critical CSS below-the-fold styles, loading, 2^nd asynchronously with preload resource hint polyfilling preload resource hint bundling with JavaScript culling shallow selectors customizing framework downloads DRY principle finding redundancies with csscss images in media queries using SVG background images in invalidating assets of LESS precompiler maintainability minifying mobile-first approach to responsive web design Google’s mobile-friendly guidelines verifying site’s mobile-friendliness vs. desktop-first multipage websites and overview performance-tuning CSS @import serializes requests avoiding @import declaration comparing box model and flexbox styles constructing and running benchmark examining benchmark results, 2nd flexbox, using where possible increasing rendering speed <link> parallelizes requests placing CSS in preventing Flash of Unstyled Content phenomenon transitions using faster selectors plugins related to recipe website downloading and running reviewing project structure render blocking segmenting CSS using shallow CSS selectors weighing benefits writing shorthand CSS. See also critical CSS; optimizing CSS. CSS font-display property css method csscss command-line tool finding redundancies with overview cssnano plugin, 2^nd CSSOM (CSS Object Model) cssrelpreload.min.js file culling shallow selectors custom network throttling profiles customizing framework downloads

D

data-href attribute data-lang attribute data-src attribute, 2^nd data-srcset attribute, 2^nd data-status attribute debugging websites, remotely on Android devices on iOS devices DeflateCompressionLevel del module del plugin desktop-first approach to responsive web design detection code, service workers Develop option, Safari Developer Tools Disable Cache check box, Chrome, 2^nd Discover USB Devices check box, Chrome dispatchEvent method div.item element div.marqueClass selector div.modal element div.pageWrapper element DNS lookups dns-prefetch resource hint document.fonts object document.onreadystatechange document.querySelector method, 2^nd document.querySelectorAll DOM (Document Object Model), 2^nd, 3^rd DOMContentLoaded event downloading client’s website image sprite generator recipe website DPI (dots per inch) DRY (don’t repeat yourself) principle, 2^nd

E

e.target attribute each method easy_install pip command edge servers elements, in jQuery contents of hiding removing replacing selecting else condition em units encoding images, with WebP browsers that don’t support WebP lossless images, with imagemin lossy images, with imagemin EOT (Embedded OpenType), 2^nd ETag Event Log tab, Timeline profiler event.target.id property express

F

Fetch API making AJAX requests with overview polyfilling using fetch event, 2^nd, 3^rd, 4^th, 5^th fetch.min.js file Filament Group, 2^nd file glob file size, jQuery alternatives and file_get_contents function file_md5 function filemtime function filter option Firefox, 2^nd flame chart Flash of Unstyled Content phenomenon flexbox comparing box model and flexbox styles using Flickr FOIT (Flash of Invisible Text) Font Face Observer, 2^nd external scripts font-loading behavior font-display property @font-face cascades font-family property, 2^nd font-loading API for repeat visitors with JavaScript disabled font-size value fonts @font-face cascades building converting fonts compressing EOT font formats compressing TTF font formats converting formats of loading CSS font-display property Font Face Observer font-loading API problems with selecting subsets subsetting manually with unicode-range property variants of fonts-loaded class, 2^nd fontTools, 2^nd for construct formats, for images Foundation FOUT (Flash of Unstyled Text) FPS (frames per second) frame framework downloads, customizing

G

gem installer, Ruby generating GET verb getAttribute method, 2^nd getComputedStyle method getElementById getElementsByClassName getElementsByTagName git command, 2^nd, 3^rd Git, installing global components global imagery global_large.less file global_medium.less file global_small.less file, 2^nd Google benchmarking JavaScript in mobile-friendly guidelines Timeline tool using for bulk reporting Google CDN Google Fonts, 2^nd Google PageSpeed Insights appraising website performance Google Analytics, using for bulk reporting Grumpicon falling back to raster image sprites with overview gulp tool installing plugins, 2^nd CSS-related plugins essential plugins HTML minification plugin image-processing plugins JavaScript-related plugins reasons for using build system streams and structuring project’s folders tasks anatomy of overview writing core tasks writing utility tasks gulp-changed plugin, 2^nd gulp-cli gulp-concat plugin, 2^nd gulp-ext-replace plugin, 2^nd gulp-htmlmin plugin, 2^nd gulp-imagemin plugin, 2^nd, 3^rd gulp-inline plugin gulp-less plugin, 2^nd gulp-livereload plugin, 2^nd, 3^rd gulp-nunjucks plugin gulp-postcss plugin, 2^nd gulp-sass plugin, 2^nd gulp-spritesmith plugin gulp-uglify plugin, 2^nd gulp-uncss plugin gulp-util plugin, 2^nd gulp.dest method, 2^nd gulp.src method gulp.task method, 2^nd gulpfile GZIP compression, comparing to Brotli

H

hasClass method hash algorithms <head> tag, placing CSS in head-of-line blocking problems with solving via HTTP/2 <header> element headers compression of uncompressed hero image hiding elements, in jQuery high DPI displays htdocs folder HTML images in <picture> element Picturefill script sizes attribute srcset attribute SVG in universal max-width rule for images minifying, 2^nd html method HTML minification plugin html-minify htmlmin plugin, 2^nd htmlmin() function HTTP (Hypertext Transfer Protocol) HTTP headers, viewing HTTP/1 optimizing for HTTP/2 and HTTP/2 servers with HTTP/2-incapable browsers segmenting users serving assets according to browser capability problems with head-of-line blocking nonsecure web sites solving via HTTP/2 uncompressed headers replacing granular scripts with concatenated scripts HTTP/2 optimization technique changes asset granularity caching effectiveness identifying performance antipatterns optimizing for both HTTP/1 and HTTP/2 servers with HTTP/2-incapable browsers segmenting users serving assets according to browser capability reasons for using Server Push invoking measuring performance overview sending assets preemptively with writing behavior of in Node servers solving HTTP/1 problems with head-of-line blocking header compression HTTPS writing server in Node HTTPS guaranteed with HTTP/2 service workers Hypertext Transfer Protocol. See HTTP.

I

icon images iconography IIS (Internet Information Services) image sprites downloading and installing install sprite generator falling back to raster image sprites generating using image-compression methods imagemin plugin, reducing raster images with optimizing JPEG images optimizing PNG Images imagemin script imagemin-gifsicle plugin, 2^nd imagemin-jpeg-recompress plugin, 2^nd, 3^rd imagemin-optipng plugin, 2^nd imagemin-pngquant plugin, 2^nd imagemin-svgo plugin, 2^nd imagemin-webp plugin, 2^nd, 3^rd images encoding images with WebP browsers that don’t support WebP lossless images, with imagemin lossy images, with imagemin formats for in CSS media queries using SVG background images in in HTML <picture> element Picturefill script sizes attribute srcset attribute SVG in universal max-width rule for images invalidating lazy loading of optimizing, 2^nd overview processing, 2^nd raster images lossless images lossy images reducing with imagemin reducing optimizing SVG images raster images with imagemin sprites of SVG images <img> element img folder, TinyPNG @import declaration avoiding serializied requests and inetmgr executable inlining, 2^nd, 3^rd innerHTML property, 2^nd, 3^rd innerText install event, 2^nd installation code, service workers installing fontTools Git gulp tool image sprite generator Node.js service workers integrity attribute intercepting, network requests Internet Information Services. See IIS. invalidating cached assets CSS and JavaScript assets images and other media files inViewport method invoking Server Push iOS devices, debugging websites remotely on item class iterating over set of elements

J

Jank Jank Invaders JavaScript accommodating users without benchmarking in Chrome bundling with CSS invalidating assets of marking points in timeline with minifying plugins related to requestAnimationFrame implementing overview performance comparison timer function-driven animations and script-loading async attribute asynchronous <script> element placement Velocity.js JPEG format JPEG images, optimizing jpeg-recompress plugin jQuery alternatives to file size in implementing overview performance in Shoestring Sprint Zepto getting by without checking for DOM to be ready reading and modifying element attributes and content selecting elements and binding events using classList to manipulate classes on elements native equivalents of common functionality accessing and modifying styles binding events checking DOM readiness getting and setting attributes getting and setting element contents hiding and showing elements iterating over set of elements manipulating classes on elements removing elements replacing elements selecting elements jquery.min.js file jsDelivr jsdom package json method

L

lang attribute latency lazy loading images accommodating users without JavaScript configuring markup writing lazy loader building initializer and destroyer core methods laying foundations running script scanning document for images lazyClass property lazyLoader variable legal agreements Legendary Tones website, 2^nd, 3^rd, 4^th length property LESS files, building LESS precompiler level option <li> elements licensing agreements Link header, 2^nd, 3^rd <link> tag, 2^nd, 3^rd, 4^th, 5^th, 6^th .list element list-style-image property livereload module LiveReload plugin, 2^nd load method load time loadCSS group, 2^nd, 3^rd loadcss.min.js file loadImage method loading above-the-fold styles below-the-fold styles asynchronously with preload resource hint polyfilling preload resource hint fonts CSS font-display property Font Face Observer font-loading API problems with of web pages Loading event, Timeline tool local() function log method lossless images, 2^nd lossy images, 2^nd

M

main.less file Marcotte, Ethan margin property margin-bottom property margin-left property margin-right property margin-top property marking points in timeline, with JavaScript #masthead selector max-age directive max-width rule max-width value media files, invalidating media queries, 2^nd, 3^rd, 4^th <meta> tag Microsoft Edge mime module, 2^nd min-width value minification, 2^nd, 3^rd minifiers minifyHTML function, 2^nd minifying assets CSS HTML JavaScript HTML mixins mobile-first approach to responsive web design Google’s mobile-friendly guidelines verifying site’s mobile-friendliness vs. desktop-first Mobile-Friendly Test, 2^nd mod_brotli module mod_deflate module, 2^nd .modal.open class Modernizr, 2^nd mouseover element Mozilla mydevice.io

N

network connection, simulating Network panel, Chrome’s Developer Tools network requests caching inspecting intercepting network throttling profiles Network Throttling Profiles settings screen, Chrome no-cache directive --no-match-shorthand argument no-store directive node http.js Node.js installing writing Brotli-enabled web server in writing HTTP/2 server in writing Server Push behavior in Node.js-based tools font conversion tools gulp and gulp plugins image processors and optimizers minifiers and reducers PostCSS and PostCSS plugins web servers and related middleware nonrepeatable backgrounds nonsecure web sites <noscript> tag, 2^nd, 3^rd npm (Node Package Manager) npm modules :nth-child selector

O

Offline check box, Chrome’s Network panel #okayButton element on method openModal function, 2^nd OpenSans-Bold-Cyrillic.ttf OpenSans-Bold.ttf, 2^nd, 3^rd, 4^th OpenSans-Light-Cyrillic.ttf OpenSans-Light.ttf, 2^nd, 3^rd, 4^th OpenSans-Regular.ttf optimg folder optimizationLevel option optimizing client’s website minifying assets optimizing images using server compression optimizing CSS culling shallow selectors customizing framework downloads DRY principle finding redundancies with csscss LESS precompiler mobile-first approach to responsive web design Google’s mobile-friendly guidelines verifying site’s mobile-friendliness vs. desktop-first performance-tuning CSS @import serializes requests avoiding @import declaration comparing box model and flexbox styles constructing and running benchmark examining benchmark results, 2nd flexbox, using where possible increasing rendering speed <link> parallelizes requests placing CSS in preventing Flash of Unstyled Content phenomenon transitions using faster selectors SASS precompiler segmenting CSS using shallow CSS selectors writing shorthand CSS OTF (OpenType format) outerText property --output-file flag

P

padding property PageSpeed Insights Painting event, Timeline tool parallel method parallelized requests performance antipatterns asset inlining bundling CSS and JavaScript identifying for HTTP/2 image sprites performance, jQuery alternatives and <picture> element, 2^nd art-directed images type attribute targeting high DPI displays Picturefill script, 2^nd conditionally loading with Modernizr using pipe method plugins, gulp tool CSS-related plugins essential plugins HTML minification plugin image-processing plugins JavaScript-related plugins PNG Images, optimizing polyfilling Fetch API PostCSS plugin, 2^nd, 3^rd postMessage API, 2^nd precompilers preconnect keyword preconnect resource hint prefetch resource hint preload resource hint, 2^nd, 3^rd prerender resource hint primed cache private directive processing property, 2^nd profiling tool, Microsoft Edge protocol version, detecting public directive px units, 2^nd pyftsubset, subsetting fonts with

Q

quality setting query strings, in browser caches querySelector method, 2^nd, 3^rd, 4^th querySelectorAll method, 2^nd

R

ranges, Unicode raster images falling back to lossless images lossy images rasterization recipe website downloading and running reviewing project structure Record button, Chrome reducers reducing images optimizing SVG images raster images with imagemin reducing requests redundancies, finding with csscss tool registering service workers service worker cache writing service worker’s install event regular expressions rel attribute reload, forcing rem units, 2^nd remote debugging remove method removeAttr method removeClass method, 2^nd, 3^rd, 4^th removeEventListener render blocking Rendering event, Timeline tool rendering performance-auditing tools browsers, how render web pages Google Chrome’s Timeline tool jank marking points in timeline with JavaScript rendering profilers in other browsers rendering speed, increasing replacing elements, in jQuery requestAnimationFrame implementing overview performance comparison timer function-driven animations and requestAnimationFrame() method, 2^nd, 3^rd, 4^th RequireJS, 2^nd resource hints preconnect resource hint prefetch resource hint preload resource hint prerender resource hint respondWith method, 2^nd, 3^rd response.writeHead call responsive web design responsive websites responsiveness Retina Display, Apple

S

Safari, 2^nd SASS precompiler --save flag Save for Web dialog box, Photoshop scanImages method scheduling modal <script> tag, 2^nd, 3^rd script-loading async attribute asynchronous <script> element placement Scripting event, Timeline tool scripts concatenating replacing granular with concatenated for HTTP/1 users uglifying scripts.min.js scroll event <section> elements security exception segmenting CSS users separating critical CSS, 2^nd serialized requests, @import declaration and series method server compression, 2^nd Server Push invoking measuring performance overview sending assets preemptively with writing behavior in Node servers, HTTP/2 with HTTP/2-incapable browsers writing in Node service workers installing intercepting and caching network requests measuring performance benefits overview registering service worker cache writing service worker’s install event tweaking network request interception behavior updating cleaning up old caches versioning files setAttribute method, 2^nd setInterval function, 2^nd setTimeout function, 2^nd, 3^rd, 4^th, 5^th shallow selectors culling using Shoestring library, 2^nd, 3^rd shorthand CSS, writing showing elements, in jQuery shrink-ray package, 2^nd simulating devices, in desktop web browser simulating network connection #siteHeader element Size column, Chrome’s network utility sizes attribute <source> tag space-between value spdy package, 2^nd Speed Suggestions link, Google Analytics Sprint library, 2^nd, 3^rd src attribute, 2^nd src directory, 2^nd, 3^rd src folder src property srcset attribute, 2^nd, 3^rd stale-while-revalidate directive, 2^nd streams, gulp tool and style object, 2^nd <style> tag, 2^nd styles in jQuery, accessing and modifying styles.css file styles.min.css, 2^nd Subresource Integrity, verifying CDNs assets with subsetting fonts fontTools, installing manually fontTools, installing with pyftsubset with unicode ranges unicode ranges, understanding with pyftsubset with unicode-range property generating Cyrillic font subsets in older browsers sudo command SVG (Scalable Vector Graphics) images overview using in CSS SVG fonts svg-sprite command, 2^nd svgo, 2^nd

T

target method task method, 2^nd tasks, gulp tool anatomy of overview writing core tasks building LESS files and using PostCSS general structure of task importing modules minifying HTML performing image optimization uglifying and concatenating scripts writing utility tasks build task clean task watch task text method textContent property throttle property throttling profiles, in Chrome TIFF format time method Time to First Byte. See TTFB. Time to First Paint timeEnd method Timeline profiler, Chrome timeline, marking points in timer function-driven animations timeStamp method, 2^nd TinyPNG, 2^nd toggle method toggleClass method, 2^nd, 3^rd tools Node.js-based font conversion tools gulp and gulp plugins image processors and optimizers minifiers and reducers PostCSS and PostCSS plugins web servers and related middleware web-based top property touchmove event transform property transition property, 2^nd, 3^rd transition-delay transition-duration transition-timing-function transitions translateY method translateZ property tt2eot tt2woff tt2woff2 TTF (TrueType fonts) compressing overview ttf2woff2 program TTFB (Time to First Byte) Twitter Bootstrap website type attribute Typekit

U

uglifying scripts uglifyJS task, 2^nd <ul> elements uncompressed headers uncss tool, 2^nd, 3^rd unicode ranges, subsetting fonts with, 2^nd generating Cyrillic font subsets in older browsers overview unicode-range property, 2^nd unoptimized files unprimed cache Unstyled Content updating service workers cleaning up old caches versioning files user experience, web performance and users, segmenting

V

-v argument vector images scale Velocity.js, 2^nd verification, of mobile-friendliness of websites verifying CDNs assets --version command versioning files viewport tags visitor flow chart, Google Analytics VisualFold!, 2^nd, 3^rd vw (viewport width) units

W

watch task web browsers browser-based assessment tools inspecting network requests viewing HTTP request and response headers how render web pages talking to web servers web pages, loading of web performance client’s website, auditing client’s website, optimizing minifying assets optimizing images using server compression downloading and running client’s website final weigh-in installing Node.js and Git simulating network connection user experience and web browsers, talking to web servers web pages, loading of web servers compressing web browsers talking to web sites, nonsecure web-based tools WebP format, encoding images with browsers that don’t support WebP lossless images, with imagemin lossy images, with imagemin Weekly Timber website, 2^nd, 3^rd, 4^th, 5^th, 6^th, 7^th width property will-change property, optimizing transitions with writing HTTP/2 server, in Node Server Push behavior, in Node shorthand CSS

X

XMLHttpRequest object

Z

Zepto Zepto library, 2^nd, 3^rd

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.