web前端优化手段有很多,同种的优化方式或许在不同的网络协议会南辕北辙,下面就自己结合工作经验和学习总结的一些手段总结

1、合并文件减小请求数:sprite图片的合成、合并脚本与样式。

2、减小文件的大小:压缩代码(html、css、js),压缩图片(在美术和产品能接受的范围内),选择正确格式的图片(jpg/png)。

3、cookie-free:将资源的站点都重定向到非页面站点,如:页面都是*.100bt.com,将资源站点都放在resource.a0bi.com站点。

4、多站点放置资源,绕开浏览器的同站点资源加载个数的限制。

5、异步加载js文件,非基础库script加上async/defer。

6、按需加载文件,如:在相应式页面中,判断用户设备获取所需的文件。

7、页面延迟加载,如:图片与脚本使用滚动加载,只加载出现在视口的图片和脚本效果对应的脚本文件。

8、减少dom操作(感觉在现代浏览器意义不大)

9、缓存需要多次操作的dom节点

10、基础库的过期时间设置尽量大,充分利用页面缓存

11、使用Worker

12、使用cdn

13、使用gzip压缩

14、使用css3/canvas/svg 代替图片,使用data:image代替png图片

15、使用offline

16、DNS预读取(dns-prefetch)prefetch subresource prerender

17、分布加载页面ajax/bigpipe

18、 避免重复的资源请求,不同模块同时请求相同资源,会导致资源的重复请求

19、减少reflow/repaint

20、使用switch-case不用if-else,使用while不使用for

web前端优化手段的更多相关文章

  1. 关于大型网站技术演进的思考(二十一)--网站静态化处理—web前端优化—下【终篇】(13)

    本篇继续web前端优化的讨论,开始我先讲个我所知道的一个故事,有家大型的企业顺应时代发展的潮流开始投身于互联网行业了,它们为此专门设立了一个事业部,不过该企业把这个事业部里的人事成本,系统运维成本特别 ...

  2. 关于大型网站技术演进的思考(二十)--网站静态化处理—web前端优化—中(12)

    Web前端很多优化原则都是从如何提升网络通讯效率的角度提出的,但是这些原则使用的时候还是有很多陷阱在里面,如果我们不能深入理解这些优化原则背后所隐藏的技术原理,很有可能掉进这些陷阱里,最终没有达到最佳 ...

  3. 网站静态化处理—web前端优化—下【终篇】(13)

    网站静态化处理—web前端优化—下[终篇](13) 本篇继续web前端优化的讨论,开始我先讲个我所知道的一个故事,有家大型的企业顺应时代发展的潮流开始投身于互联网行业了,它们为此专门设立了一个事业部, ...

  4. 网站静态化处理—web前端优化—中(12)

    网站静态化处理—web前端优化—中(12) Web前端很多优化原则都是从如何提升网络通讯效率的角度提出的,但是这些原则使用的时候还是有很多陷阱在里面,如果我们不能深入理解这些优化原则背后所隐藏的技术原 ...

  5. 【转】关于大型网站技术演进的思考(二十一)--网站静态化处理—web前端优化—下【终篇】(13)

    本篇继续web前端优化的讨论,开始我先讲个我所知道的一个故事,有家大型的企业顺应时代发展的潮流开始投身于互联网行业了,它们为此专门设立了一个事业部,不过该企业把这个事业部里的人事成本,系统运维成本特别 ...

  6. 【转】关于大型网站技术演进的思考(二十)--网站静态化处理—web前端优化—中(12)

    Web前端很多优化原则都是从如何提升网络通讯效率的角度提出的,但是这些原则使用的时候还是有很多陷阱在里面,如果我们不能深入理解这些优化原则背后所隐藏的技术原理,很有可能掉进这些陷阱里,最终没有达到最佳 ...

  7. 关于大型网站技术演进的思考(十九)--网站静态化处理—web前端优化—上(11)

    网站静态化处理这个系列马上就要结束了,今天我要讲讲本系列最后一个重要的主题web前端优化.在开始谈论本主题之前,我想问大家一个问题,网站静态化处理技术到底是应该归属于web服务端的技术范畴还是应该归属 ...

  8. [转] Web前端优化之 CSS篇

    原文链接: http://lunax.info/archives/3097.html Web 前端优化最佳实践第四部分面向 CSS.目前共计有 6 条实践规则.另请参见 Mozilla 开发者中心的文 ...

  9. 网站静态化处理—web前端优化—上

    网站静态化处理—web前端优化—上(11) 网站静态化处理这个系列马上就要结束了,今天我要讲讲本系列最后一个重要的主题web前端优化.在开始谈论本主题之前,我想问大家一个问题,网站静态化处理技术到底是 ...

随机推荐

  1. 设计模式 ( 十六 ) 观察者模式Observer(对象行为型)

    设计模式 ( 十六 ) 观察者模式Observer(对象行为型) 1.概述 一些面向对象的编程方式,提供了一种构建对象间复杂网络互连的能力.当对象们连接在一起时,它们就可以相互提供服务和信息. 通常来 ...

  2. cocos2dx进阶学习之CCEGLView

    继承关系 CCEGLView-> CCEGLViewProtocol CCEGLView是窗口,在不同平台上有不同的实现,而CCEGLViewProtocol是CCEGLView定义的接口,所以 ...

  3. UVA 10020 Minimal coverage(贪心 + 区间覆盖问题)

     Minimal coverage  The Problem Given several segments of line (int the X axis) with coordinates [Li, ...

  4. Android学习笔记之View(二)

    View加载的流程之测量:rootView调用measure()→onMeasure(): measure()是final方法,表明Android不想让开发者去修改measure的框架,开发者可以on ...

  5. SQL -主键&外键

    在创建表的时候,添加主键 CREATE TABLE table_name (column_1 char(10) PRIMARY KEY, column_2 char(10) ) 如果已经创建了表,如何 ...

  6. Android学习笔记:进度条ProgressBar的使用以及与AsyncTask的配合使用

    ProgressBar时android用于显示进度的组件.当执行一个比较耗时的操作(如io操作.网络操作等),为了避免界面没有变化让用户体验降低,提供一个进度条可以让用户知道程序还在运行. 一.Pro ...

  7. SRAM,SDRAM,网卡

    SRAM,SDRAM,网卡有地址总线.由cpu统一编址. NAND flash没有地址总线. 因 此有这两者寻址方式不同. 字符设备驱动程序的框架. 驱动程序 1.有led.read,led.writ ...

  8. UITableViewHeaderFooterView的使用+自己主动布局

    UITableViewHeaderFooterView的使用+自己主动布局 使用UITableView的header或footer复用时,假设採用自己主动布局,你会发现有约束冲突,以下这样写能够消除约 ...

  9. 数据备份--dump(此作者有许多有用的博客文章)

    数据中 心操作大量的数据.当遭到破坏时,这就是一场灾难.这时候需要备份来恢复,及时你又大量的备份数据都没用,备份也肯定不是在浪费时间.你也许很幸运从 来没有经历过数据丢失.但是, 由于这种事情极少发生 ...

  10. WCF技术剖析之十七:消息(Message)详解(下篇)

    原文:WCF技术剖析之十七:消息(Message)详解(下篇) [爱心链接:拯救一个25岁身患急性白血病的女孩[内有苏州电视台经济频道<天天山海经>为此录制的节目视频(苏州话)]]< ...