Browsers

Safari 4 Beta Out

Tagged:  

Apple has quietly released the first public beta of the Safari 4 browser. With fast Webkit rendering, very fast JavaScript in Squirrelfish Extreme, the tag "World's Fastest Browser" may be more than just marketing hyperbole. But I'll wait for Safari's cousin, Chrome 2.0, to come out before I make that judgement.

Safari 4 is also 100% Acid 3 compliant, an important milestone passed by the Webkit team a few months ago.

You can download it here.

Browser Battle Update

Tagged:  

According to Net Applications, use of Internet Explorer dropped to 67.55% of the market in January of 2009, down a precipitous 12% from nearly 80% of the market in February of 2007. Most of this share was lost to Firefox (about 7%, as FF jumped from 14% to 21% in the same time frame), and a surprisingly surging Safari (about 4%, since Safari went from 4% to 8% in the same time frame). Google's Chrome went from 0 to 1% in 5 short months, so it is certainly one to watch as well.

My (surprising?) prediction: Safari 4 is going to be one of the best browsers to use in 2009. With fast Webkit page rendering speed, knock-your-socks-off JavaScript speed (courtesy of SquirrelFish Extreme), and Acid 3 compliance, what more could you ask for? Firefox 3.1 will have blazing JavaScript speed, too, but with page rendering not quite as fast as Webkit. Nevertheless, Firefox 3.1 will still be the more mature and tested-against browser so you'll want to have it handy even if you opt for Safari (or Chrome) as your main browser.

Stay tuned. It's going to be an interesting year...

Opera Announces New JavaScript Engine

Tagged:  

With the recent blistering advances in browser-based JavaScript speed led by Google's V8, Webkit's Squirrelfish (Extreme), and Mozilla's TraceMonkey, browsers like IE and Opera are beginning to feel left behind. Not content to sit on the sidelines, the Opera team has announced their own next-generation JavaScript engine, Carakan.

Carakan will feature the following changes over its predecessor:

  • Register-based bytecode (vs. stack-based). This scheme uses fixed blocks (registers) of memory rather than a stack and gives direct access for the program to variables in any register rather than looking for them at the top of the stack.
    The end result is less copying and less processor instructions being executed.
  • Native code generation for performance-sensitive code. Based on a static type analysis with a richer type system than is supported directly in JavaScript, the new engine will compile performance sensitive sections of code (e.g., loops with integer arithmetic and regular expressions) straight into native code rather than process them through a bytecode interpreter.
  • Automatic classification of objects based upon common prototypes and properties. The dynamic assignment of classes to JavaScript objects based upon their prototypes and existing property names allows the use of shared lookup structures. Since real-world JavaScript programs tend to create many objects but much fewer "types", this scheme improves memory usage and performance.

The current incarnation of Carakan (sans native code generation) is about 2.5 times faster than the JavaScript in Opera 10 (alpha). After native code generation "lands" in the new engine, anticipated speed increases are somewhere between 5 and 50 times faster than the current engine.

DOM Prototypes in IE 8

Tagged:  

Travis Leithead, a Program Manager for Internet Explorer at Microsoft, writes in a recent blog entry about DOM prototypes in IE 8. In brief, IE 8 is the first version of the browser to expose the JavaScript constructors and prototypes for all DOM objects. This allows JavaScript developers--especially framework developers--to extend the functionality of DOM objects. It is not hard to envision extending IE 8, for example, to implement the (currently not implemented) getElementsByClassName method of HTML 5, which allows you to get all elements of a given CSS class. Travis gives an example of how to do so here:

function _MS_HTML5_getElementsByClassName(classList)
{
     var tokens = classList.split(" ");
     // Pre-fill the list with the results of the first token search
     var staticNodeList = this.querySelectorAll("." + tokens[0]);
     //Start the iterator at 1 since first match already colllected
     for (var i = 1; i < tokens.length; i++)
     {
        // Search for each token independently
        var tempList = this.querySelectorAll("." + tokens[i]);
        // Collects the "keepers" between loop iterations
        var resultList = new Array();
        for (var finalIter=0; finalIter < staticNodeList.length; 
          finalIter++)
        {
            var found = false;
            for (var tempIter=0; tempIter < tempList.length; tempIter++) 
            {
               if (staticNodeList[finalIter] == tempList[tempIter]) {
                  found = true;
                  break; // termination if found
               }
            }
         if (found) {
          // This element was in both lists, it should be perpetuated
          // into the next round of token checking...
          resultList.push(staticNodeList[finalIter]);
         }
       }
       // Copy the AND results for the next token
       staticNodeList = resultList;
     }
     return staticNodeList;
}
HTMLDocument.prototype.getElementsByClassName =
   _MS_HTML5_getElementsByClassName;
Element.prototype.getElementsByClassName =
   _MS_HTML5_getElementsByClassName;

Travis also details IE 8's support for JavaScript getters/setters (currently supported in Firefox, Safari, and Opera) in the article here. Getters and setters are a special feature for defining non-trivial object properties such as innerHTML while retaining the same familiar JavaScript syntax for referencing or assigning the property. The syntax for defining a property is specified by the defineProperty method of ECMAScript 3.1 (aka "JavaScript Harmony"):

Object.defineProperty(  [(DOM object) object],
                        [(string)     property name],
                        [(descriptor) property definition] );

All parameters are required.
Return value: the first parameter (object) passed to the function.

The syntax for retrieving a property definition is:

