对于前端开发工程师来说，确保代码在各种主流浏览器的各个版本中都能正常工作是件很费时的事情，幸运的是，有很多优秀的工具可以帮助测试浏览器的兼容性，让我们一起看看这些很棒的工具。

Spoon Browser Sandbox

点击你需要测试的浏览器环境，安装插件就可以进行测试了。帮助你测试网页在Safari、Chrome、Firefox和Opera浏览器中是否正常，IE以前也有的，网站上说应微软的要求去掉了。
 
Superpreview

这是为微软自己发布的跨浏览器测试工具，您可以同时查看您的网页在多个浏览器的呈现情况，对页面排版进行直观的比较。



IETester

专门用于测试网页在IE浏览器各个版本中兼容性的工具，版本包含IE5.5至IE9的各个版本，很不错的一款工具，推荐。
 
BrowserShots

BrowserShots 是一款免费的跨浏览器测试工具，捕捉网站在不同浏览器中的截图。这是最有名，也是最古老的浏览器兼容性测试工具。
 
Multiple IEs

这款工具同样用于测试网页在IE浏览器各个版本的兼容性。
 
IE netrenderer

Netrenderer 也是用于检查你的网站在IE浏览器中的呈现情况，包括各个常用版本的检测。
 
Viewlike.Us!

Viewlike 是一款新推出的工具，帮助你检查浏览器在不同分辨率下得呈现情况。
 
BrowserSeal

这款工具的两个主要特色是独立的浏览器支持和带有自动化脚本的命令行界面。
 
Browsera

Browsera 是一个可测试您的网站的跨浏览器布局的工具，您会看到您网站上存在的兼容性错误。

WebDevLab

这款工具专门用于测试你的网站在苹果Safari浏览器中是什么样子的。
 
Litmus

这个工具可以帮助你检查你的网站在多个浏览器中的呈现情况，跟踪Bug并创建报告。
 
Browsercam

最后这款工具是要付费的，可以帮助你检查 Javascript 和 DHTML，提供不同的测试环境平台。

Can't find your answer? Please refer to documentation and demos, ask your question in forum, orcontact support.

As experience has shown, sometimes a sort of uncertainty may arise on the subject of Java Virtual Machine (JVM) memory structure and other related aspects such as sizes of various kinds of memory, live and dead objects, etc.

In this article, we shall try to illuminate these issues to clear up the point.

Heap and Non-Heap Memory

The JVM memory consists of the following segments:

• Heap Memory, which is the storage for Java objects
• Non-Heap Memory, which is used by Java to store loaded classes and other meta-data
• JVM code itself, JVM internal structures, loaded profiler agent code and data, etc.

The JVM has a heap that is the runtime data area from which memory for all class instances and arrays are allocated. It is created at the JVM start-up.

The heap size may be configured with the following VM options:

• -Xmx<size> - to set the maximum Java heap size
• -Xms<size> - to set the initial Java heap size

By default, the maximum heap size is 64 Mb.

Heap memory for objects is reclaimed by an automatic memory management system which is known as a garbage collector. The heap may be of a fixed size or may be expanded and shrunk, depending on the garbage collector's strategy.

Also, the JVM has memory other than the heap, referred to as non-heap memory. It is created at the JVM startup and stores per-class structures such as runtime constant pool, field and method data, and the code for methods and constructors, as well as interned Strings.

Unfortunately, the only information JVM provides on non-heap memory is its overall size. No detailed information on non-heap memory content is available.

The abnormal growth of non-heap memory size may indicate a potential problem, in this case you may check up the following:

• If there are class loading issues such as leaked loaders. In this case, the problem may be solved with the help of Class loaders view.
• If there are strings being massively interned. For detection of such problem, Allocation recording may be used.

If the application indeed needs that much of non-heap memory and the default maximum size of 64 Mb is not enough, you may enlarge the maximum size with the help of -XX:MaxPermSize VM option. For example, -XX:MaxPermSize=128m sets the size of 128 Mb.

Heap and non-heap memory usage telemetry is shown on the "Memory" tab:

