1. 文件优化
图片优化
一些修饰类图片可用 CSS 代替
将多个图标文件整合到一张图片中 (CSS Sprite)
选择正确的图片格式:
gif 无损压缩, 适合 logo, 线条等小型简单图像
jpeg 适合照片, 渐变图像
PNG-8 相对于 GIF 来讲有对 alpha 透明通道的支持, PNG-24 会比 JPEG,GIF,PNG-8 占用更多的存储空间
svg 适合简单的平面矢量形状, 复杂的渲染时需要较多计算.
计算图片大小
对于一张 100 _ 100 像素的图片来说, 图像上有 10000 个像素点, 如果每个像素的值是 RGBA 存储的话, 那么也就是说每个像素有 4 个通道, 每个通道 1 个字节 (8 位 = 1 个字节), 所以该图片大小大概为 39KB(10000 _ 1 * 4 / 1024).
其他文件优化
静态资源使用 CDN 加载
重要的 CSS 文件放 head 中, 其他可以放底部或动态加载
将耗时的 JS 代码使用 web Workers http://www.runoob.com/html/html5-webworkers.html 执行
<script > 标签
放在底部, 避免阻塞渲染
动态脚本加载, 向 DOM 中插入 < script > 标签
给标签加上 defer 或 async
defer , 表示该文件会并行下载, 但是会放到 HTML 解析完成后顺序执行.
没有任何依赖的 JS 文件可以加上 async, 表示加载和渲染后续文档元素的过程将和 JS 文件的加载与执行并行无序进行.
2. 懒执行, 懒加载, 预加载, 预渲染, DNS 预解析
懒执行 | 将某些逻辑延迟到使用时再计算, 可用于首屏优化 | 定时器,事件触发 |
懒加载 https://www.jianshu.com/p/4876a4fe7731 | 将不关键的资源延后加载。 | 定时器,事件触发,可视区 |
预加载 | < link rel="preload" href="http://example.com" /> 动态加载,Ajax | |
预渲染 | < link rel="prerender" href="//yuchengkai.cn" /> | |
DNS 预解析 | < link rel="dns-prefetch" href="//yuchengkai.cn" /> | |
服务器渲染 |
打开或关闭 DNS 预解析:
在服务器端发送 X-DNS-Prefetch-Control 报头
来源: https://www.cnblogs.com/mthz/p/web7.html