{"id":222,"date":"2009-02-12T09:28:42","date_gmt":"2009-02-12T17:28:42","guid":{"rendered":"http:\/\/blog.mozilla.org\/webdev\/?p=222"},"modified":"2017-03-08T14:50:09","modified_gmt":"2017-03-08T22:50:09","slug":"native-json-in-firefox-31","status":"publish","type":"post","link":"https:\/\/blog.mozilla.org\/webdev\/2009\/02\/12\/native-json-in-firefox-31\/","title":{"rendered":"Native JSON in Firefox 3.1"},"content":{"rendered":"

In case you haven’t heard, one of Firefox 3.1’s awesome new features will be native JSON<\/a> support. This is totally sweet for two reasons:<\/p>\n

    \n
  1. eval’ing JSON in the browser is unsafe<\/a>. Using native JSON parsing protects you against possible code execution.<\/li>\n
  2. Safely eval’ing JSON with a 3rd party library can be orders of magnitude slower<\/a>. Native JSON parsing is much faster.<\/li>\n<\/ol>\n

    How does native JSON work compared to plain old eval? Simple:<\/p>\n

    var jsonString = '{\"name\":\"Ryan\", \"address\":\"Mountain View, CA\"}';\r\nvar person = JSON.parse(jsonString);\r\n\/\/ 'person' is now a JavaScript object with 2 properties; name and address<\/pre>\n
    Pretty easy huh? And here’s how to get a JSON string from an object:<\/p>\n
    var personString = JSON.stringify(person);\r\n\/\/ 'personString' now holds the string '{\"name\":\"Ryan\", \"address\":\"Mountain View, CA\"}'<\/pre>\n
    “But wait!”, you say. “How is it safer? How much faster is it compared to eval?”. Ok, I’ll show you.<\/p>\n
    Native JSON parsing in Firefox 3.1 is safer because it does not support objects with functions. Attempting to convert an object with functions into a JSON string will only convert its properties and not its functions. And any malformed JSON string will result in a parse error instead of possible code execution.<\/p>\n
    Now, regarding speed, native JSON parsing is faster, much<\/strong> faster. Instead of pretty charts and graphs, I’ll give you a real-world example.<\/p>\n
    The new Graph Server<\/a> uses a JSON API to fetch test information and results, so I figured it would be a good application to benchmark. So I wrapped our code that parses the JSON response with some Firebug profiler calls:<\/p>\n
        console.time('parsejson');\r\n    var obj = eval('(' + resp + ')');\r\n    console.timeEnd('parsejson');<\/pre>\n
    Loading a test’s results (array with 3,000 indexes, 24k gzipped) gave me a time of 125ms. (Repeated tests yielded results +\/- 5ms). Then I changed eval to JSON.parse:<\/p>\n
        console.time('parsejson');\r\n    var obj = JSON.parse(resp);\r\n    console.timeEnd('parsejson');<\/pre>\n
    Which resulted in an average time of 40ms! That’s about 2.7 times faster with 1 line of code changed. Not bad!<\/p>\n
    Granted, a difference of 80ms isn’t that much, but in an AJAX (or, more accurately, AJAJ?) application, it can add up.<\/p>\n
    What’s the use of native JSON if it’s only available in Firefox? Luckily, IE8 has implemented it in RC1, which is rumored to be released in March. Hopefully other browsers will follow suit too, but for now it’s best to use a JSON parser such as the one on json.org<\/a>. It’s small, safe and will not override native JSON implementation if detected.<\/p>\n
    Points to remember:<\/p>\n