前端性能优化&&网站性能优化
加载优化:1、合并css、JavaScript
2、合并小图片,使用精灵图
3、缓存一切可缓存的资源
4、使用长cache
5、使用外联式引用css、JavaScript
6、压缩HTML、CSS、JavaScript
7、使用Gzip压缩内容
8、使用首屏加载
9、使用按需加载
10、使用滚屏加载
11、通过Media Query加载
12、增加loading进度条
13、减少cookie
14、避免重定向
15、异步加载第三方资源
图片优化:1、使用智图 http://zhitu.tencent.com/
2、使用css3、svg、iconfont代替图片
3、使用srcset
4、webP优于jpg
5、png8优于gif
6、首次加载不超过1014kb(基于3秒联通平均网速所能达到值)
7、图片不宽于640
css优化:1、css写在头部,JavaScript写在尾部或异步
2、不要让link、script、img、iframe等标签出现空的src和href
3、尽量避免重设图片大小
4、图片尽量避免使用dataUrl
5、尽量避免写标签属性
6、避免css表达式
7、清除空的css
8、正确使用display的属性
9、不滥用float
10、不滥用web字体
11、不声明过多的font-size
12、值为0的时候不需要任何单位
13、标准化各种浏览器的前缀
14、避免冗长的选择符
脚本优化:1、减少重绘和回流
2、缓存DOM选择与计算
3、尽量使用事件代理,避免批量绑定事件
4、尽量使用ID选择器
5、使用touchstart、touchend代替click
6、合理使用节流和防抖
7、避免不必要的跳转,合理取消浏览器默认事件
8、避免404
9、配置ETags
10、少用全局变量,尽量用局部变量
11、多个变量或常量合并声明
渲染优化:1、HTML使用viewport
2、减少DOM节点
3、尽量使用css3动画
4、合理使用requestAnimationFrame动画代替setTimeout
5、适当使用canvas动画
6、Touchmove、Scroll事件会导致多次渲染
7、使用css3 transitions、css3 3D transforms、Opacity、Canvas、WebGL、Video来触发GPU渲染
总结一下:
使用正确的盒子嵌套,避免空标签,空属性
避免冗长的选择器
标准化各种浏览器的前缀
使用精灵图,减少与服务器请求
避免使用标签属性
值为0的时候不需要带单位
尽量不要重设图片尺寸
webP优于jpg,png8优于gif
使用节流和防抖
使用预加载和懒加载,异步加载第三方资源
使用压缩工具,合并压缩HTML、css、JavaScript
使用长连接
减少cookie
使用事件委托
避免不必要的跳转,合理使用取消浏览器默认事件
少用全局变量,多用局部变量,多个变量或常量可以合并声明
合理使用requestAnimationFrame动画代替setTimeout
最新文章
- 在ASP.NET Core中实现一个Token base的身份认证
- yum综合梳理
- Windows和Windows Phone应用终于可以使用FFmpeg了
- [游戏模版15] Win32 飞机射击
- centos查看磁盘扇区大小等信息
- JavaScript基础---作用域,匿名函数和闭包【转】
- 看懂下面C++代码才说你理解了C++多态虚函数!
- 如何使用TestFlight进行App构建版本测试(转)
- MS SQL 数据库状态为SUSPECT(可疑)的处理方法
- 获取fastdfs所有文件
- utf-8 decode
- MySQL崩溃恢复与组提交
- Scala学习之路 (十)Scala的Actor
- jquery json 格式教程
- RabbitMQ--学习资源汇
- HDU 2191(多重背包转换为01背包来做)
- C 语言assert使用
- python 去除字符串的首末两端的空白字符
- JavaScript设计模式-4.继承和聚合
- Android控件——7种形式的Android Dialog使用举例(转载)
热门文章
- [NewLife.XCode]角色权限
- 大话设计模式Python实现-工厂方法模式
- D3力布图绘制--在曲线路径上添加文本标记
- 分布式 master/slave 框架
- LuoguP5290 [十二省联考2019]春节十二响 | 启发式合并
- dedecms5.7文章页替换掉特定标志的图片链接
- C#: 解决Fody is only supported on MSBuild 16 and above
- MyBatis面试题集合,90%会遇到这些问题
- QTableWidget获取选中行内容
- JOIN中的外连接(external join)