Object.getOwnPropertyDescriptor( [(DOM object) object],
                                 [(string)     property name] );

All parameters are required.
return value: A "property descriptor" object

Example usage of the special property syntax would be something like the following snippet of code:

// Let's define a property to define the co-ordinates of an
// img element in JSON
var coordDesc = new Object();
//define getter
coordDesc.getter = function() {
   var coords = new Object();
  coords.x = parseInt(this.currentStyle.left);
  coords.y = parseInt(this.currentStyle.top);
  coords.w = parseInt(this.currentStyle.width);
  coords.h = parseInt(this.currentStyle.height);
  return JSON.stringify(coords);
}
//define setter
coordDesc.setter = function(JSONString) {
  var coords = JSON.parse(JSONString);
  if (coords.x) this.style.left   = coords.x + "px";
  if (coords.y) this.style.top    = coords.y + "px";
  if (coords.w) this.style.width  = coords.w + "px";
  if (coords.h) this.style.height = coords.h + "px";
}
//define property
var img = Object.defineProperty(new Image(), "coordinates", coordDesc);
img.src = "images/my_image.png";
// Call the new property
img.coordinates = '{"w":200,"h":100}';
// Read the image's current position
alert(img.coordinates);   // => {"w":200,"h":100}

The Upshot

The combination of these two new features should make IE 8 far more amenable to extensibility than any previous version of Internet Explorer. This should help framework developers bridge the gap between browsers in a much less painful way, and make life easier for the average JavaScript developer.

The two MSDN articles describing DOM prototypes in IE 8 are here:
Document Object Model Prototypes, Part 1: Introduction
Document Object Model Prototypes, Part 2: Accessor (getter/setter) Support

Firebug 1.3 Released

Tagged:  

The Firebug 1.3 plug-in for Firefox 3.0.x has been released. The release features new tracing capability, used mostly for internal debugging but used to drive improvements in the Net panel as well. There are also numerous bug fixes. The full release notes are here.

The upcoming 1.4 release of Firebug will target Firefox 3.1.

Opera 10 Alpha Released

Tagged:  

Opera Software has released the first alpha of its Opera 10 browser, the first public release to pass the Acid 3 test. The release marks the debut of version 2.2 of Opera's Presto rendering engine.

New and notable:

  • Up to 30% faster page rendering than previous releases.
  • Support for the web fonts CSS 3 module.
  • RGBA and HSLA opacity, e.g. background-color: rgba(255,0,0,0.5) or background-color: hsla(240, 100%, 50%, 0.5).
  • Support for the Selectors API.
  • Improved support for SVG, including frames-per-second on animations and ability to use SVG web fonts.
  • Improvements to the Opera Dragonfly set of developer tools, including the addition of a network tab (a la Firebug) and live DOM editing (nice!).
  • Built-in browser inline spell checking and auto-updates.

The Opera 10 alpha release can be downloaded here. The current stable release is version 9.6, and is available from the main page.

FireUnit

John Resig has just publicly announced a new extension/framework for unit testing JavaScript code with Firefox/Firebug called FireUnit. The framework provides a simple API for reporting test results within a new tab in Firebug. It also provides some methods for simulating browser events. Developers can use a local HTTP test server for running unit tests that need to simulate a network communication.

FireUnit requires Firefox 3+ and Firebug 1.2+. You can grab the extension and source code here.

There are some examples of how to write a test case here, and there is a blog entry on FireUnit by the other co-author here.

Google Chrome Out of Beta

Tagged:  

Google Chrome has just turned the big 1.0, as the browser has met Google's requirements for stability and performance.

Changes from the Beta

A short list of improvements includes:

Of course, the Chrome team isn't done yet. Future enhancements to the browser include form autofill, RSS support, and extensions.

You can download Chrome here.

Firefox 3.1 Beta 2 Available

Tagged:  

The Mozilla team announced on Monday the availability of Firefox 3.1 Beta 2. New and notable:

  • A new Private Browsing mode (a la Google Chrome)
  • Increased language support (54, count 'em).
  • TraceMonkey, the incredibly fast new JavaScript engine, is now enabled by default.
  • Support for web worker threads.
  • Improvements to the Gecko layout engine, including speculative parsing for fast content rendering.
  • Support for <audio> and <video> from HTML 5.
  • Support for the W3C Geolocation API.
  • Numerous other improvement, including JavaScript query selectors, additional CSS 2.1 and 3 properties, SVG transforms, and offline applications.

All in all, Firefox 3.1 is shaping up to be another big home run for Mozilla. You can download the beta here.

Google's Native Client: Faster RIA?

Tagged:  

Hot on the heels of the JavaFX release, Google has released a beta version (of course, what else?) of its own browser plug-in for--get this--running native x86 code inside your browser. It's called, appropriately enough, Native Client. If your security alarm bells are going off, take some comfort: the code is sandboxed in order to prevent untrusted code from freely accessing your computer. How effective the "static analysis" that the sandbox performs is an open question, but Google for its part seems to have thought through the problem: code is disassembled and run through a rigorous analysis to detect unwanted interactions, e.g. file I/O. Nevertheless, it is unlikely to ever be as secure as running code inside a VM.

While Java aficionados may scoff at the idea of running non-portable code inside the browser, one has to admit that x86 clients are nearly universal, at least on the desktop. In the mobile arena that's anything but the case so Native Client has a very specific target audience: desktops that need absolute performance. If this fits the requirements of your browser-based application, Native Client may just be the ticket.

Syndicate content