Allocated and Used Memory

Allocated and used memory sizes are shown on the graphs for both heap and non-heap.

The allocated memory is an overall amount of memory allocated by the JVM, while used memory is the amount of memory which is actually in use.

Obviously, the allocated memory cannot be less than the used memory. The exact amount of allocated memory is determined by the JVM internal strategies.

Used Heap Memory: Live and Dead Objects

Used heap memory consists of live and dead objects.

Live objects are accessible by the application and will not be a subject of garbage collection.

Dead objects are those which will never be accessible by the application but have not been collected yet by the garbage collector. Such objects occupy the heap memory space until they are eventually collected by the garbage collector.

Note that Class list view in memory telemetry shows both live and dead objects. You may observe the decreasing number of objects when garbage collection occurs automatically or it is forced with the help of the corresponding toolbar button.

Object Sizes in Memory Snapshots

In memory snapshots, all views show only live objects. And all the sizes you deal with are of the live objects, too. The exception is Dead Objects view.

Objects size in "Memory" tab can be less than the used memory shown in "Telemetry". This may be due to:

• Used memory consists of both live and dead objects. While only live objects are shown in "Memory" tab.
• By default, all objects which are only weak- or soft-referenced are treated as dead objects. Please consider the corresponding Help topic.

Shallow and Retained Sizes

All individual objects, as well as sets of objects have their shallow and retained sizes.

Shallow size of an object is the amount of allocated memory to store the object itself, not taking into account the referenced objects. Shallow size of a regular (non-array) object depends on the number and types of its fields. Shallow size of an array depends on the array length and the type of its elements (objects, primitive types). Shallow size of a set of objects represents the sum of shallow sizes of all objects in the set.

Retained size of an object is its shallow size plus the shallow sizes of the objects that are accessible, directly or indirectly, only from this object. In other words, the retained size represents the amount of memory that will be freed by the garbage collector when this object is collected. In general, retained size is an integral measure, which helps to understand the structure (clustering) of memory and the dependencies between object subgraphs, as well as find potential roots of those subgraphs.

Dead objects are shown only with shallow size, as they do not actually retain any other objects.

HTML5 is the latest revision of HTML, with the goal to make it easier to develop web applications. HTML5 has much simple syntax compared to HTML 4 and it offers lots of new features. This articles gives introduction to HTML5.

What you can do with HTML5?

- Offline Applications with Application Cache

With the HTML5, it is possible to make your web applications run offline as well. HTML5 offers offline storage feature called application cache, or AppCache to store the files in a cache, so that when the user is offline, the browser still has access to the necessary files. These files can be HTML, CSS, Javascript or any other resources the web page needs to run.

- Drag and Drop

HTML5 offers a native drag and drop feature, which allows to design interactive applications. Through Drag and Drop feature you can drag any element and drop it to the desired location.

- Add Geolocation

The HTML5′s geolocation API lets you share your location with the trusted websites.
Priavcy is a major concern with the geolocation feature. W3.org states:

User agents must not send location information to Web sites without the express permission of the user.

So for example if a user visits a web page which has implemented geolocation, using Firefox web browser.  The browser will ask for permission if the user want to share his location. If the user consent, Firefox gathers information about nearby wireless access points and visitor's computer IP address, sends this information to Google Location Services whihc is default geolocation service in Firefox. That location estimate is then shared with the requesting website.

- Audio and Video

Currently HTML lacks the necessary features to embed the multimedia files. Therefore multimedia files are embedded in HTML using various plugins. For example, Flash is widely used to embed audio and video files. However this can be done very easily in HTML5 using audio and video elements, without using any pligins.

- Form Inputs

HTML5 provides several new elements for the input type attribute, such as pop-up calendars, color selectors, number spinners and many more. These input features help building very efficient forms with better input control and validation.

Simplified Syntax

Doctype:

The doctype declaration is the first thing to do in an HTML document. It tells the web browser about what version of the markup language the page is written in.
For example, HTML 4.01 Transitional doctype is specified as:

The XHTML 1.0 Transitional doctype is:

