From da78a9e329e272dedb2400b79a3bdeebff387d47 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:17 -0500 Subject: initial commit --- files/ms/html/canvas/index.html | 80 ++++++++ .../canvas/melukis_grafik_dengan_canvas/index.html | 158 ++++++++++++++++ files/ms/html/elemen/index.html | 208 +++++++++++++++++++++ files/ms/html/index.html | 79 ++++++++ .../index.html | 133 +++++++++++++ 5 files changed, 658 insertions(+) create mode 100644 files/ms/html/canvas/index.html create mode 100644 files/ms/html/canvas/melukis_grafik_dengan_canvas/index.html create mode 100644 files/ms/html/elemen/index.html create mode 100644 files/ms/html/index.html create mode 100644 files/ms/html/tip_menulis_lamanhtml_dengan_pemuatan_pantas/index.html (limited to 'files/ms/html') diff --git a/files/ms/html/canvas/index.html b/files/ms/html/canvas/index.html new file mode 100644 index 0000000000..bfd9cd5f2b --- /dev/null +++ b/files/ms/html/canvas/index.html @@ -0,0 +1,80 @@ +--- +title: Canvas +slug: HTML/Canvas +tags: + - HTML + - 'HTML:Canvas' + - 'HTML:Element' + - NeedsTranslation + - References + - TopicStub +translation_of: Web/API/Canvas_API +--- +

Added in HTML5, the HTML {{HTMLElement("canvas")}} element is an element which can be used to draw graphics via scripting (usually JavaScript). For example, it can be used to draw graphs, make photo compositions, create animations or even do real-time video processing.

+

Mozilla applications gained support for <canvas> starting with Gecko 1.8 (i.e. Firefox 1.5). The element was originally introduced by Apple for the OS X Dashboard and Safari. Internet Explorer supports <canvas> from version 9 onwards; for earlier versions of IE, a page can effectively add support for <canvas> by including a script from Google's Explorer Canvas project. Google Chrome and Opera 9 also support <canvas>.

+

The <canvas> element is also used by WebGL to do hardware-accelerated 3D graphics on web pages.

+
+
+

Documentation

+
+
+ Specification
+
+ The <canvas> element is part of the WhatWG Web applications 1.0 specification, also known as HTML5.
+
+ Canvas tutorial
+
+ A comprehensive tutorial covering both the basic usage of <canvas> and its advanced features.
+
+ Code snippets:Canvas
+
+ Some extension developer-oriented code snippets involving <canvas>.
+
+ Canvas examples
+
+ A few <canvas> demos.
+
+ Drawing DOM objects into a canvas
+
+ How to draw DOM content, such as HTML elements, into a canvas.
+
+ A basic raycaster
+
+ A demo of ray-tracing animation using canvas.
+
+ Canvas DOM interfaces
+
+ Canvas DOM interfaces on Gecko.
+
+

View All...

+
+
+

Community

+ +

Resources

+ +

Libraries

+
    +
  • libCanvas is powerful and lightweight canvas framework
    • +
  • Processing.js is a port of the Processing visualization language
    • +
  • EaselJS is a library with a Flash-like API
    • +
  • PlotKit is a charting and graphing library
    • +
  • Rekapi is an animation keyframing API for Canvas
    • +
  • PhiloGL is a WebGL framework for data visualization, creative coding and game development.
    • +
  • JavaScript InfoVis Toolkit creates interactive 2D Canvas data visualizations for the Web.
    • +
  • Frame-Engine is a framework for developping applications and games
    • +
+ + +
+
+
+ {{HTML5ArticleTOC()}}
diff --git a/files/ms/html/canvas/melukis_grafik_dengan_canvas/index.html b/files/ms/html/canvas/melukis_grafik_dengan_canvas/index.html new file mode 100644 index 0000000000..a0ecfff0f5 --- /dev/null +++ b/files/ms/html/canvas/melukis_grafik_dengan_canvas/index.html @@ -0,0 +1,158 @@ +--- +title: Melukis Grafik dengan Canvas +slug: HTML/Canvas/Melukis_Grafik_dengan_Canvas +translation_of: Web/API/Canvas_API/Tutorial +--- +
+

Most of this content (but not the documentation on drawWindow) has been rolled into the more expansive Canvas tutorial, this page should probably be redirected there as it's now redundant.

+
+

Introduction

+

