主要内容为下面几大类:移动端、图片、JavaScript、css、html、页面内容、服务器、cookie。
移动端性能优化:
保持单个文件小于25KB
移动网站页面要求下载资源,如果文件过大,会大大减慢页面加载速度。打包内容为分段multipart文档
由于HTTP请求每一次都会执行三次握手,每次握手都会消耗较多的时间。使用multipart,实现了多文件同时上传,可用一个HTTP请求获取多个组件。
图片优化:
CSS sprites
俗称 CSS 精灵、雪碧图,雪花图等。即将多张小图片合并成一张图片,达到减少 HTTP 请求的一种解决方案。可通过 CSS中的background 属性访问图片内容。这种方案同时还可以减少图片总字节数,节省命名词汇量。压缩图片
图片占据资源极大,因此尽量避免使用多余的图片,使用时选择最合适的格式大小,然后使用智图压缩,同时在代码中用Srcset来按需显示。(切记不要过分压缩 可能会导致图片迷糊)尽量避免重设图片大小
重设图片大小是指在页面、CSS、JavaScript等中多次重置图片大小,多次重设图片大小会引发图片的多次重绘,影响性能。图片尽量避免使用DataURL
DataURL图片没有使用图片的压缩算法文件会变大,并且要解码后再渲染,加载慢耗时长。图片懒加载
图片对页面加载速度影响非常大。比如,当一个页面内容比较多的时候,加载速度就会大大的降低,极大的影响到用户体验 。更有甚者,一个页面可能会有几百个图片,但是页面上仅仅只显示前几张图片,那其他的图片是否可以晚点加载用于提高性能。具体可见 >>