In HTML5, the doctype declaration is much simple, and is just:

Character Encoding:

To validate or display an HTML document, a program must choose a character encoding.
Character encoding tells the browser and validator what set of characters to use when converting the bits to characters.
Following is example of UTF-8 Character encoding declaration in HTML 4.01:

The XHTML

The character encoding syntax is very simple in HTML 5, and that is:

So our very basic HTML5 document can be:

The <script> tag:

The <script> tag is used to define a client-side script, such as a JavaScript. In HTML 4. the type attribute is required, but it is optional in HTML5.
For example, In HTML4, the script tag is used as following:

and in HTML5:

HTML5 has added a new optional attribute 'async' to the script tag. which tells the browser to execute the script asynchrously with the rest of the page, so the script will be executed while the page continues to load. This can be used as following:

or

The <link>tag:

The <link> tag defines the relationship between a document and an external resource. This tag is commonly used to include the CSS files. For example,

In HTML5, the type attribute is not required for the <link> tag, similar to <script>. For example:

New elements in HTML5

HTML5 has added some very interesting and useful tags for structuring the markup and simplifying the developement.  Some of the important tags are:

<header>
The header tag contains the header of the web page, which is typically on the top of a page containing logo and some other information such as slogan and menu etc. Instead of using <div id="header">, it can be used as <header>.

<nav>
The <nav> tag is used for the navigation menu. For example, Instead of using <div id="nav"> for the navigation, you can use <nav>.

<article>
The <article> tag represents independent, self-contained content. Examples of possible articles can be blog posts, news article, forum post, or user comment etc.

<section>
The <section> tag is used to separate the different parts of the page.
A section is a grouping of content, typically preceded by header, possibly with a footer after. sections can be nested inside of each other, if needed, and can hold any amount of typical markup.

<aside>
The <aside> tag specifies a section of the page having content that is tangentially related to the content around it. The <aside> tag can be used for sidebars or any other content that we can consider separate from the main content of the page.

<figure>
The <figure> tag is used for annotating illustrations, diagrams, photos, and code listings, etc. The<figcaption> is used inside the <figure> tag for the caption of the figure.

<footer>
The <footer> tag is used to represent the footer section and is typically located at the bottom of a page. The <footer> usually contains information such as the author, copyright information, links to terms of use, and privacy policy, etc. The contact information within a <footer> tag should be marked up using the <address> tag.

Modified elements

<a>
The <a> tag in HTML5 allows to wrap multiple emements in a single a element. For example,

In HTML 4.01, the <a> tag could be either a hyperlink or an anchor, but in HTML5, the <a> tag is always a hyperlink. If no any href attribute is specified, it is only a placeholder for a hyperlink.

<b>
The <b> tag is generally used to specify the bold text. However in HTML5, the intention with this tag is to markup text as bold without conveying any extra importance.

<hr>
In HTML5, the <hr> tag displays a horizontal rule, and defines a change in the content, while in HTML 4.01 it just displayes a horizontal rule.

<i>
The <i> tag is not exclusively for italic style of text in HTML5 (although it can be italic). It now represents the text that is in an alternate voice or mood or otherwise offset from the normal prose'.

6. Removed elements

In addition to the new and modified elements, there are some of the elements that are no longer supported in HTML5. Some of the removed elements are:

<frame>, <frameset> and <noframes>: The frame elements such as <frame>, <frameset> and<noframes> have been removed from HTML5.

<font> The <font> element was used to define font face, font size, and font color of text.
<s> and <strike>: The <s> and <strike> elements were used to define strikethrough text. Use<del> instead.
<u> This element was used to define underlined text.
<center> The <center> was used to center align text and content.
<big> It was used to make text bigger.
<applet> The <applet> was used to define an embedded applet. HTML5 encourages the use of the<object> tag instead.
<acronym> The <acronym> tag was used to define acronyms in HTML 4.01. An acronym can be spoken as if it were a word, example NATO, NASA, ASAP, GUI.

Putting all together

Here is complete code for a very basic HTML5 page: