网站性能优化整理_html/css
2020-11-27
来源：华拓网
提取公用CSS，模块化，其他的合并。Javascript也一样(可以避免页面加载阻塞)。
对页面上的小图标，背景等图片进行合并，减少请求次数。
2.减少页面体积
压缩JS
3.CSS&HTML的重构
CSS选择器不能太长，禁止使用ID选择器和!important
4.延迟加载
通常应用于图片比较多的网页，如果一个页面图片比较多，且页面高度或宽度有好几屏，页面初次加载时，只显示可视区域的图片，当页面滚动的时候，图片进入了可视区域再进行加载，这样可以显著的提高页面的加载速度，更少的图片并发请求数也可以减轻服务器的压力。如果用户仅仅在首屏停留，还可以节省流量。如果TAB中的图片较多，也同样可以应用于TAB中，当触发TAB时再进行图片的加载。
原理：将图片的先用一个1*1的占位图片代替(如果占位图片能设置成真实图片的宽高是最好的)真实地址缓存在一个自定义的属性(lazy-src)中，
等到进入可视区(或距离可视区域一定范围)时，将占位图片的src换掉，真实图片开始加载。
| 优化方向 | 优化手段 |
| 请求数量 | 合并脚本和样式表，CSS Sprites，拆分初始化负载，划分主域 |
| 请求带宽 | 开启GZip，精简JavaScript，移除重复脚本，图像优化 |
| 缓存利用 | 使用CDN，使用外部JavaScript和CSS，添加Expires头，减少DNS查找，配置ETag，使AjaX可缓存 |
| 页面结构 | 将样式表放在顶部，将脚本放在底部，尽早刷新文档的输出 |
| 代码校验 | 避免CSS表达式，避免重定向 |