前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >雅虎军规第一天

雅虎军规第一天

作者头像
wade
发布2020-04-24 10:58:52
6560
发布2020-04-24 10:58:52
举报
文章被收录于专栏:coding个人笔记coding个人笔记

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

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

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

1、尽量减少HTTP请求

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

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

2、减少dns查找

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

3、避免重定向

说真的,我是真的没有考虑过这种问题,或许也是没注意到,可能用到过。重定向的意思就是,现在输入一个地址,但是最后显示出来的地址跟更输入的是不一样的,做了一层处理。比如输入www.baidu.com/,还是会帮你定向到www.baidu.com。

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

应该所有开发前端的人都知道,访问一个不存在的地址,要经过很长的时间才能显示访问地址不存在的404状态,不信的可以随意输入一个网址,www.kjshfkshkfdhskf.com,要经过好几秒,最后又是404.所以对于404一定要杜绝。

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

(完)

本文参与 腾讯云自媒体分享计划,分享自微信公众号。
原始发表:2018-06-11,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 coding个人笔记 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档