With Firefox 1.5, Firefox includes a new HTML element for programmable graphics. <canvas> is based on the WHATWG canvas specification, which itself is based on Apple's <canvas> implemented in Safari. It can be used for rendering graphs, UI elements, and other custom graphics on the client.

+

<canvas> creates a fixed size drawing surface that exposes one or more rendering contexts. We'll focus on the 2D rendering context. For 3D graphics, you should use the WebGL rendering context.

+

The 2D Rendering Context

+

A Simple Example

+

To start off, here's a simple example that draws two intersecting rectangles, one of which has alpha transparency:

+
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  ctx.fillStyle = "rgb(200,0,0)";
+  ctx.fillRect (10, 10, 55, 50);
+
+  ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
+  ctx.fillRect (30, 30, 55, 50);
+}
+
+ +

{{ EmbedLiveSample('A_Simple_Example','150','150','/@api/deki/files/602/=Canvas_ex1.png') }}

+

The draw function gets the canvas element, then obtains the 2d context. The ctx object can then be used to actually render to the canvas. The example simply fills two rectangles, by setting fillStyle to two different colors using CSS color specifications and calling fillRect. The second fillStyle uses rgba() to specify an alpha value along with the color.

+

The fillRect, strokeRect, and clearRect calls render a filled, outlined, or clear rectangle. To render more complex shapes, paths are used.

+

Using Paths

+

The beginPath function starts a new path, and moveTo, lineTo, arcTo, arc, and similar methods are used to add segments to the path. The path can be closed using closePath. Once a path is created, you can use fill or stroke to render the path to the canvas.

+
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  ctx.fillStyle = "red";
+
+  ctx.beginPath();
+  ctx.moveTo(30, 30);
+  ctx.lineTo(150, 150);
+  // was: ctx.quadraticCurveTo(60, 70, 70, 150); which is wrong.
+  ctx.bezierCurveTo(60, 70, 60, 70, 70, 150); // <- this is right formula for the image on the right ->
+  ctx.lineTo(30, 30);
+  ctx.fill();
+}
+
+ +

{{ EmbedLiveSample('Using_Paths','190','190','/@api/deki/files/603/=Canvas_ex2.png') }}

+

Calling fill() or stroke() causes the current path to be used. To be filled or stroked again, the path must be recreated.

+

Graphics State

+

Attributes of the context such as fillStyle, strokeStyle, lineWidth, and lineJoin are part of the current graphics state. The context provides two methods, save() and restore(), that can be used to move the current state to and from the state stack.

+

A More Complicated Example

+

Here's a little more complicated example, that uses paths, state, and also introduces the current transformation matrix. The context methods translate(), scale(), and rotate() all transform the current matrix. All rendered points are first transformed by this matrix.

+
function drawBowtie(ctx, fillStyle) {
+
+  ctx.fillStyle = "rgba(200,200,200,0.3)";
+  ctx.fillRect(-30, -30, 60, 60);
+
+  ctx.fillStyle = fillStyle;
+  ctx.globalAlpha = 1.0;
+  ctx.beginPath();
+  ctx.moveTo(25, 25);
+  ctx.lineTo(-25, -25);
+  ctx.lineTo(25, -25);
+  ctx.lineTo(-25, 25);
+  ctx.closePath();
+  ctx.fill();
+}
+
+function dot(ctx) {
+  ctx.save();
+  ctx.fillStyle = "black";
+  ctx.fillRect(-2, -2, 4, 4);
+  ctx.restore();
+}
+
+function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  // note that all other translates are relative to this one
+  ctx.translate(45, 45);
+
+  ctx.save();
+  //ctx.translate(0, 0); // unnecessary
+  drawBowtie(ctx, "red");
+  dot(ctx);
+  ctx.restore();
+
+  ctx.save();
+  ctx.translate(85, 0);
+  ctx.rotate(45 * Math.PI / 180);
+  drawBowtie(ctx, "green");
+  dot(ctx);
+  ctx.restore();
+
+  ctx.save();
+  ctx.translate(0, 85);
+  ctx.rotate(135 * Math.PI / 180);
+  drawBowtie(ctx, "blue");
+  dot(ctx);
+  ctx.restore();
+
+  ctx.save();
+  ctx.translate(85, 85);
+  ctx.rotate(90 * Math.PI / 180);
+  drawBowtie(ctx, "yellow");
+  dot(ctx);
+  ctx.restore();
+}
+
+ +

