1.DNS预解析
DNS解析也是需要时间的，通过DNS预解析可以预先获得域名对应的Ip
2 缓存策略的选择
缓存一般分为强缓存和协商缓存。良好的缓存方案可以避免资源的重复加载，提高网页整体的加载速度。
强缓存表示在缓存期间不需要再次请求。一般通过两种响应头实现：
Expires（http1.0）和Cache-Control（http1.1）
原理是通过设置过期时间，来避免在这个时间内对这个资源的再次请求
如果缓存过期了，可以通过协商缓存来解决。
ETag 是协商缓存的一种方式，类似于文件指纹。
选择合适的缓存策略：
对某些不需要的缓存的资源使用Cache-Control： no-store，表示该资源不需要缓存
对于频繁变动的资源，使用Cache-Control： no-cache 配合 Etag
表示该资源已经被缓存，但是每次都会发送请求询问资源是否更新
3.使用Http 2.0
http2.0引入了多路复用，能让多个请求同时使用一个TCP链接，极大的加快了网页的加载速度
4.预加载、与渲染、懒加载和懒执行。
5.文件优化
图片优化
对于图片的优化有两个思路：
减少像素点
减少每个像素点能够使用的颜色
-图片加载的优化
不用图片，很多基础的修饰类图片其实是可以使用CSS代替
对于移动端来说，屏幕宽度就那么点，完全没有必要去加载原图浪费带宽。一般图片都使用CDN 加载，可以计算出适配屏幕的宽度，然后去请求相应裁剪好的图片
小图使用base64格式
将多个图片整合（雪碧图）
文件格式的选择
图片的格式有JPEG、PNG、WebP、SVG
对于图标类的图，优先使用svg
对于内容图，优先考虑WebP。因为WebP具有更好的图像数据算法，而且体积小，更拥有肉眼识别无差异的图像质量。尽量不适用PNG8，色位太低。PNG24压缩率低。
小图使用PNG，照片使用JPEG
6.其他文件优化
CSS 文件放在 head 中
服务端开启文件压缩功能
将 script 标签放在 body 底部，因为 JS文件执行会阻塞渲染。当然也可以把
script 标签放在任意位置然后加上 defer ，表示该文件会并行下载，但是会放到
HTML 解析完成后顺序执行。对于没有任何依赖的 JS 文件可以加上 async ，表示加 载和渲染后续文档元素的过程将和 JS 文件的加载与执行并行无序进行。 执行 JS 代码 过程会卡住渲染，对于需要很多时间计算的代码
可以考虑使用Webworker 。 Webworker 可以让我们另开一个线程执行脚本而不影响渲 染。
7.其他
使用webpack优化项目
对于 Webpack4 ，打包项目使用production 模式，这样会自动开启代码压缩
使用 ES6 模块来开启 tree shaking ，这个技术可以移除没有使用的代码
优化图片，对于小图可以使用 base64 的方式写入文件中
按照路由拆分代码，实现按需加载
给打包出来的文件名添加哈希，实现浏览器缓存文件
原文地址： https://blog.csdn.net/weixin_45514320/article/details/106138841