常用的前端性能优化方法有哪些?
2016-08-10 · 知道合伙人互联网行家
第一:面向内容的优化
1. 减少 HTTP 请求
2. 减少 DNS 查找
3. 避免重定向
4. 使用 Ajax 缓存
5. 延迟载入组件
6. 预先载入组件
7. 减少 DOM 元素数量
8. 切分组件到多个域
9. 最小化 iframe 的数量
10. 不要出现http 404 错误
第二:面向 Server
1. 缩小 Cookie
2. 针对 Web 组件使用域名无关性的
1、减少http请求,合理设置 HTTP缓存
2、使用浏览器缓存
3、启用压缩
4、CSS Sprites,合并 CSS图片,减少请求数
5、CSS放在页面最上部,javascript放在页面最下面
前端对于网站来说,通常是指,网站的前台部分包括网站的表现层和结构层。因此前端技术一般分为前端设计和前端开发,前端设计一般可以理解为网站的视觉设计,前端开发则是网站的前台代码实现,包括基本的HTML和CSS以及JavaScript/ajax,现在最新的高级版本HTML5、CSS3,以及SVG等。
CSS优化
JS优化等等
性能优化,就是在不影响系统运行正确性的前提下,使之运行地更快,完成特定功能所需的时间更短。为了实现这一效果,我们应当尽量提前进行性能优化,未雨绸缪,甚至最好是将它作为一个周期性的工作来进行。
一个好的性能优化思路应该分为四步:
明确优化目的。优化的目的可以是增强用户体验,比如消除一些有明显卡顿的页面和操作,还可以是节省服务器带宽流量、减少服务器压力这些。无论如何,你需要有一个目的。有很多人只是为了优化而优化,目的丢了,或者甚至一开始就没考虑过,只是不断追求更好看的性能指标。
确定要做到什么程度。
优化是永无止境的,为了避免陷入到前面说的无意义的性能黑洞中,我们最好能够根据实际的业务情况定义出一个相对客观的标准,代表优化到什么程度。比如,根据当下的性能指标与业务量对比,发现最大并发数可能会超过当前的2倍,那么此时优化到争取优化提升3倍,至少保证能提升2.5倍,是一个比较合理的标准。
请点击输入图片描述
3、找到瓶颈点
大部分情况下,流程上的优化远胜于语法级别的优化,所以我们最好还是能够借助一些客观数据,以获得更多的运行环境相关的信息,来找到整个“木桶”上最短的一块“板”。如整个系统的总体架构、服务器的信息等,便于定位到底性能的瓶颈点在哪。
4、着手优化
做优化的正确思路一般符合下面两个方向。
第一,空间换性能。一个节点顶不住就多复制一个节点出来,独一份的数据导致资源竞争得厉害,就多复制一份数据出来。
第二,距离换性能。数据从服务端经过层层处理返回到客户端觉得慢的话,那么能不能直接保存在客户端,或者至少是离客户端尽可能近的地方。
性能优化只是Web前端人员需要掌握的基础技能之一,想要拿到高薪,你需要具备扎实的理论基础以及丰富的实战经验,而这些需要系统的学习以及较多的项目积累。
看看这个博客好像写的还不错网页链接