


Front-end notes-a brief summary of front-end optimization_html/css_WEB-ITnose
Some personal brief summary of front-end optimization, referring to some materials written by others
- Server aspect:
- Improve the quality of your own server, bandwidth, etc. Aspects
- Enable browser cache to reduce http requests
- Enable gzip compression
- Use content distribution network cdn
- html interface
- Css files are placed in the head, and js files are placed at the end of the html. When downloading a certain JS, other tasks are suspended. You need to wait for this JS to be downloaded and executed before downloading other ones
- Inline css is not applicable
- Try to reduce tags as much as possible, and do not use more than one tag. For example, clear floating uses: after
- js lazy loading, asynchronous loading, use defer tag, async="true"
- to reduce dns queries. Every time a file from an external source is referenced, there will be a DNS query, which will generally have an impact on the speed of the first visit to the website
- Avoid 404. Encountering 404 when downloading js is a big problem
- Avoid empty src, such as src=""
- Reduce http requests: image sprite technology, combined with css and js code
- Code aspect
- At the end of the project, a compression tool is used to compress css, js
- The class of css should not be too long, and there must be a clear hierarchical relationship
- Use class when operating styles in js, not in html Inline css and js code
- JS optimization
- String concatenation: using = is less efficient, you can use array join() Methods
- Especially do not use for (in) when using loops. while is more efficient than for (;;)
- Local variables are accessed faster than global variables and should be avoided as much as possible Each operation of global variables
- on DOM elements is relatively expensive, so operate it as little as possible. For example, if there is string splicing in the for loop, and then innerHTML is used to operate, the innerHTML should be placed outside the for loop
- When operating a certain DOM node, store the DOM node in a local variable
- Regarding string traversal, it is preferred to use regular expressions
- Variable type conversion
- Convert numbers into strings ("" )>String()> .toString()>newString()
- Convert string to number parseInt()
- Conversion between floating point and integer Math.floor() or Math.round()
- Using direct variables var a = [] is faster than var a = new Array()
- It is best not to write strings directly when creating DOM nodes, but to call the creatElement() method

TheroottaginanHTMLdocumentis.Itservesasthetop-levelelementthatencapsulatesallothercontent,ensuringproperdocumentstructureandbrowserparsing.

The article explains that HTML tags are syntax markers used to define elements, while elements are complete units including tags and content. They work together to structure webpages.Character count: 159

The article discusses the roles of <head> and <body> tags in HTML, their impact on user experience, and SEO implications. Proper structuring enhances website functionality and search engine optimization.

The article discusses the differences between HTML tags , , , and , focusing on their semantic vs. presentational uses and their impact on SEO and accessibility.

Article discusses specifying character encoding in HTML, focusing on UTF-8. Main issue: ensuring correct display of text, preventing garbled characters, and enhancing SEO and accessibility.

The article discusses various HTML formatting tags used for structuring and styling web content, emphasizing their effects on text appearance and the importance of semantic tags for accessibility and SEO.

The article discusses the differences between HTML's 'id' and 'class' attributes, focusing on their uniqueness, purpose, CSS syntax, and specificity. It explains how their use impacts webpage styling and functionality, and provides best practices for

The article explains the HTML 'class' attribute's role in grouping elements for styling and JavaScript manipulation, contrasting it with the unique 'id' attribute.


Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

Atom editor mac version download
The most popular open source editor

mPDF
mPDF is a PHP library that can generate PDF files from UTF-8 encoded HTML. The original author, Ian Back, wrote mPDF to output PDF files "on the fly" from his website and handle different languages. It is slower than original scripts like HTML2FPDF and produces larger files when using Unicode fonts, but supports CSS styles etc. and has a lot of enhancements. Supports almost all languages, including RTL (Arabic and Hebrew) and CJK (Chinese, Japanese and Korean). Supports nested block-level elements (such as P, DIV),

Dreamweaver Mac version
Visual web development tools

SublimeText3 Linux new version
SublimeText3 Linux latest version

Dreamweaver CS6
Visual web development tools
