SEARCH KEYWORD -- DOM


  Convert HTML to DOM elements using JavaScript

In some cases, one would want to convert a HTML string to the DOM elements so that JavaScript can handle them easily. This is frequently used when one get some data from third party APIs where the data is in HTML format. In JavaScript, there are a couple of ways one can use to convert HTML to DOM elements. DOMParser document.createElement DOMParser DOMParser can parse XML or HTML source stored in a string into a DOM Document. After the conversion, the normal JavaScript call of h...

   JAVASCRIPT,DOMPARSER,DOCUMENT.CREATEELEMENT,HTML,DOM     2017-08-18 22:51:46

  The first 30 tweets on Twitter

Six years ago, we didn't know what a tweet was. But now, there are 340 million tweets posted every day. Looking back, do you know what are the earliest tweets on Twitter when it was released? Let's check them out. Before that, let's check Twitter's background first. Six years ago, Twitter was called twttr (similar to Flickr), the earliest version was similar to an SMS broadcast service, i.e sending short message to friends to tell them what I am doing. It was put online on 22nd October, 2006, J...

   Twitter,history,story     2012-10-11 20:03:22

  Understand Virtual DOM

With the popularity of React, the internals and implementation of Virtual DOM has becoming top discussed topic in tech communities and interviews. This post will give an introduction of Virtual DOM and how to implement a simple Virtual DOM logic. How to understand Virtual DOM In early days, front end developers would update a webpage view based on the data status change(usually after making AJAX call). But it brings performance penalties when there is frequent update as it would cause page reflo...

   JAVASCRIPT,DOM,VIRTUAL DOM     2019-12-07 23:43:04

  Google open sources Leak Finder for JavaScript

Google recently open sourced a tools for finding memory leaks in JavaScript programs. In JavaScript you cannot have "memory leaks" in the traditional sense, but you can have objects which are unintentionally kept alive and which in turn keep alive other objects, e.g., large parts of DOM. Leak Finder for JavaScript works against the Developer tools remote inspecting protocol of Chrome, retrieves heap snapshots, and detects objects which are "memory leaks" according to a given leak definition. The...

   Google,Open source,JavaScript     2012-08-15 13:45:34

  How ScrollerJS works

ScrollerJS is a light weight number scroller module to be embedded in web apps. It provides fancy number scrolling animations. ScrollerJS supports both CSS transition and DOM animation to handle the animation needed. If CSS transition is supported in a browser, CSS transition will be the preferred option for animation. If in old browsers where CSS transition is not supported. DOM animation will be chosen automatically. How does the number scrolling actually work? To transition a number from 0 to...

   ScrollerJS,JavaScript,CSS,GitHub     2015-06-11 06:54:44

  How to be jQuery-free?

jQuery is now the most famous JavaScript library. There are around 57.3% websites in the world using jQuery, i.e, 6 out of 10 websites are using jQuery. If we only consider those websites which use libraries, then the percentage is even higher which is 91.7%. Although jQuery is very popular, its size is still a headache to many websites maintainers. The uncompressed jQuery 2.0 has a size of 235KB, the size is 81KB after optimization.The jQuery 1.8.3 which supports IE 6/7/8 has a uncompressed si...

   jQuery,JavaScript,ECMAScript,CSS3     2013-05-13 11:53:20

  Canonicalize XML in Java

XML canonicalization is often used when there is need to create digital signature to be sent to peers for verification. Since digital signature is created based on XML data, the XML data has to be canonicalized before its signature value can be calculated. Even an extra space may affect the signature value calculated, hence it must follow some rules to canonicalize the XML data so that it has a standard format. This is why W3C created specification Canonical XML Version 1.1. This specificat...

   JAVA,XML,JAVA SECURITY     2016-01-20 01:39:45

  Load and execute JavaScript

When we load and execute JavaScript in a webpage, there are many points we need to care about because of its design and feature. There are two features about JavaScript execution in a browser: 1). The JavaScript codes will be executed immediately once loaded;2). When JavaScript codes are being executed, they will block the following contents (including page rendering and other resources downloading). So if there are multiple js files to be loaded, these codes will be executed sequentially. Since...

   JavaScript,async,defer,load,execute     2013-06-07 04:53:46

  Web Security: In-Depth Explanation of X-XSS-Protection

What is X-XSS-Protection X-XSS-Protection is an HTTP response header designed to enable or configure built-in cross-site scripting (XSS) filters in certain versions of Internet Explorer, Chrome, and Safari. The purpose of these filters is to detect reflected XSS attacks in the response and prevent the loading of pages, thereby protecting users from such attacks. The X-XSS-Protection response header was initially introduced by Microsoft in Internet Explorer 8 to control the browser's XSS filter. ...

   X-XSS-PROTECTION,WEB SECURITY,CONTENT SECURITY POLICY,XSS,CSP     2023-11-29 01:48:40

  Best practices of front end optimization

1. Use DocumentFragment or innerHTML to replace complex elements insertion DOM operation on browser is expensive. Although browser performance is improved much, multiple DOM elements insertion is still expensive and will affect the page load speed. Assume we have an ul element on our page, we now want to retrieve a JSON list using AJAX and then update the ul using JavaScript. Usually we may write it as : var list = document.querySelector('ul'); ajaxResult.items.forEach(function(item) { // ...

   JavaScript,Front end,Optimization,Tips     2013-07-06 11:26:27

RECENT