{{ EmbedLiveSample('A_More_Complicated_Example','215','215','/@api/deki/files/604/=Canvas_ex3.png') }}

+

This defines two methods, drawBowtie and dot, that are called 4 times. Before each call, translate() and rotate() are used to set up the current transformation matrix, which in turn positions the dot and the bowtie. dot renders a small black square centered at (0, 0). That dot is moved around by the transformation matrix. drawBowtie renders a simple bowtie path using the passed-in fill style.

+

As matrix operations are cumulative, save() and restore() are used around each set of calls to restore the original canvas state. One thing to watch out for is that rotation always occurs around the current origin; thus a translate() rotate() translate() sequence will yield different results than a translate() translate() rotate() series of calls.

+

Compatibility With Apple <canvas>

+

For the most part, <canvas> is compatible with Apple's and other implementations. There are, however, a few issues to be aware of, described here.

+

Required </canvas> tag

+

In the Apple Safari implementation, <canvas> is an element implemented in much the same way <img> is; it does not have an end tag. However, for <canvas> to have widespread use on the web, some facility for fallback content must be provided. Therefore, Mozilla's implementation has a required end tag.

+

If fallback content is not needed, a simple <canvas id="foo" ...></canvas> will be fully compatible with both Safari and Mozilla -- Safari will simply ignore the end tag.

+

If fallback content is desired, some CSS tricks must be employed to mask the fallback content from Safari (which should render just the canvas), and also to mask the CSS tricks themselves from IE (which should render the fallback content). Todo: get hixie to put the CSS bits in

+

Additional Features

+

Rendering Web Content Into A Canvas

+
+ This feature is only available for code running with Chrome privileges. It is not allowed in normal HTML pages. Read why.
+

Mozilla's canvas is extended with the drawWindow() method. This method draws a snapshot of the contents of a DOM window into the canvas. For example,

+
ctx.drawWindow(window, 0, 0, 100, 200, "rgb(255,255,255)");
+
+

would draw the contents of the current window, in the rectangle (0,0,100,200) in pixels relative to the top-left of the viewport, on a white background, into the canvas. By specifying "rgba(255,255,255,0)" as the color, the contents would be drawn with a transparent background (which would be slower).

+

It is usually a bad idea to use any background other than pure white "rgb(255,255,255)" or transparent, as this is what all browsers do, and many websites expect that transparent parts of their interface will be drawn on white background.

+

With this method, it is possible to fill a hidden IFRAME with arbitrary content (e.g., CSS-styled HTML text, or SVG) and draw it into a canvas. It will be scaled, rotated and so on according to the current transformation.

+

Ted Mielczarek's tab preview extension uses this technique in chrome to provide thumbnails of web pages, and the source is available for reference.

+
+ Note: Using canvas.drawWindow() while handling a document's onload event doesn't work.  In Firefox 3.5 or later, you can do this in a handler for the MozAfterPaint event to successfully draw HTML content into a canvas on page load.
+

See also

+ diff --git a/files/ms/html/elemen/index.html b/files/ms/html/elemen/index.html new file mode 100644 index 0000000000..038d44abd8 --- /dev/null +++ b/files/ms/html/elemen/index.html @@ -0,0 +1,208 @@ +--- +title: Elemen-Elemen HTML +slug: HTML/Elemen +translation_of: Web/HTML/Element +--- +

This HTML reference lists all HTML elements, defined in HTML5 or in a previous specification. When enclosed within angle brackets, they form HTML tags: <elementname>. Elements are entities specifying how HTML documents should be built, and what kind of content should be placed in what part of an HTML document.

+

This page lists all standard HTML5 tags, but also older, obsolete and deprecated ones, as well as non-standard ones that browsers may support. Elements that were introduced in HTML5 are often referred as the new HTML5 elements, even though the other standard elements also are valid in HTML5.

+

In an HTML document, an element is defined by a starting tag. If the element contains other content, it ends with a closing tag, where the element name is preceded by a forward slash: </elementname>. Some elements don't need to be closed, such as image elements. These are known as void elements. HTML documents contain a tree of these elements. Each is named to represent what it does. For example, the <title> element represents the title of the document. Below is an alphabetical list of the HTML Elements.

+
+ A + + B + + C + + D + + E + + F + + G H + + I + + J K + + L + + M + + N + + O + + P + + Q + + R + + S + + T + + U + + V + + W + + X Y Z + +
+

