【2015-02-21】In the previous article, we introduced Grunt, which can help us automatically manage and run various JavaScript tasks. In the article before that, we introduced the front-end package manager Bower. In this article, we come to introduce Yeoman, a magical scaffold. Yeoman is developed by the Google team and a team of external contributors. Its goal is to create an easy-to-use workflow for developers through the packaging of Grunt (a command line tool for development task automation) and Bower (a package manager for front-end resources such as HTML, CSS, JavaScript, and images). Below I will briefly introduce this magical tool to everyone ...

【2015-02-18】In the previous article, we introduced the front-end package manager Bower. This time, we come to understand the front-end application development workflow tool Grunt. In the process of JavaScript development, we often encounter some repetitive tasks, such as checking if syntax is correct, compressing code, and merging files. In the past, we would choose different tools to complete different tasks, but this felt both complex and time-consuming. But now with Grunt, Grunt was invented precisely to solve these problems. It can help us automatically manage and run various JavaScript tasks, simplifying our workflow ...

【2015-02-17】Front-end development is indeed not the same as before. If we say that our past front-end development was in the "slash-and-burn" era, then current front-end development has undoubtedly entered the era of "factory production". In recent years, with the emergence of Node.js, many excellent front-end development management tools have appeared, which greatly facilitates our front-end development. Indeed Node.js is the best gift from God to our front-end development engineers. In the following articles, I will introduce some excellent tools needed in the front-end development process: Cmder, Bower, Grunt, Yeoman ...

【2015-02-16】Every programming language has its "pain points," and over time, its existing inefficient patterns also continue to develop. JavaScript presents some unique performance challenges, which are related to the way your code is organized. As web applications become more advanced and contain more and more JavaScript code, various patterns and anti-patterns gradually appear. To write more efficient code, please keep these programming practices in mind ...

【2015-02-14】Ajax is the foundation of high-performance JavaScript. It can make page loads faster by delaying the download of larger resource files. It passes data between the client and the server asynchronously, thereby avoiding batch downloading of page resources. it can even get resources for the entire page with just one HTTP request. Choosing appropriate transmission methods and most effective data formats can significantly improve the interaction experience between users and websites ...

【2015-02-11】There is a saying that makes sense: "If JavaScript runs for whole seconds, then it is very likely that you have done something wrong...", if the interface responds to user input within 100 milliseconds, users will think they are "directly manipulating objects in the interface". More than 100 milliseconds means users feel they have lost contact with the interface. JavaScript and user interface updates run in the same process, so only one thing can be handled at a time. This means that when JavaScript code is running, the user interface cannot respond to input, and vice versa. Efficiently managing the UI thread is to ensure that JavaScript cannot run for too long, lest it affect the user experience. Managing the running time of JavaScript is very important for the performance of Web applications ...

【2015-02-07】Like other programming languages, code writing and algorithms will affect the running time of JavaScript. Unlike other languages, JavaScript has limited available resources, so optimization techniques are more important. this study note mainly optimizes JavaScript performance from three aspects of JavaScript loops, conditional statements, and recursion ...

【2015-02-06】DOM is an abbreviation for Document Object Model. It is a language-independent application program interface for users to manipulate XML and HTML documents. In browsers, it mainly deals with HTML documents. In web applications, XML documents also often need to be retrieved. DOM API is used to access data in documents. John Hevatin once gave a pertinent metaphor in a speech, imagining DOM and JavaScript as islands respectively, they are directly connected by a toll bridge. Every time ECMAScript accesses DOM, it has to pass through this bridge and pay a "bridge fee". The more bridges passed, the more fees paid. Therefore, if you want to reduce costs, you have to cross the bridge less. Here we come to learn how to optimize this problem ...

【2015-02-05】There are four basic data storage locations in JavaScript: literals, variables, array elements, and object members. Like other languages, the storage location of data will greatly affect its reading speed ...

【2015-02-04】Front-end development is no longer the front-end development of a few years ago. It has entered the industrial era from the agricultural era. In recent years, many excellent MVVM frameworks in JavaScript have appeared. Today I compare the advantages and disadvantages of frameworks like Vue, Angular, Avalon ...