Differences between inner and external when CSS and JavaScript are referenced on pages

CSSCascading Style Sheet (Cascading Style Sheet) generally has the following three cascade methods in practice.

1. External Connection
External style table,CSS CodeIt is stored separately as a file. For example, a style.css file contains all styles. InHtmlThe external cascade in is introduced using the <link> mark or @ import statement. The sample code is as follows:

<LinkREL= "Stylesheet"Href= "Style.css"Type= "Text/CSS" />// Link @ import URL ("style.css"); // @ import
 

 

<Link> for similarities and differences with @ import, refer to this article:Difference between link and @ import in CSS external reference.

2. inline
PortalCSSThe code is usually embedded, that is, the inline style, which uses the <style> flag to define the style as an internal block object. The sample code is as follows:

<StyleType= "Text/CSS"><! -- Body{Font-family:Arial, Helvetica, sans-serif;}--></Style>
 

 

InlineCSSIt can effectively reduce HTTP requests, improve page performance, and relieve server pressure. After the browser is loadedCSSTo render the page, so it can preventCSSThe file cannot be read, leading to page streaking.

3. embedded
InitialCSSThe code is directly added to the modified Tag Element. The sample code is as follows:

 
<DivStyle= "Font-family: Arial, Helvetica, sans-serif ;">Mango</Div>
 

 

Although this is more intuitive, it greatly increases the page size and does not conform to the design philosophy of separation of structure and performance.

In general, Extranet and inline have their own advantages. You can select a suitable cascade method based on the actual situation.

Summary:ExternalAdvantage: CSS is in the same file. When the page needs to be modified, you only need to modify one file to facilitate maintenance.

Disadvantage: when there are many HTTP requests, the browser needs to load CSS to render the page, which affects the page performance.

Built-inAdvantage: inline CSS can effectively reduce HTTP requests, improve page performance, and relieve server pressure. The page can be rendered only after the CSS file is loaded by the browser. This prevents the CSS file from being read.

Page streaking.

Disadvantage: You need to modify multiple pages each time you modify CSS.

 

 

The difference between the javascrip internal and external is similar.

Benefits of external loading of JavaScript files

• The javascript code is defined in a unified manner to facilitate viewing and maintenance.
• Make the code safer, compress, and encrypt a single Javascript file.
• The browser can cache JavaScript files to reduce bandwidth usage (when multiple pages use one Javascript file at the same time, it usually only needs to be downloaded once ).

 

Considerations for external loading of JavaScript files

• Do not divide Javascript into multiple files. Multiple files will increase the burden on the server and the HTTP requests of the server.
• A Javascript file also increases HTTP requests.

 

Use externalJavascriptAndCSS
Many performance rules are about how to process external files. However, before you take these measures, you may ask a more basic question: should JavaScript and CSS be placed in external files or in the page itself?
In practical applications, using external files can increase the page speed, because JavaScript and CSS files can generate cache in the browser. The JavaScript and CSS built-in in the HTML document will be re-downloaded with the HTML document in each request. This reduces the number of HTTP requests, but increases the size of HTML documents. On the other hand, if Javascript and CSS in external files are cached by the browser, the size of the HTML document can be reduced without increasing the number of HTTP requests.
The key issue is that the cache frequency of external JavaScript and CSS files is related to the number of requests to HTML documents. Although it is difficult, there are still some indicators that can be measured. If a user browses multiple pages on your website in a session, and these pages repeatedly use the same script and style sheet, caching external files will bring more benefits.
Many websites do not have the ability to establish these metrics. For these websites, the best way to be determined is to reference JavaScript and CSS as external files. The exception to built-in code is the home page of the website, as shown in figureYahoo! Home PageAndMy Yahoo!. The home page has a small (maybe only once) page views in one session. You can find that the built-in JavaScript and CSS will speed up response time for end users.
For a homepage with large page views, there is a technology that balances the benefits of reducing HTTP requests brought about by built-in code and caching by using external files. One of them is built-in JavaScript and CSS on the homepage, but external files are downloaded dynamically after the page is downloaded. When these files are used on the subpage, they are cached in the browser.