The website causes the browser to crash the reason summary (Variety browser) recommend _javascript skill

when interviewing a company, the interviewer asks, what causes the browser to crash? Fools, only to answer the memory leak. In fact, the Web page in the process of loading, often for a variety of reasons to make the browser's reflection slow, or caused the browser to lose its response, and even cause the machine can not do other operations.

For visitors, if you log on to your site, the browser immediately crashes, I think this is intolerable to anyone, summed up the site caused the browser crash reasons:

1. Memory leaks

Or to talk about the memory leak, the Web site due to memory leaks and crashed into two situations, the server crash and browser crash. The problem with a memory leak is obvious, and it causes a reference to the allocated memory to be lost, and the process uses that memory as long as the system is still running. As a result, programs that used to consume more memory degrade system performance until the machine completely stops working to completely empty the memory.

Apache Web server is written in C/s + +, the memory leak problem of C + + is needless to say, there is no memory in the system can not be recycled, sometimes resulting in low memory or system crashes. In Java, a memory leak is a collection of objects that are allocated that are not recoverable by GC, but which occupy memory.

On the client side, the memory leaks caused by JavaScript can also cause the browser to crash. Articles about memory leaks from JavaScript, the more authoritative are "Memory leak patterns in JavaScript" and "Understanding and solving Internet Explorer leak Patterns".

JavaScript is a garbage collection (garbage collector,gc) language, which means that memory is assigned to an object based on its creation and is retracted by the browser when there is no reference to the object. Again, according to the article "Fabulous Adventures in Coding", "JScript uses a nongenerational mark-and-sweep garbage." Nongenerational Mark-and-sweep "It can be understood that browsers handle JavaScript not with pure garbage collection, but also use reference counting to process memory for native objects such as DOM, ActiveX object.