The symbol This element has been added in HTML5 indicates that the element has been added in HTML5. Note that other elements listed here may have been modified or extended by the HTML5 specification. Dimmed elements are non-standard, obsolete, or deprecated; they must not be used in new Web sites, and should gradually be removed from existing ones.

diff --git a/files/ms/html/index.html b/files/ms/html/index.html new file mode 100644 index 0000000000..3510d44e50 --- /dev/null +++ b/files/ms/html/index.html @@ -0,0 +1,79 @@ +--- +title: HTML +slug: HTML +translation_of: Web/HTML +--- +
+
+ DEMO HTML5
+

Sebuah koleksi demo yang menampilkan teknologi baru dalam HTML.

+

The logo of HTML

+
+

HyperText Markup Language (HTML) adalah sebuah bahasa yang digunakan untuk menghasilkan laman web dan berbagai jenis dokumen yang boleh dilihat pada sebuah pelayar. Lebih terperinci lagi, HTML adalah bahasa yang menerangkan struktur dan semantik sesebuah dokumen. Isi kandungan ditag pada elemen HTML seperti <img>, <title>, <p>, <div>, …

+

HTML adalah sebuah standard antarabangsa dan spesifikasinya diuruskan oleh World Wide Web Consortium dan juga WHATWG.

+

HTML dianggap sebagai sebuah standard hidup dan secara teknikalnya sentiasa dalam pembangunan yang berterusan. Versi yang terkini bagi spesifikasi HTML adalah HTML5.

+
+
+

Dokumentasi mengenai HTML

+
+
+ Pengenalan kepada HTML
+
+ Laman ini menyediakan informasi asas mengenai pertuturan dan semantik sesebuah laman HTML (dokumen). Ini akan memberi pengetahuan asas yang di perlukan untuk membangunkan dokumen-dokumen HTML.
+
+ Rujukan elemen HTML
+
+ Dapatkan maklumat mengenai setiap elemen yang di boleh digunakan oleh pelayar yang berbeza.
+
+ Senarai Sifat HTML
+
+ Lihat semua sifat dan elemen yang dapat dikaitkan bersama.
+
+ HTML5
+
+ Pelajari API-API baru bagi HTML5 dan elemen-elemen yang boleh digunakan bersama.
+
+ Panduan Borang HTML
+
+ Borang HTML adalah sebahagian yang compleks bagi HTML. Panduan ini akan membantu anda dalam memahirinya, daripada struktur hingga ke gaya, daripada penyokongan pelayar hingga ke pengawalan persendirian.
+
+ Tabiat buruk copy-pasting
+
+ Teknologi web sering kali dipelajari dengan cara melihat sumber pada laman yang lain dan menyalin semula laman tersebut. Oleh demikian, ini bermaksud tabiat buruk akan berterusan. Laman ini menyenaraikan sebahagian daripada bentuk tabiat buruk dan menunjukkan anda cara yang betul untuk mencapai matlamat yang dikehendaki.
+
+ Melukis Grafik dengan Canvas
+
+ Elemen HTML yang baru untuk grafik yang boleh diprogramkan. <canvas> boleh digunakan untuk menghasilkan graf, elemen UI dan juga penyesuaian persendirian grafik.
+
+ Tip menulis Laman HTML dengan pemuatan pantas
+
+ Sesebuah laman web yang optima bukan sahaja menyediakan laman yang lebih bertindak balas dengan pelawat, tetapi juaga mengurangkan beban pada server web and sambungan internet anda.
+
+

Lihat Semua...

+
+
+

Mendapatkan bantuan daripada komuniti

+

Anda memerlukan bantuan berkaitan HTML dan tidak dapat mencari jawapan di dalam dokumentasi ini?

+
    +
  • Runding bersama forum Mozilla yang dedikasi : {{DiscussionList("dev-tech-html", "mozilla.dev.tech.html")}}
    • +
  • Pergi ke Stack Overflow, sebuah laman soal jawab yang dibina secara kerjasama dan cuba cari jawapan kepada soalan anda. Jika tidak berjaya, anda boleh tujukan soalan anda disana.
    • +
+

Jangan lupa mengenai netiquette...

+

Alat memudahkan pembangunan html

+ +

Lihat Semua...

+ + +
+
+

 

