Optimized solution for front-end performance

The solution I saw on the public account is here. I usually use the performance of the browser to check the performance.

One: webapck optimization and open gzip compression

 1.babel-loader用 include 或 exclude 来帮我们避免不必要的转译,不转译node_moudules中的js文件
    其次在缓存当前转译的js文件,设置loader: 'babel-loader?cacheDirectory=true'
    2.文件采用按需加载等等
    3.具体的做法非常简单,只需要你在你的 request headers 中加上这么一句:
    accept-encoding:gzip
    4.图片优化,采用svg图片或者字体图标
    5.浏览器缓存机制,它又分为强缓存和协商缓存

Two: local storage-from Cookie to Web Storage, IndexedDB
explain the differences, advantages and disadvantages of SessionStorage and localStorage and cookie
Three: code optimization

 1.事件代理
    2.事件的节流和防抖
    3.页面的回流和重绘
    4.EventLoop事件循环机制
    5.代码优化等等

I can't find the link to the original text, let me put it first, invade and delete it.

Published 91 original articles · Like 82 · Visits 10,000+

Guess you like

Origin blog.csdn.net/qq_42893625/article/details/105040754