Front-end article-1

Address: http://www.open-open.com/solution/view/1435631238232

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 over the past six months will be a valuable asset in my life. This reminds me of the following: "on the road to growth, we should not set limits for ourselves. As long as we have the power to grow, you can constantly surpass yourself ". Next I will talk about the front-end learning process based on my own experiences.

JqueryBasic knowledge preparation

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 (one is the variable mentioned above that can read the function, and the other is to keep the value of these variables in the memory .)

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 interfaces */

Return {

Verifyname: function (){

},

Getname: function (){

}

}

});

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

CSSLearning 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? W3cschool ??? Frontend network. What is the mobile development framework like? 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.

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 ). Reducing the number of requests is 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 the specific display position of the entire image. 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;

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, expires /// + l2z/daaaam0leqvr4ngp4/5/h/1 + G/58zdraz3d/expires/a6p9/upload ') 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 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

Javascript

VaR IMG = new image ();

IMG. src = "";

Cookie

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

Pin the style sheet to the top

Placing the style sheet (CSS) in the head of a webpage will make the webpage appear faster, because this will allow the browser to gradually load the content of the downloaded webpage. 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 properties, which are supported in the IE5-IE8 and are ignored in other browsers. 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.

<HTML>

<Head>

</Head>

<Body>

<SCRIPT type = "text/JavaScript">

VaR currenttime = new date (). gethours ();

If (currenttime % 2 ){

If (document. Body ){

Document. Body. style. Background = "# b8d4ff ";

}

}

Else {

If (document. Body ){

Document. Body. style. Background = "# f08a00 ";

}

}

</SCRIPT>

</Body>

</Html>

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

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?

Jquery

 

Front-end article-1