页面加载优化的方法
2021-10-18 本文已影响0人
娜娜的简书
1.只请求当前需要的资源
执行方法有:
1.异步加载;
2.懒加载;
2.缩减资源体积
执行方法有:
1.打包压缩:webpack;
2.图片格式的优化,webp格式。推荐一个好的压缩图片工具,线上直接压缩就可以:https://tinypng.com/;
3.压缩。根据屏幕分辨率展示不同分辨率的图片(如果移动和pc同时做,需要适配,如果只是移动端,屏幕差不多,用普通的375px就可以);
3.时序优化
1.可以用promise.all把一些逻辑业务不相关的请求并行请求。
2.prerender, 而prerender不仅会加载资源,还会解执行页面,进行预渲染
<link rel="prerender" href="//example.com/next-page.html">
3.preload:浏览器会在遇到如下link标签时,立刻开始下载main.js(不阻塞 non-render-blocking ),并放在内存中,但不会执行其中的JS语句。只有当遇到script标签加载的也是main.js的时候,浏览器才会直接将预先加载的JS执行掉。
<link rel="preload" href="fonts/cicle_fina-webfont.eot" as="font" type="application/vnd.ms-fontobject" crossorigin="anonymous">