图片优化、Html优化、CSS优化、js优化、页面结构优化
- 图片优化
- 图片类型选择
- PNG 适合纯色透明,如做图标
- JPEG 适合色彩丰富的图片,如滚动图
- GIF 动态图片,某些动态图
- Webp 适合图形和半透明图像
- 图片压缩
- 压缩png node-pngquant-native
- 压缩 jpg jpetean
- 压缩gif Gifsicle
- 图片类型选择
- 优化策略
- 图片尺寸随网络环境变化,通过在URl后面加不同参数改变
- Web Font代替图片
- 图片服务器自动优化,根据在url增加参数,使得服务器自动生成不同格式,大小,质量的图片
- Data url代替图片
- 使用Image Spriting (雪碧图),精灵图
- 图片懒加载
- 响应式图片
- Javascript绑定事件检测窗口大小
- Css媒体查询 @media
- Img 标签的srcset属性
- HTML优化
- 内容优化
- 减少无语义化代码
- 删除http或https的协议头
- 删除空格、换行符和多余的注释
- 省略沉余标签和属性
- 使用相对路径的URL
- 格式优化
- 减少HTML的嵌套
- 减少DOM节点数
- CSS样式文件链接尽量放在头部,body之前,减少页面重排次数。CSS加载不会阻塞dom树的构建,但是会阻塞页面渲染和js执行
- Js引用放在底部,防止js的加载、解析、执行阻塞了页面后续元素的正常渲染
- 增加首屏必要的CSS和JS,直接内联在HTML页面中,这样做首屏可以快速显示,相对减少用户对页面加载等待的过程,因为白屏时间过长对用户体验不友好
- 内容优化
- CSS优化
- 谨慎使用expensive属性,如:nth-child伪类以及position:fixed定位
- 尽量减少样式层级数。最好不要超过三层
- 尽量避免使用占用过多CPU的内存的属性,如:text-indnt: -99999px
- 尽量避免使用耗电大的属性,如: css3 3d transforms、css3 transtitions、 opacity
- 尽量避免使用css表达式
- 尽量避免使用通配符选择器
- 尽量避免使用类正则的属性选择器
- 使用外链的CSS,尽量避免使用@import
- 部署CDN,如字体文件
- 字体以base64形式保存在CSS中,并存在localstorage
- 外网文件资源使用托管在国内
- 动画优化
- 避免同时动画
- 延迟动画初始化
- 结合svg
- 精简css代码
- 使用缩写语句
- 删除不必要的零和单位,分号,空格和注释,减少样式表的大小
- Javascript优化
- 原则:当需要时才优化,考虑可维护性
- 合理使用缓存,缓存列表长度,使用可缓存的Ajax
- Js动画优化
- 避免添加大量js动画,尽量使用CSS3动画
- 尽量使用Canvas动画
- 合理使用requestAnimationFrame动画代替setTimeout、setINterval
- requestAnimationFrame可以确保在正常的时间进行渲染,setTimeout和setInterval无法保证回调函数的执行实际,
- Js语法优化
- 尽量使用id选择器
- 避免使用eval
- Js函数尽可能保持简洁
- 使用节流函数
- 使用事件委托
- 使用缓存
- Cookie:随着http一起发送,弥补了http协议无状态,通常与用户个人相关,如登录状态等等,可以给cookie设置有效时间。
- sessionStorage:常用于单页应用页面之间的传值
- indexedDB 可用于客户端存储大量结构化数据,在没有网络连接的情况下使用(石墨文档),常将沉余、少修改,但经常访问的数据存于次,避免随时从服务器获取数据
- LocalStorage:本地永久存储,只能手动清除,可存储一些css文件js文件,一些不常变更的数据
- 页面优化
- 减少重排重绘制
- CSS
- 避免多重嵌套和使用css表达式
- 使用绝对定位,使得动画元素脱离文档流
- 避免使用table布局(需要资源加载完才显示,不符合语义化)
- 图片最好先设置宽高,避免图片加载完就重排
- 简化浏览器不必要任务,减少页面重新布局
- 使用Viewport设置屏幕缩放级别
- 避免频繁设置样式,把新的Style属性设置完后,进行一次性更改
- 避免使用引起回流重绘的属性,最好把相应的变量缓存起来
- Javascript
- 避免频繁操作DOM,可以把多次合并后,一次性批量处理
- 减少绘制区域范围
- 可以使用fragment,尽量不要在页面DOM树里面直接操作
- 使用如Vue,react Angular等框架,通过虚拟Dom技术和diff算法简化和减少Dom操作
- CSS
- 控制DOM大小,减少查找节点和元素绑定事件冒泡和捕获的执行时间
- 合理的业务逻辑布局
- 延时加载即将呈现的内容(懒加载)
- 减少重排重绘制
浪波激泥