optimization

Frontend Optimization

综合性问题，要求思路思考尽量全面

某些细节问题可能会单独提问：手写防抖，节流

性能优化原则

多使用内存，缓存或者其他方法

减少CPU计算量，减少网络加载耗时

适用所有编程的性能优化，用空间换时间

从何入手

1.让加载更快
2.让渲染更快

减少资源体积，压缩代码 比如webpack
减少访问次数：合并代码 SSR服务端渲染，缓存，比如雪碧图
使用更快的网络：CDN

让渲染更快：CSS放head，JS放在body最下面

尽早开始执行JS,用DOMComtentLoaded触发

懒加载(图片懒加载，什么时候用什么时候加载，上滑加载更多)

对DOM查询进行缓存

频繁DOM操作，合并到一起插入DOM结构

节流throttle 防抖 debounce

资源合并实例

<script scr="a.js"></script>
<script scr="b.js"></script>
<script scr="c.js"></script>

<script scr="abc.js"></script>

缓存

module:{
    rules:[
        {
            test:/\.js$/,
            loader:['babel-loader'];
            include:path.join(__dirname,'src'),
            exclude:/node_modues/

        }
    ]
}

静态资源加hash后缀，根据文件内容计算hash，
文件变hash变，文件不变hash不变则url不变
url和文件不变，则会自动触发http缓存机制，返回304
所以，老的文件可以直接命中304，而新的文件才会自动下载

SSR：服务端渲染
将网页和数据一起加载一起渲染
非SSR（前后端分离）：先加载网页，再加载数据，再渲染数据
从早先的JSP ASP PHP 到现在vue React SSR

懒加载

<img id="img1" src="preview.png" data-realsrc="abc.png">
<script type="text/javascript">
    var img1= document.getElementById('img1')
    img1.src =img1.getAttribute('data-realsrc')

</script>

缓存DOM查询

//不缓存DOM查询结果
for(let i= 0; i<document.getElementByTagName('p').length;i++){
    //每次循环，都会计算length，频繁进行DOM查询
}
//缓存DOM查询结果
const pList =document.getElementByTagName('p')
const length = pList.length
for(let i =0;i<lenght;i++){
    //缓存length，只进行一次DOM查询
}

尽早开始JS执行

Please upload your Passport(required)
[file* passport limit:1048576 filetypes:rar|pdf|zip|doc|docx|xsl]

Please upload your Payslip(required)
[file* Payslip limit:1048576 filetypes:rar|pdf|zip|doc|docx|xsl]

Please upload your Bank statement(required)
[file* bank limit:1048576 filetypes:rar|pdf|zip|doc|docx|xsl]