Basic Data Structures and Algorithms
Now there are two different JSONs, which are more complicated. You can refer to the JSON returned in the DEMO here. To compare their differences, apart from using ready-made tools such as beyond compare, if we do not have this tool installed on our machine, how can we solve it faster? As a programmer, it is not feasible to compare one by one, and there will be no gain after the comparison. I will put it into Excel (if your machine doesn't even have this, then ignore me), sort it first, and then use 二分法it to quickly locate the different JSON attributes, even if it is big data with 1024 fields, it will take up to 10 times location can be found. In fact, the algorithm is not to give you a problem and then memorize the content, but when you encounter the corresponding situation, you can think of using this method to solve it.
HTML/CSS
DOCTYPE
I once encountered such a problem in a project. It is good to open the page with other browsers, except that IE8 is surprisingly slow to open. I noticed that IE8 is slow to open but the CPU consumption is not high, but the webpage is blank and has not been rendered for a long time, which can rule out the problem of JS algorithm. After careful study of the code, I found that some people put some tags such as script and linkDOCTYPE in the front. DOCTYPEIt is used to tell the browser to interpret a set of rules for the entire document. It must be placed at the top of the HTML section. If there is a script tag first, it means that the browser has already started to explain, and it DOCTYPEis meaningless to have it later. Put it DOCTYPEat the top of the HTML section, and the problem mentioned at the beginning is solved.
Block Elements/Inline Elements, Box Model
HTML/CSS has a feature that it will not report an error, only the result rendered by the browser does not conform to the logic of the design, so it is difficult to find the answer on the Internet when encountering a problem. So to write HTML/CSS well, you must first understand some of the basic principles. When it comes to HTML layout, 块状元素/内联元素I think the relationship between them is the most basic. The extension is CSS 盒子模型. In addition, the nested combination relationship of elements in HTML is also very important. Many attributes in CSS, such as position and z-index, are based on the parent object. It is meaningless to talk about CSS apart from HTML. In other words, to 在结构（Structure）之下谈论表现（Presentation）. Fully understand these basics in HTML/CSS, and then formulate a set of applicable specifications, which will definitely improve the team's work efficiency and achieve more with less effort.
What HTML/CSS can do, no need to hand it over to javascript
A major improvement in HTML5 is that form items have more practical attributes such as required, date controls, etc., but some very basic usages of forms should not be forgotten. I have encountered someone who wants to select the radio when they want to click the text next to the radio, so they use jQuery to select and write events. In fact, this function can be achieved only by including the input with a label tag). There are also some examples, such as IE's conditional comments, CSS hacks, and I have seen these functions implemented in javascript in the past.
if(isIE() && IE.Verson == 7){//这些是人有封装好的方法$(".something").css({width:"700px"})}
Such code will only waste browser performance. HTML/CSS就能做到的事情，无必要把它交给javascript去做.
HTTP protocol
Now many projects use ajax to submit JSON to the background, the original HTTP submission is relatively rare (at least in my project), but we can't forget to set the form's method and action's original submission method , because this is the prototype of form submission, which helps us understand the HTTP protocol, such as the difference between POST and GET, and how data arrives from the front end to the back end, and how it returns from the back end to the front end. When you understand this, you can better communicate with the backend, and you can locate and solve data problems quickly.
javascript
scope
Having learned several programming languages, the issue of scope is a commonplace. In javascript, there is the basic knowledge of function scope. For this, the Definitive Guide to JavaScript is recommended. At that time, I read the Chinese and then read the English, and after reading the English, I looked for the diagram, and then I felt that I understood this point clearly.
JQuery
Selector
In an HTML DOM tree, I want to do a more complex selection of elements, the parent elements of the neighbors of elements with a certain class name that do not contain some text... Then how to do it? Write a very complex jQueryselector? stop. The principle of jquery selector is to use regular expressions to decompose your selector string (this part is called Sizzle), and then use some built-in traversal functions such as prev, next, etc. (in fact, these functions are also based on the methods provided by DOM) to find the element you want. I will not blindly conduct Sizzle's semantic ambiguity test, but will use prev, next, etc. to find my own elements according to my own logic; and I will try to avoid using complex selectors as much as possible. (The previous scheme was also mentioned), using ID for a single element and a class for multiple elements, which is absolutely efficient and accurate.