让网站“飞”起来 – Web前端性能优化技巧总结

  最近因为升级我的 WordPress,并且将所有的数据和服务都迁往向了阿里云。为了让网站跑得更快,也是做了不少工作,因为这一块之前不是很重视,很多东西也是边学边做。以下是高手总结的几条前端性能优化技巧,在此分享一下。这里只是一笔带过,不懂的概念需要自行搜索学习。

加载优化

DNS Prefetch 预读取
合并img、css、javascript文件,减少http请求
缓存一切可缓存资
使用长Cache
使用外联式引用css、javascript文件
压缩HTML、css、javascript文件
启用GZip
使用首屏加载(比如同构)
使用按需加载资源文件
使用滚屏记载资源文件
资源懒加载
通过Media Query加载css文件
增加Loading进度条
减少Cookie
避免重定向

图片优化

在保证图片质量的情况下,压缩图片,减少图片大小
使用Css3、svg、iconfont代替图片
次加载不大于1024KB的图片
图片宽不大于640px(移动端)

脚本优化

减少重回和回流操作
缓存DOM元素、DOM列表长度length、属性值
使用事件委托,避免批量绑定事件
尽量使用ID选择器
使用touch事件代替click事件
使用节流函数减少性能消耗

HTML优化

css文件写在头部,javascript放在尾部
避免层级深嵌套
避免img、iframe、a等元素的空src
避免行内样式和事件绑定
图片避免使用base64

css优化

移除空的css规则
正确使display的属性
不滥用float
不声明过多的font-size
值为0时不要使用单位
标准化各种浏览器前缀

渲染优化

HTML使用viewport(移动端)
减少DOM节点
尽量使用CSS3 3d动画来触发GPU渲染
使用requestAnimationFrame代替setTimeInter和setTimeout
适当使用canvas动画
对于resize、mousemove事件使用节流处理,较少DOM回流和重绘次数

人已赞赏
建站经验

DNS Prefetch 预读取到底是什么意思?如何正确使用?

2021-1-1 10:44:36

建站经验

WordPress 完美去除表情代码window._wpemojiSettings和DNS Prefetch

2021-1-2 10:44:37

下载说明

  • 1、微码盒所提供的压缩包若无特别说明,解压密码均为weimahe.com
  • 2、下载后文件若为压缩包格式,请安装7Z软件或者其它压缩软件进行解压;
  • 3、文件比较大的时候,建议使用下载工具进行下载,浏览器下载有时候会自动中断,导致下载错误;
  • 4、资源可能会由于内容问题被和谐,导致下载链接不可用,遇到此问题,请到文章页面进行反馈,以便微码盒及时进行更新;
  • 5、其他下载问题请自行搜索教程,这里不一一讲解。

站长声明

本站大部分下载资源收集于网络,只做学习和交流使用,版权归原作者所有;若为付费资源,请在下载后24小时之内自觉删除;若作商业用途,请到原网站购买;由于未及时购买和付费发生的侵权行为,与本站无关。本站发布的内容若侵犯到您的权益,请联系本站删除,我们将及时处理!
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索