diff --git a/files/ms/html/tip_menulis_lamanhtml_dengan_pemuatan_pantas/index.html b/files/ms/html/tip_menulis_lamanhtml_dengan_pemuatan_pantas/index.html new file mode 100644 index 0000000000..3fd36727fd --- /dev/null +++ b/files/ms/html/tip_menulis_lamanhtml_dengan_pemuatan_pantas/index.html @@ -0,0 +1,133 @@ +--- +title: Tip menulis Laman HTML dengan pemuatan pantas +slug: HTML/Tip_menulis_LamanHTML_dengan_pemuatan_pantas +translation_of: Learn/HTML/Howto/Author_fast-loading_HTML_pages +--- +

These tips are based upon common knowledge and experimentation.

+

An optimized web page not only provides for a more responsive site for your visitors, but also reduces the load on your web servers and Internet connection. This can be crucial for high volume sites or sites which have a spike in traffic due to unusual circumstances such as breaking news stories.

+

Optimizing page load performance is not just for content which will be viewed by narrow band dialup or mobile device visitors. It is just as important for broadband content and can lead to dramatic improvements even for your visitors with the fastest connections.

+

Tips

+

Reduce page weight

+

Page weight is by far the most important factor in page-load performance.

+

Reducing page weight through the elimination of unnecessary whitespace and comments, commonly known as minimization, and by moving inline script and CSS into external files, can improve download performance with minimal need for other changes in the page structure.

+

Tools such as HTML Tidy can automatically strip leading whitespace and extra blank lines from valid HTML source. Other tools can "compress" JavaScript by reformatting the source or by obfuscating the source and replacing long indentifiers with shorter versions.

+

Minimize the number of files

+

Reducing the number of files referenced in a web page lowers the number of HTTP connections required to download a page.

+

Depending on a browser's cache settings, it may send an If-Modified-Since request to the web server for each CSS, JavaScript or image file, asking whether the file has been modified since the last time it was downloaded.

+

By reducing the number of files that are referenced within a web page, you reduce the time required for these requests to be sent, and for their responses to be received.

+

If you use background images a lot in your css, you can reduce the amount of HTTP look-ups needed by combining the images into one, known as an image sprite. Then you just apply the same image each time you need it for a background, and adjust the x/y coordinates appropriately. This technique works best with elements that will have limited dimensions, and will not work for every use of a background image. However the fewer http requests and single image caching can help reduce pageload time.

+

Too much time spent querying the last-modified time of referenced files can delay the initial display of a web page, since the browser must check the modification time for each CSS or JavaScript file, before rendering the page.

+

Reduce domain lookups

+

Since each separate domain costs time in a DNS lookup, page-load time will grow along with the number of separate domains appearing in CSS link(s) and JavaScript and image src(es).

+

This may not always be practical; however, you should always take care to use only the minimum necessary number of different domains in your pages.

+

Cache reused content

+

Make sure that any content that can be cached, is cached, and with appropriate expiration times.

+

In particular, pay attention to the Last-Modified header. It allows for efficient page caching; by means of this header, information is conveyed to the user agent about the file it wants to load, such as when it was last modified. Most web servers automatically append the Last-Modified header to static pages (e.g. .html, .css), based on the last-modified date stored in the file system. With dynamic pages (e.g. .php, .aspx), this, of course, can't be done, and the header is not sent.

+

So, in particular for pages which are generated dynamically, a little research on this subject is beneficial. It can be somewhat involved, but it will save a lot in page requests on pages which would normally not be cacheable.

+

More information:

+
    +
  1. HTTP Conditional Get for RSS Hackers
    2. +
  2. HTTP 304: Not Modified
    3. +
  3. On HTTP Last-Modified and ETag
    4. +
+

Optimally order the components of the page

+

Download page content first, along with any CSS or JavaScript that may be required for its initial display, so that the user gets the quickest apparent response during page-loading. This content is typically text, and can therefore benefit from text compression in transit, thus providing an even quicker response to the user.

+

Any dynamic features that require the page to complete loading before being used, should be initially disabled, and then only enabled after the page has loaded. This will cause the JavaScript to be loaded after the page contents, which will improve the overall appearance of the page load.

+

Reduce the number of inline scripts

+

Inline scripts can be expensive for page loading, since the parser must assume that an inline script could modify the page structure while parsing is in progress. Reducing the use of inline scripts in general, and reducing the use of document.write() to output content in particular, can improve overall page loading. Use modern AJAX methods to manipulate page content for modern browsers, rather than the older approaches based on document.write().

