My front-end course and Course

My front-end course and Course

It is hard to imagine that I was still working on Background Development half a year ago. I know little about the front-end and can now be engaged in front-end development. The learning process in the past six months will be a valuable asset in my life, which reminds me of the following sentence:"On the road to growth, we should not set limits for ourselves. As long as we have the power to grow, we can constantly surpass ourselves.". Next I will talk about the front-end learning process based on my own experiences.

Reading directory

• Basic Jquery knowledge preparation
• CSS Learning and Skills
• Code optimization
• Summary

Back to Top Jquery Basics

The basic knowledge required to learn the front-end is jquery and css. It is best to master CSS3 for mobile development. Many new features of CSS3 make the layout much simpler. Jquery does not need to be proficient in every knowledge point, but it is best to understand it. It is more solid to learn this thing in detail. Several points that must be mastered

1. Selector

The basic id style selector must be mastered.

2. Event binding

Not recommended

<button id="foo" onclick="dosomething()">Bar</button>

Disadvantage: The result is that the html front-end and js front-end work are mixed together. In principle, HTML code can only reflect the structure of the webpage.

Recommended syntax

$(“#foo”).click(function(){});

Advantage: jQuery append and bind, and the number of executions solves the incompatibility problem of IE.

The event binding methods in Jquery include click, live, bind, one, on ..., The differences between them will not be discussed here. The on method is officially recommended to bind events. It is good in terms of performance and trial scenarios.

$(“#foo”).on(“click”,function(){});

Advanced usage and scenario (a row is dynamically added to a table with multiple rows. If you want to bind a click event to the newly added row)

$(“#table”).on(“click”,”.row”,function(){});

At page initialization, You can bind a click event to the row with the row style in the table. Even if the row is added, the click event is added, that is, event Delegate. C #: The publisher publishes the click event to all subscribers that inherit the row class, which is the publish-subscriber mode.

3. Function Closure

We recommend that you use closures to encapsulate functions to avoid function coverage.

Var PublicHandle = (function () {/* private variables and functions */var _ privateVar; var _ getName = function (){}; /* external interface */return {verifyName: function () {}, getName: function (){}}});

Several Basic jquery knowledge, combined with front-end open tasks, will become more and more proficient in js.

Back to Top CSS Learning and Skills

The main focus of CSS learning is to read more and learn other people's existing examples. Let's see how the layout is made, how to write CSS is standard, and there are a lot of ready-made resources on the Internet, such as the W3CSchool front-end network. Mobile development frameworks such as Agile Ratchet Junior.

The Framework provides many functions that can be used directly. Understanding one of the frameworks, CSS, and JS makes front-end learning faster. Of course, it takes time.

Back to Top code optimization

Having mastered the basic knowledge, we have to move forward to the higher-level code and performance optimization aspects. There are a lot of browser optimization guidance on the Internet. The following comments refer to the blog in milliseconds, best practices for front-end web page performance. Best practices I quoted 35 golden laws from the yahoo front-end performance team. Click here. The following are some of the principles I understand.

Webpage content

• Reduces the number of http requests
• Avoid page Jump
• Reduce the number of DOM elements
• Avoid 404

Server

• Gzip compressed file
• Avoid empty image src

Cookie

• Reduce Cookie size

CSS

• Pin the style sheet to the top
• Avoid CSS expressions

Javascript

• Bottom up the script
• Use external cirpt and CSS files
• Simplified Javascript and CSS
• Remove repeated scripts
• Reduce DOM access

 

Webpage content reduces the number of http requests

80% of the response time is spent on downloading webpage content (images, stylesheets, javascripts, scripts, flash, etc ).Reduce the number of requestsIs the Key to shortening the response time! You can simplify the page design to reduce the number of requests, but the following tips can be used for a large number of pages.　　　　　　　　

1.Merge files: There are many ready-made tools that can help you combine multiple script files into one file and combine multiple style sheet files into one file to reduce the number of file downloads.

2.CSS Sprites: Combine multiple images into one image, and use CSS to control where the image is displayed. Let's look at a familiar Sprites instance.

Douban puts his icons together, and then we can see how he controls

.app-icon-read {    background-position: 0 0;}.app-icon {    background: url("/pics/app/app_icons_50_5.jpg") no-repeat scroll 0 0 transparent;    border-radius: 10px 10px 10px 10px;    box-shadow: 1px 1px 2px #999999;    display: inline-block;    height: 50px;    width: 50px;}

3. BASE64 encoding icon: The image is embedded into the webpage text using the encoded string. For example, the display effect of the inline image below is a checkbox.

.sample-inline-png {    padding-left: 20px;    background: white url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABlBMVEUAAAD///+l2Z/dAAAAM0lEQVR4nGP4/5/h/1+G/58ZDrAz3D/McH8yw83NDDeNGe4Ug9C9zwz3gVLMDA/A6P9/AFGGFyjOXZtQAAAAAElFTkSuQmCC') no-repeat scroll left top;}

We can see that there is a long string of base64 encoded images, and online generation tools are available. Base64 for online image Conversion

Reduce the number of DOM elements

Too many elements in a webpage impose a heavy burden on Webpage loading and script execution. The loading speed of 500 and 5000 elements varies greatly. If you want to know how many elements are in your webpage, you can use a simple command in your browser to figure out,

document.getElementsByTagName('*').length

Avoid 404

We are no stranger to 404, which means that no resources are found on the server. We should pay special attention not to mention 404 of the cases on the webpage resources we provide, the client sends a request but the server returns a useless result, wasting time. What's worse, we need to load an external script on the webpage, and a 404 error is returned, which not only blocks the download of other scripts, but also downloads the content (404) the client will use it as Javascript for parsing.

Server Gzip compressed Transfer File

Gzip can usually reduce the page content by 70%, including scripts, style sheets, images, and other files. Gzip is more efficient than deflate, and mainstream servers have corresponding compression support modules. IIS has built-in Static Compression and Dynamic Compression modules. For details about how to prepare them, see Enable HTTP Compression of Static Content (IIS 7) and Enable HTTP Compression of Dynamic Content (IIS 7 ).

It is worth noting that the PDF file can be removed from the type to be compressed, because the PDF file itself has been compressed, gzip has little effect on it, and will waste the CPU.

Avoid empty image src

Empty image src will still send requests from the browser to the server, which is a waste of time and resources of the server. Especially when your website is visited by many people every day, the damage caused by such blank requests cannot be ignored. The implementation of the browser is also based on RFC 3986-Uniform Resource Identifiers standard. The empty src is defined as the current page. So pay attention to whether such code exists in our webpage.

straight HTML< img src=”">JavaScriptvar img = new Image();img.src = “”;

Reduce Cookie size

Cookies are used for authentication or personalized settings, and their information is contained in the http packet header. We should pay attention to the following points for cookies to improve the request response speed,

• Remove unnecessary cookies.
• Minimize the cookie size
• Pay attention to the domain level set by the cookie. do not affect sub-domain unless necessary.
• Set an appropriate expiration time. A long expiration time can increase the response speed.

CSS sets the style sheet to the top

Placing the style sheet (css) in the HEAD of a webpage will make the webpageAppearanceThe loading speed is faster, because this allows the browser to gradually load the content of the web page that will be downloaded. This is especially important for webpages with a large number of contents. users do not have to wait on a white screen until they can read the downloaded content first.

If you place the style sheet at the bottom, the browser will refuse to render the Downloaded web page, because most browsers try to avoid re-painting during implementation, and the content in the style sheet is the key information for drawing the web page, sorry for the audience before downloading it.

Avoid CSS expressions

CSS expressions can dynamically set CSS attributes.IE5-IE8Supported,Expressions in other browsers are ignored.. For example, the following expression sets different background colors at different times.

background-color: expression( (new Date()).getHours()%2  "#B8D4FF" : "#F08A00" );

The problem with CSS expressions is that they are computed more times than we think, not only when the page is drawn or the size is changed, even when we scroll the screen or move the mouse, we still try to avoid the performance loss caused by improper use. If you want to achieve similar results, we can do it through a simple script.

Javascript
Bottom up the script
HTTP/1.1 specification suggests that the browser should not have more than two parallel download connections for the same hostname. Therefore, when downloading images from multiple domains, you can increase the number of parallel download connections. However, when the script is being downloaded, even different hostname browsers will not download other resources, because the browser will parse and execute the script after it is downloaded.
Therefore, we can consider the following methods to speed up scripts,

 

 
  
Set the script to the bottom so that the content required for web page rendering can be loaded and displayed to the user as soon as possible.
 
  
Currently, mainstream browsers support the defer keyword. You can specify the script to be executed after the file is loaded.

 
The async keyword is added to HTML5 to Allow Asynchronous execution of scripts.
Use external cirpt and CSS files
By using external Javascript and CSS files, these files can be cached by the browser and reused between different request content. At the same time, converting Javascript and CSS from inline to external also reduces the size of webpage content. The deciding factor for using external Javascript and CSS files is the Reuse Rate of these external files. If a user visits different pages of the same page or can reuse Scripts Multiple times while browsing our pages, therefore, the form of external files can bring you great benefits. However, for pages that users normally access only once, such as the microsoft.com homepage, inline javascript and css can provide higher efficiency.
Simplified Javascript and CSS
Streamlining is to remove all spaces and comments in Javascript or CSS. There are many tools to help us streamline the process. For details, refer to the following,
JS compressors:

 

 
  
Packer
 
  
JSMin
 
  
Closure compiler
 
  
YUICompressor (also does CSS)
 
  
AjaxMin (also does CSS)

 
CSS compressors:

 

 
  
CSSTidy
 
  
Minify
 
  
YUICompressor (also does JS)
 
  
AjaxMin (also does JS)
 
  
CSSCompressor

 
A good tool for integration with VS is as follows.

 

 
  
YUICompressor-compilation integration, included in NuGet.
 
  
AjaxMin-compilation and integration

 
Remove repeated scripts
Repeated scripts not only waste the download time of the browser, but also the parsing and execution time. A unified script management module is generally used to avoid the introduction of repeated scripts. This not only avoids the introduction of repeated scripts, but also takes into account script dependency management and version management.
Reduce DOM access
Accessing DOM elements through Javascript is not as fast as we think, and webpages with many elements are particularly slow. for accessing DOM through Javascript, pay attention

 

 
  
Cache accessed Elements
 
  
Offline updates the node and adds the DOM Tree.
 
  
Avoid using Javascript to fix layout

 

 
Back to Top Summary
After this period of front-end learning, I deeply realized that the front-end is actually similar to the back-end. During the learning process, you can make an analogy. At the beginning of the learning, you can complete the functions. When the code is skilled, you need to know the content of code optimization, understand what code is good code, and why such writing is good code. This kind of knowledge process allows you to make progress faster, not just to implement functions.
Another point is sharing. Only by mastering the learned knowledge can you share the knowledge. This is also a process to help you improve your knowledge.
Maybe you will think that I do not need to have a deep understanding of the front-end, but when do you need to work on the front-end! Do a Good Job of knowledge reserve in advance to keep a tireless mind for knowledge. Isn't it better to keep it unchanged? What do you say?
　　
If you believe that reading this blog has some benefits, click 【Recommendation] Button.
If you want to discover my new blog more easily, click 【Follow me].
Because my enthusiasm for writing is inseparable from your support.
Thank you for reading this article. If you are interested in the content of my blog, continue to follow up on my blog.