页面加载优化的方法

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.缓存的合理利用

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 前端性能优化 一、请求响应优化 减少DNS查找:每次主机名的解析都需要一次网络往返,从而增加了请求的延迟时间同时还...
    大南瓜鸭阅读 386评论 0 0
  • css相关 1. 万能居中 1.margin: 0 auto;水平 2.text-align: center;水平...
    chaocc阅读 991评论 0 2
  • css相关 1. 万能居中 1.margin: 0 auto;水平2.text-align: center;水平3...
    宁_Yi阅读 3,392评论 2 39
  • DTD 介绍 DTD(Document Type Definition 文档类型定义)是一组机器可读的规则,它们定...
    lio_zero阅读 2,763评论 0 9
  • https://www.jianshu.com/p/769266edbd38 前言 经过艰苦卓绝的面试历程,终于拿...
    Clover园阅读 231评论 0 0