+

Use modern CSS and valid markup

+

Use of modern CSS reduces the amount of markup, can reduce the need for (spacer) images, in terms of layout, and can very often replace images of stylized text -- that "cost" much more than the equivalent text-and-CSS.

+

Using valid markup has other advantages. First, browsers will have no need to perform error-correction when parsing the HTML. ((This is aside from the philosophical issue of whether to allow format variation in user input, and then programmatically "correct" or normalize it; or whether, instead, to enforce a strict, no-tolerance input format)).

+

Moreover, valid markup allows for the free use of other tools which can pre-process your web pages. For example, HTML Tidy can remove whitespace and optional ending tags; however, it will refuse to run on a page with serious markup errors.

+

Chunk your content

+

Tables for layouts are a legacy method that should not be used any more. Layouts utilizing {{ HTMLElement("div") }} blocks, and in the near future, CSS3 Multi-column Layout or CSS3 Flexible Box Layout, should be used instead.

+

Tables are still considered valid markup, but should be used for displaying tabular data. To help the browser render your page quicker, you should avoid nesting your tables.

+

Rather than deeply nesting tables as in:

+
<TABLE>
+  <TABLE>
+    <TABLE>
+          ...
+    </TABLE>
+  </TABLE>
+</TABLE>
+

use non-nested tables or divs as in

+
<TABLE>...</TABLE>
+<TABLE>...</TABLE>
+<TABLE>...</TABLE>
+
+

See also: CSS3 Multi-column Layout Spec and CSS3 Flexible Box Layout

+

Specify sizes for images and tables

+

If the browser can immediately determine the height and/or width of your images and tables, it will be able to display a web page without having to reflow the content. This not only speeds the display of the page but prevents annoying changes in a page's layout when the page completes loading. For this reason, height and width should be specified for images, whenever possible.

+

Tables should use the CSS selector:property combination:

+
  table-layout: fixed;
+
+

and should specify widths of columns using the COL and COLGROUP html tags.

+

Choose your user-agent requirements wisely

+

To achieve the greatest improvements in page design, make sure that reasonable user-agent requirements are specified for projects. Do not require your content to appear pixel-perfect in all browsers, especially not in down-version browsers.

+

Ideally, your basic minimum requirements should be based on the consideration of modern browsers that support the relevant standards. This can include: Firefox 3.6+ on any platform, Internet Explorer 8.0+ on Windows, Opera 10+ on Windows, and Safari 4 on Mac OS X.

+

Note, however, that many of the tips listed in this article are common-sense techniques which apply to any user agent, and can be applied to any web page, regardless of browser-support requirements.

+

Example page structure

+

· HTML

+
+
+ · HEAD
+
+
+
+
+
+ · LINK ...
+ CSS files required for page appearance. Minimize the number of files for performance while keeping unrelated CSS in separate files for maintenance.
+
+
+
+
+
+
+
+ · SCRIPT ...
+ JavaScript files for functions required during the loading of the page, but not any DHTML that can only run after page loads.
+
+ Minimize the number of files for performance while keeping unrelated JavaScript in separate files for maintenance.
+
+
+
+
+
+ · BODY
+
+ · User visible page content in small chunks (tables / divs) that can be displayed without waiting for the full page to download.
+
+
+
+
+
+ · SCRIPT ...
+ Any scripts which will be used to perform DHTML. DHTML script typically can only run after the page has completely loaded and all necessary objects have been initialized. There is no need to load these scripts before the page content. That only slows down the initial appearance of the page load.
+
+ Minimize the number of files for performance while keeping unrelated JavaScript in separate files for maintenance.
+
+ If any images are used for rollover effects, you should preload them here after the page content has downloaded.
+
+
+
+

Use async and defer, if possible

+

Make the javascript scripts such that they are compatible with both the async and the defer and use async whenever possible, specially if you have multiple script tags.
+ With that, the page can stop rendering while javascript is still loading. Otherwise the browser will not render anything that is after the script tags that do not have these atributes.

+

Note: Even though these attibutes do help a lot for the first time a page is loaded, you should use them but not rely that it will work in all browsers. If you follow all guidelines to make good javascript code, there is no need to change your code.

+ + +
+

Original Document Information

+ +
+

 

-- cgit v1.2.3-54-g00ecf