来,聊一聊性能优化

不管是应付前端面试还是改进产品体验,性能优化都是躲不开的话题。这里我们就简单聊一聊性能优化。传输快 vs 体验快

优化的目的是让用户有“快”的感受,那如何让用户感受到快呢?

加载速度真的很快,用户打开输入网址按下回车立即看到了页面

加载速度并没有变快,但用户感觉你的网站很快

传输快

所谓的真快就是网站资源以最快的速度到达用户浏览器,那如何去做呢?我们先粗略定一些原则:

传输的内容体积要小

传输的内容数量要少

网速要足够快

服务器响应要及时

能重复利用的资源要利用好

暂时不需要的资源先不要

将来需要的资源抽空要

下面就能顺藤摸瓜,做个细化

传输的内容体积要小

图片要压缩

图片根据支持情况选择体积更小的格式(如 webp)

css、js 内容压缩

服务端开启 Gzip,在传输数据之前再次压缩

传输的内容数量要少

图片图标合并(css sprite)、svg 图标合并(svg sprite)

css、js 文件打包合并

网速要足够快

服务器出口带宽要够

考虑到南北差异、运营商差异,在不同地区部署服务器

服务器响应要及时

接口响应速度要快(数据库优化、查询优化、算法优化)

cpu、内存、硬盘读写不要成为瓶颈;多加几台机器

重要页面(首页)静态化。服务端提前渲染后首页生成静态页面,用户访问首页直接返回静态页面,不需要像其他页面那样还需加载 css、js 再获取数据渲染展示

能重复利用的资源要利用好

服务器设置合适的静态资源缓存时间

前端文件打包时做合理的分块,让公共的资源缓存后能被多个页面复用

暂时不需要的资源先不要

图片懒加载

功能、模块、组件按需加载

将来需要的资源抽空先拿到

DNS 预解析

预连接

预获取

预渲染

体验快

所谓的体验快就是让用户觉得网站的交互是“流畅的”、“舒适的”。比如

滚动页面不要有迟滞感

1.对于短时连续大量触发的操作要做节流

一些常见操作不要感觉拖泥带水

DOM 的操作不要过于频繁

不要出现内存泄露

优化复杂运算

动画不要卡顿

多用 CSS 动画,少用 JS 动画

开启硬件加速

不要用 setTimeout/setInterval 去模拟动画

动画或者过渡的执行时间不要太久

性能优化的建议

臆想的优化不是优化,无明显成效的优化不是优化。浏览器的性能已经足够快,不要因为“过渡优化”牺牲代码的可读性

先做简单见效快的优化,再做复杂见效慢的优化。一张未压缩的大图片可能抵消辛辛苦苦做的全部其他技术优化

文章来源于网络,如有侵权请联系我们,将予以删除

本文来自企鹅号 - 程序猿崛起媒体

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏xingoo, 一个梦想做发明家的程序员

【AngularJS】—— 5 表单

这部分,我们写一个表单程序,使用angularjs的检测并完成表单属性的获取与拷贝。   在AngularJS中,也支持html5中多种控件的自动检测,如...

23250
来自专栏编程微刊

jedate-开始使用一款好用的时间插件

23430
来自专栏娱乐心理测试

微信小程序如何获取地理位置和进行地图导航

76850
来自专栏web前端教室

简单粗暴,以小见大 -- 实现一个按钮的前端组件

按钮,一个button,一个div,一个a标签,都可以做成按钮。现在要把它做成一个前端组件,那前端组件是什么? 定义很多,我随便网上查一个,“指一些设计为通用性...

25270
来自专栏DeveWork

Customizer Library:主题“自定义”功能的WordPress类库

这里说的WordPress主题中的“自定义”功能实就是指的是“外观”-“自定义”那里。不过一些第三方主题可能没有这个功能,如果你想在这个“自定义”上想扩展多点,...

22670
来自专栏小文博客

Git:一款比付费主题更像是付费主题的WordPress免费主题

22320
来自专栏编程微刊

js仿通知栏新消息实时推送更新效果

在最近的项目里面,用到websocket做消息推送,其中有这样的一个效果,在消息列表的模块,接收到很多条信息,展示在界面的是最近的十条接受到的消息,实时更新模块...

29630
来自专栏一场梦

全平台通用评论神器一键自动填写昵称、邮箱和网址

14030
来自专栏宝塔面板

腾讯云中宝塔面板升级专业版

61420
来自专栏小文博客

查看WordPress站点主题的方法

69120

扫码关注云+社区

领取腾讯云代金券