Tag:First screen

  • From “wait” to “second open” to “direct drive”, what makes the idle fish community hate to meet each other?


    Introduction:Let me fork my waist Author: idle FISH technique – Song Chen background The performance of idle fish front-end pages is often talked about,All jump, must jump fishSome pages even need to jump four or five times to open. Recently, we have made some systematic optimization on the idle fish front-end page. Because the front-end […]

  • Code splitting-01 of Vue package optimization


    preface In the era of http1, a common performance optimization is to merge the number of HTTP requests. Usually, we will merge a lot of JS code together. However, if a JS package is very large, it will be a bit overkill for performance improvement. If we split all the code reasonably, split the first […]

  • Code splitting-02 of Vue package optimization


    prefaceI used vuecli to make a blog, which is a single page project with about ten routes. Package it with NPM run build directly, and there is a huge JS file of 1m. clipboard.png Try to mount it to the server firstBoy, it seems that half a century has passed since the loading time clipboard.png […]

  • Code splitting-05 of Vue package optimization


    Recently, I found that the technology of ecui + 441 was very poor. Is this tolerable? Start optimization decisively. Here’s how I packed one1.44MBAfter the project becomes packaged, only0.42MB, performance improvement70%Yes. Optimization process get ready: vue-cliProvides a very convenient command to view the volume of code after packaging, just add one after the normal packing […]

  • Code splitting-06 of Vue package optimization


    When using Vue cli to deploy the production package, it is found that the resource package is very large vendor.js Up to 1.4m, which is already very big, and will affect the first screen loading. So, how to optimize? 1. Components are loaded on demandThis is the first point that can be optimized. If the […]

  • In depth exploration of IOS startup speed optimization


        introduce The startup time of an app is an important indicator to reflect its performance. The faster the startup time is, the shorter the waiting time of users will be. In order to improve the user experience, large factory applications will even achieve “millisecond must be investigated”. We divide app startup methods into: […]

  • Anti chattering and throttling function


    The problem of anti shake function is solved Prevent multiple communication requests caused by multiple output click events such as misoperation. The anti shake code is as follows: const debounce = (fn, delay = 1000) => { let timer = null; return (…args) => { console.log (`clear timer:`, this.timer ); // you must write this […]

  • Front end performance optimization guide


    Author: Joway youngWarehouse: GitHubBlog: nuggets, Sina, Zhihu, Jianshu, headlines, CSDNOfficial account: UzeroContact me: I will pay attention to the official account.WeChatYo!Special statement: no official account can be reproduced or plagiarized without authorization. Otherwise, it can be resolved through legal channels. If you need to reprint or open the public list, you can contact me. I […]

  • Build exquisite angular template project


    Based on the web pack, an angular development framework for PC and mobile terminals is built, which provides a simple, easy to learn and full-featured learning course for the beginners of angular. Best angular practice AOT compilation to speed up JS execution Lazy loading of routes to speed up rendering of the first screen Tree […]

  • IOS performance optimization


    1、 App launch optimization 1. App startup can be divided into two types Cold launch: start app from scratch Warm launch: the app is already in memory and in the background. Click the icon again to start the app The optimization of APP startup time is mainly for cold startup By adding environment variables, you […]

  • Rax PWA – quickly upgrade the web experience


    Rax PWA – quickly upgrade the web experience Rax PWA, a rax 1. X-based PWA solution. It is easy to build a full-featured PWA through simple configuration, providing users with web applications comparable to the native app experience. With the increase of mobile users, it is very important to optimize the user experience on mobile […]

  • Rax Taobao double 11 double 12 actual battle


    Rax is a universal JavaScript library with a largely React-compatible API. If you use React, you already know how to use Rax. Rax introduction reference: http://react-china.org/t/rax-rax/11552 Upper system Scope of ability On top of the core framework of rax, there is a basic system to support the business. API, basic simple tag and basic UI […]