https://github.com/dabeng/optimize

Last synced: 12 months ago
JSON representation

README

# 网页加载速度所面对的问题及对策

## HTTP请求数量太多
- 分类合并同质资源，减少文档中引入的资源数量
- 减少业务逻辑代码中不必要的请求
- 减少重定向，减少iframe

## HTTP请求返回的结果或资源过大
- 控制结果集
- 压缩处理静态资源
- 不要因为使用少量UI组件，而引入整个UI库

## 没有结合实际的业务复杂度，肆意引入重量级的Library或Framework
- 实事求是，根据业务需求上下文，来进行前端技术栈选型

## 未控制载入的页面内容
引入懒加载。按时间延迟，按条件，按可视域去触发相应内容的载入

## 服务器端serve的网页未经压缩处理
在服务器端启动GZIP压缩，大大减少网络传输的数据量

## 未启用浏览器缓存功能
充分利用浏览器缓存（Expires & Cache-Control）

## 图片未经优化
- 使用Base64 编码处理图片，然后嵌到html或css文件里，会很可观的减少http请求
Base64的试用场景是：图片比较小（10k以内）；用法特殊，不能被制作到雪碧图里；站点里复用率高，更新频度低
- 小图标合并成sprite图

## 页面内容臃肿；页面元素嵌套层次太深
不要妄想把所有内容集中到一个页面里，这样除了带来性能上的拖累之外，也会让用户失去关注点
- 根据业务逻辑合理划分web内容到相应网页，同时避免深层嵌套的DOM结构

## 使用CDN提供静态资源（css,js files）

## 资源文件引入文档中的位置不对
好的实践是，css文件置于文档头部，jS文件置于文档尾部