前端优化之雅虎军规

最新推荐文章于 2024-03-27 09:37:06 发布

ZACH_ZHOU

最新推荐文章于 2024-03-27 09:37:06 发布

阅读量574

点赞数

分类专栏： HTML5 文章标签：雅虎军规前端优化性能优化

本文链接：https://blog.csdn.net/ZACH_ZHOU/article/details/80653508

版权

HTML5 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

本文精选雅虎35条军规中的关键优化策略，旨在提升前端与移动端性能。涵盖减少HTTP请求、避免重定向、ajax缓存、图片懒加载、预加载、减少DOM元素、跨域分离组件、减少iframe使用、规避404错误、样式表位置、脚本优化、智能事件处理、JS与CSS外部引用、压缩资源、图片优化、避免图片缩放、小的favicon、精简cookie、组件尺寸控制、img标签规范及缓存策略，助力网站加速。

摘要由CSDN通过智能技术生成

以下是我在雅虎35条军规摘选的几条,主要针对的是前端和移动端。

1.减少http请求，web页面无论是js还是html、css都是依赖于网络请求的。所以合并通用的css等文件，减少网络的请求次数。对于页面渲染速度是有用的。使用雪碧图，即CSS Sprite，减少图片的请求次数，并且图片在合并之后，总的字节数减少，请求更快

2.避免重定向，重定向会拖慢用户页面渲染,影响体验。

3.ajax缓存,当请求的资源文件没有修改时，可以添加expires或cache-control请求头缓存文件减少http请求消耗。

4.延迟加载，图片的懒加载可以加快页面的渲染速度。推荐图片懒加载库echo.js,轻量级不依赖其他第三方库。使用地址:https://github.com/toddmotto/echo 使用非常简单,源码就几十行。

5.预加载,使用html5的prefetch属性例如：<link rel="prefetch" href="http://file06.16sucai.com/2016/0825/5203cb96ceadafa0f2f26d11c572d727.jpg" />这样就可以提前预加载一张图片,当跳转到另一页面后,不会在网络请求直接在缓存文件中获取。但是并不是所有的资源都可以预加载：url中包含下载资源，恶意页面，资源很大，https页面等不可以预加载。

6.减少dom元素的数量,尽量使用语义化标签，减少dom标签之间的层级嵌套。雅虎研究dom数量最多不要大于700个。超过之后会影响用户体验。

7.跨域分离组件,但确保不要超过2-4个域，域多了dns解析的代价就会增大。把html与组件分别部署到不同的域中,最大话并行下载。

8.尽量少用iframe,因为有可能阻塞页面，需要请求加载，非语义化。

9.杜绝404,404是一种非常浪费资源并给用户带来不好体验的。

10.避免使用css表达式。

11.样式表放到head标签中,使页面逐步渲染。

12.去除重复脚本，在ie和火狐中,重复引入的脚本会执行两次，浪费资源。

13.减少js对dom的访问。

14.智能的事件处理,如果dom元素被添加了多个事件,会影响响应速度。因此，当div中有10个按钮时。应该给div添加事件而不是给每个按钮添加事件。

15.js脚本放到底部。

16.将css与js放到外面,通过外部文件的这种引入方式可以被浏览器缓存起来，下次请求的时候就减小了html的大小。

17.js与css压缩,减小资源的体积。