页面加载优化的方法

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">

4.缓存的合理利用

上一篇下一篇

猜你喜欢

热点阅读