1.图片优化
1)大小优化:通过减少像素点和每个像素点能够显示的颜色缩小图片大小
2)加载优化:用CSS代替修饰类的图片,用CDN加载图片,计算出适配屏幕的宽度去请求相应剪裁好的图片而不是直接使用原图浪费宽带,小图用base64,使用精灵图,选择正确的图片格式,比如小图使用png,图标尽量使用svg代替,照片使用jpeg

2.DNS预解析
DNS解析也是需要时间的,可以通过预解析的方式先获得域名对用的ip:

<link rel="dns-prefetch" href="//blog.poetries.top"> 

3.节流
节流是将多次执行的函数,每隔一段时间再执行,比如滚动过程中并不希望一直发送请求而是希望隔一段时间再发送

4.防抖
防抖是多次触发事件,但在期望的事件内,执行函数只执行一次,比如点击一个按钮会发送一次请求,但不希望每次点击都会发送请求,而是希望当用户一段时间内没有再次点击的情况下再去发送请求

5.预加载
在开发中可能有些资源不需要马上用到,但希望尽早获取,就可以使用预加载,预加载其实就是强制浏览器请求资源,但是不会阻塞onload事件

<link rel="preload" href="http://blog.poetries.top"> 

预加载可以一定程度上降低首屏加载时间,因为可以将一些不影响首屏但重要的文件延后加载

6.预渲染

<link rel="prerender" href="http://blog.poetries.top">

可以通过预渲染将下载的⽂件预先在后台渲染,预渲染虽然可以提⾼⻚⾯的加载速度,但是要确保该⻚⾯⼤概率会被⽤户打开,不然就浪费资源去渲染了。

7.懒执行
就是将逻辑延迟到使用的时候在计算,可以用于首屏优化,对于某些耗时逻辑不需要再首屏就使用的,就可以使用懒执行,懒执行需要唤醒,一般可以通过定时器或者事件的调用来唤醒。

8.懒加载
懒加载就是将不关键的资源延后加载
原理是只加载自定义区域内需要加载的东西,自定义区域通常是可视区域,也可以是即将进入的可视区域,比如设置图片标签src属性为一张占位图,将真实的图片资源放入一个自定义属性中,当进入自定义区域的时候,就将自定义图片属性替换为src属性。这样图片就会去下载资源,实现图片懒加载。懒加载对其他资源也适用,比如到达可视区域才播放视频。

9.CDN
CDN内容分发网络,其的原理是尽可能的在各个地方服务节点缓存数据,用户向根服务器发送请求的时候,请求会被调度到最接近用户的服务节点,直接由这个服务节点快速响应,从而使用户可以更快的加载资源。