雅虎军规第一天

前端,我一直觉得到了一定程度,那些大牛开发项目已经是拼细节了,因为大方向都是不变的,重要的就是对于细节的把控和对前端的优化。

很不才,做了一年多的前端,对于优化还是没有一个很好的概念,而也是最近才知道有一个前端优化的军规,就是雅虎军规。记录一下本人对雅虎军规的理解,不想看小白啰嗦的可以自行百度雅虎军规。

雅虎军规到现在为止有35条,给我们对于前端的优化有了一个清晰的方向。但是很多平时开发没遇见或者根本没概念的我都只会随意介绍,都清自行百度。

1、尽量减少HTTP请求

作为前端,我们都知道,前端对于网络的要求很高,没有网,你的网页就没办法打开,不像原生的东西,没网起码还能看见一些东西。可以说前端就是一个请求加载的过程。减少HTTP请求并不是特指ajax之类的,我们的图片、js、css等都是要通过HTTP请求得来的。

那怎么做可以减少HTTP请求呢?合并文件,我们都知道,每个页面都有自己的js和css,那么要是我们把所有脚本合并一起,只请求一个文件,也就只有一次HTTP请求,当然,对于不同页面要合并是一项很麻烦的事,但是合并文件确实可以提高响应时间。使用雪碧图,在我们看来,雪碧图很土,也很难看,但不可否认,浏览器会缓存图片,请求一次的图片,下次使用的时候浏览器会优先从缓存的资源里面找。另外还有图像映射和行内图片,但是个人认为不利于开发,包括合并文件和使用雪碧图对于开发也是不利的。但减少HTTP请求对于提升访问速度是一条重要准则。

2、减少dns查找

对于dns查找,可以详细去了解一下浏览器从输入地址到页面渲染的过程,这个过程就有解析域名的过程,所以才会有cdn加速的说法。

3、避免重定向

4、ajax缓存

关于ajax缓存,说真的,也是一点概念没有,欢迎大佬指教

5、优先加载需要组建,延迟加载可以延后的组件

很简单,我们页面刚打开的时候,最上面的是最先显示的,那么在这个过程中是不是能优先加载立马需要显示的部分,另外后面的显示可以延迟加载的就等优先显示的加载完成后再加载,这样可以给用户一个加载很快的感觉。

6、预加载

相信很多都听过预加载图片,其实预加载就是这个套路,比如我们一个切换显示好多张图片,在第一张图片显示的时候,另外的图片就可以先加载好了,切换显示隐藏,而不是切换图片。图片设置隐藏的时候其实浏览器已经帮你加载好了。

7、减少DOM元素

很明显,减少DOM那么对于标签和css有很高要求。一个页面,一个用了50000个DOM元素和一个只用了50个DOM元素比起来,区别显而易见。我就见过一个简单的布局,标签加css用了将近200行代码,我想了一下,要是我,估计50行左右就能完成。所以在写页面的时候,对于页面的布局还是要有一个良好的代码习惯和规范,总不能span标签里面写p标签。

8、跨域分离组件

简单点说就是一台服务器允许访问100人,那么你用三台服务器,效率自然能提高,但是会有dns查找的代价。

9、少用iframe

自行百度。

10、杜绝404

这是雅虎军规的内容部分,先介绍到这里。

(完)

Coding 个人笔记

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180611G20C2B00?refer=cp_1026
  • 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 cloudcommunity@tencent.com 删除。

扫码关注腾讯云开发者

领取腾讯云代金券