In the reference counting system, each referenced object retains a count to learn how many objects are referencing it. If the count is zero, the object is destroyed and the memory it occupies is returned to the heap. when objects reference each other, they form a circular reference, the browser (IE6, Firefox2.0) A circular reference between pure JavaScript objects can be handled correctly, but because in the reference counting system, objects referenced by each other cannot be destroyed because the reference count can never be zero, so the browser cannot handle JavaScript and native objects ( For example, a circular reference between DOM, ActiveX Object. So, when we have a circular reference between a native object and a JavaScript object, there is a memory leak problem.

Simply put, the browser uses reference counting to handle memory for the native object, while reference-counted objects cannot be destroyed, and a memory leak will occur for circular references involving native objects. With the following example, understanding this sentence, you can basically understand JavaScript caused by memory leaks.

Copy Code code as follows:

var obj;
Window.onload = function () {
A reference to a JavaScript object obj to a DOM object, obtained by ID
Obj=document.getelementbyid ("DivElement");
The DOM object has a reference to this JavaScript object, which is implemented by Expandoproperty
document.getElementById ("DivElement"). Expandoproperty=obj;
};

Visible, a circular reference is generated between the JavaScript object and the DOM object. Because DOM objects are managed by reference counting, two objects will not be destroyed.

In the other case, when the closure is encountered, we can easily create closure Memory leak when we bind the event response code to the native object. The key reasons are the same as the former and a circular reference across JavaScript objects and native objects. Just the code is more covert.

Copy Code code as follows:

Window.onload = function Attachevents (element) {
Element has a reference to the function ClickEventHandler ()
Element.attachevent ("onclick", ClickEventHandler);
function ClickEventHandler () {
The function has a reference to the attachevents (element) call scope.
That is, the parameter element is executed.
}
}

Here is a simple understanding of javascript caused by memory leaks, memory leaks increase the burden of the browser, it is likely to cause the browser crashes, we have to do is to avoid this situation, the practice can refer to the just said "Memory leak patterns in JavaScriptandUnderstanding and solving Internet Explorer leak PatternsTwo articles to understand. Handling JavaScript memory leaks The ultimate goal is to break the circular references between JavaScript objects and native objects or to clear 0 reference counts, releasing objects.

Some memory leaks such as closure memory leaks, we may be more difficult to find, memory leak detection We may refer to theJavaScript memory leak tool use .

2. Web page code complexity and browser bugs

The emergence of a large number of personal sites and low-quality Web site code has caused widespread support for browsing standards, and if you happen to have some bugs in your browser, the browser's rendering engine can make mistakes in processing the code, such as getting into a dead loop or crashing directly.

HTML code causes Web site to crash

This is an HTML structure error that causes IE6 to crash, and adding any characters before or after the <col width=/> will cause IE6 Crash.

Copy Code code as follows:

<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en"
"Http://www.w3.org/TR/html4/loose.dtd" >
<body>
<table>
<tr>
<td>
<table style= "width:100%;table-layout:fixed;" >
<colgroup><col width= "100px" ><col></colgroup>
</table>
</td>
</tr>
<table>
</body>

The code comes in a Koreanwebsite, no matter what version of XHTML or HTML is used, as long as the DOCTYPE declaration is taken, IE6 immediately crashes and there is no error when the DOCTYPE declaration is made, because it may be related to the document type declaration.

CSS code that makes IE6 crash

The code is referenced from the website Cats who code. The bug was found in 2007 and is said to have been discovered by a Japanese:

Copy Code code as follows:

<style>*{position:relative}</style>
<table><input></table>

The reason is that the table in the direct placement of content, in IE6 will cause Mshtml.dll module damage and shut down the browser, non-IE6 is safe.

In addition, the bug that exists in IE6 has the following situation, which is also encountered when the Pseudo class is a:active:

Copy Code code as follows:

<style type= "Text/css" >
A{position:relative;}
A:hover{float:left;}
</style>
<a href= "" > Crash IE6, Crash ie6</a>

Solution: Add zoom:1 to <a>; Make it trigger the haslayout.

Copy Code code as follows:

<style type= "Text/css" >
A{position:relative;zoom:1;}
A:hover{float:left;}
</style>

CSS code that makes IE7 crash

This bug comes from stealing rice , and it only exists in IE7 which is estimated to be processing ellipses when it causes IE7 to crash.

Copy Code code as follows:

<style type= "Text/css" >
div{float:left;width:175px;}
Ul{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
Li{position:relative;}
</style>
<div>
<ul>
<li> collapse collapse collapse collapse crash ie7</li>
<li> collapse collapse collapse collapse crash ie7</li>
</ul>
</div>

Solution: Add zoom:1 to <li>; Make it trigger Haslayout

JavaScript code that crashes IE6

From Internet Explorer Sucks, this site is the use of code, when you use IE6 access, the browser will immediately crash. The code is as follows:

Copy Code code as follows:

<script>for (x in document.write) {document.write (x);} </script>

The cause of the problem is temporarily unresolved, but in terms of compatibility and efficiency, this is generally not the way to do it.

3. Too much web page data

Web pages contain a large number of data to be processed, causing the system busy, such as multiple graphics pages, long pages, etc., or Web pages embedded in a variety of controls can cause the browser to handle a lot of data, causing the system busy. such as flash games, ActiveX controls, and so on. When the browser to visit the site, if the site's large amount of data, will make the browser generally in the process will take up a lot of CPU usage and memory, resulting in browser loss of response, or even the computer system panic. When you develop a Web site, you can largely avoid this problem if you take full account of Web performance.

4. AJAX Web Service Vulnerabilities

Ajax is an xml-based asynchronous transfer, and text-formatted XML messages can be twice times as much as the amount of binary data bandwidth. The more bandwidth required to transfer an XML message, the less available resources the system or application uses to perform other tasks. For example, perform complex algorithms to obtain desired results.

Excessive bandwidth may result in performance deterioration caused by system overload. Too much bandwidth will cause the AJAX application to output corrupted data because there is not enough resources to generate clean data. This means that the Web services portal, which is part of the AJAX application, exposes the corrupted data to other parts of the portal, leading to malformed messages and excessive parsing. If the threat exploits this vulnerability, it can cause the browser to crash.

On the other hand, frequent, smaller HTTP requests can add to the burden of back-end servers, load-balancing programs, and firewalls, resulting in excessive bandwidth and, ultimately, performance degradation. If the client stays on the page for a long time or does not close the browser, the browser's memory will continue to rise, without release, causing the client browser to crash.

To this end, in more times Ajax, we have to consider the use of specialized hardware accelerator, optimize software, eliminate code redundancy, XML acceleration capabilities and solve interoperability problems, such as the acceleration of AJAX applications. In addition, actively monitoring traffic flows can consistently measure the performance of network traffic for AJAX applications. By putting data into a live log, you can see where a large number of packet loss and jitter events occur, why the response slows, and how to improve traffic performance by modifying the priority of the application.

5. Other reasons

In addition to the reasons mentioned above, there are many other reasons, although some will not cause the browser to crash directly, it can also cause the Web site to be inaccessible, such as log files causing disk full, Web server C pointer error, process lack of file descriptor, thread deadlock, temporary table in the database is not sufficient and server overload, etc., you can refer to the The seven most common causes of web site crashes .

Summarize

For visitors, if you are logged on to your site, the browser immediately crashes, I think this is intolerable to anyone, by summing up the Web site to cause the browser crash , in our website development and maintenance, we should try to avoid memory leaks, code errors and redundancy and large amount of data, etc. Build a better performance site.

PS: This article is summarized by Vicky , if reproduced please indicate the source