减少http请求数量:就是资源的合并
减少http请求大小:就是资源的压缩
 
一、资源合并的原理:
 
资源不合并的缺点:
1.文件和文件之间有插入请求----请求a.js,b.js,c.js(三行请求)合并之后只需要请求一行(请求a-b-c.js),不合并增加了N-1个网络延迟,上图而言是增加了2个网络延迟。
2.每一个网络请求都会相应增加丢包问题的影响,所以不合并资源的时候,请求多了,所受丢包问题影响更严重。
3.keep-alive服务器可能会被断开,不能完成整个keep-alive状态的保持
 
资源合并的缺点:
 
1.首屏渲染---文件样式布局主要由js文件决定,合并之后的js文件变大,会导致首屏渲染很慢
2.缓存失效---合并之后,修改了一个js文件,导致整个合并的代码重新加载,缓存失效
由于有这些缺点,所以要:
如何合并:用在线网站、构建工具
二、资源压缩
资源压缩的优点:节省流量,加载更快,代码保护(防止被篡改)
1.html压缩
方法:
①使用在线网站进行压缩(不推荐)
②nodejs提供了html-minifier工具
③后端模板引擎渲染压缩
 
2.css压缩
方法:
①使用在线网站进行压缩(不推荐)
②nodejs提供的html-minifier对html中的css进行压缩
③使用clean-css对css进行压缩
 
3.js压缩与混乱
方法:
①在线压缩
②使用html-minifier对html中的js进行压缩
③使用uglifyjs2对js进行压缩
 
 
 
实操:
fis3:

前端性能优化---减少http请求数量和减少请求资源的大小的更多相关文章

  1. Web前端性能优化,应该怎么做?

    摘要:本文将分享一些前端性能优化的常用手段,包括减少请求次数.减小资源大小.各种缓存.预处理和长连接机制,以及代码方面的性能优化等方面. base64:尤其是在移动端,小图标可以base64(webp ...

  2. Web前端性能优化教程01:减少Http请求

    性能黄金法则 只有10%-20%的最终用户响应时间花在接收请求的HTML文档上,剩下的80%-90%时间花在HTML文档所引用的所有组件(图片,script,css,flash等等)进行的HTTP请求 ...

  3. 前端性能优化成神之路—资源合并与压缩减少HTTP请求

    资源合并与压缩减少HTTP请求的概要 资源合并与压缩减少HTTP请求主要的两个优化点是减少HTTP请求的数量和减少请求资源的大小 http协议是无状态的应用层协议,意味着每次http请求都需要建立通信 ...

  4. 前端性能优化-减少http请求,dns预解析,减少repaint和reflow

    前端性能优化方法: 一 . 减少http请求 (1)通过合并图片,减少请求,俗称css sprites(css精灵)css sprites (2)lazyload懒加载,在需要的时候再加载 1.定义: ...

  5. 前端性能优化--为什么DOM操作慢? 浅谈DOM的操作以及性能优化问题-重绘重排 为什么要减少DOM操作 为什么要减少操作DOM

    前端性能优化--为什么DOM操作慢?   作为一个前端,不能不考虑性能问题.对于大多数前端来说,性能优化的方法可能包括以下这些: 减少HTTP请求(合并css.js,雪碧图/base64图片) 压缩( ...

  6. 前端性能优化 http请求的过程及潜在的优化点

    CS架构:比如我们的代码开发好,打包成apk,发布到平台,那么最终怎么运行到用户的手机上呢,用户首先需要从相关的应用商城下载这个apk包,并且运行这个 apk 包,那么这个 apk 包就会被解压,最后 ...

  7. Web前端性能优化教程06:减少DNS查找、避免重定向

    本文是Web前端性能优化系列文章中的第六篇,主要讲述内容:减少DNS查找.避免重定向.完整教程可查看:  一.减少DNS查找 基础知识 DNS(Domain Name System): 负责将域名UR ...

  8. CSS3与页面布局学习总结(八)——浏览器兼容与前端性能优化

    一.浏览器兼容 1.1.概要 世界上没有任何一个浏览器是一样的,同样的代码在不一样的浏览器上运行就存在兼容性问题.不同浏览器其内核亦不尽相同,相同内核的版本不同,相同版本的内核浏览器品牌不一样,各种运 ...

  9. CSS3与页面布局学习笔记(八)——浏览器兼容性问题与前端性能优化方案

    一.浏览器兼容 1.1.概要 世界上没有任何一个浏览器是一样的,同样的代码在不一样的浏览器上运行就存在兼容性问题.不同浏览器其内核亦不尽相同,相同内核的版本不同,相同版本的内核浏览器品牌不一样,各种运 ...

  10. Web前端性能优化教程09:图像和Cookie优化

    本文是Web前端性能优化系列文章中的第九篇,主要讲述内容:图像和Cookie优化.完整教程可查看:  一. 图像优化 图像基础知识 gif: 适用于动画效果,例如提示的滚动条图案 jpg: 是一种使用 ...

随机推荐

  1. js eslint语法规范错误提示代码

    最近在用eslint代码检测,因为之前不太注意代码规范,刚开始确实头疼,哈哈,不过用习惯了就会感觉还不错,其实也没有那样难调试 我看过之前有些人已经做过总结,自己记录下,方便自己以后查找 “Missi ...

  2. CSS中具有继承性的属性:

    CSS中具有继承性的属性:   color:#eee font: font-style font-variant: font-weight:bold font-size font-family: fo ...

  3. COJ 1156 Switching bulbs

    一道模拟题目 对于所有0 还是 1 我们都可以想象做均为 0 的状态 v[i]表示原来的值 但是对于原来为1的要加上其所在的值作为初始值 然后转化后 a[i] = -v[i]  , 如果原来为0 , ...

  4. UVA 10692 Huge Mod

    Problem X Huge Mod Input: standard input Output: standard output Time Limit: 1 second The operator f ...

  5. Cocoa -- 添加和移除开机启动项

    一 写plist到~/Library/LaunchAgents/ 目录下 // 配置开机默认启动 -(void)installDaemon{ NSString* launchFolder = [NSS ...

  6. IBOutlet loadView UIButton的subview数量 UIWebView

    IBOutlet声明的插座变量和属性一起使用的时候,在.m文件调用的是属性. 在loadView方法中获取view属性会产生循环引用问题并导致内存溢出. Control+E到行尾,Control+A到 ...

  7. Angularjs中添加HighCharts

    一. 添加基本配置 1. 添加指令 angular.module('newApp') .directive('dpHighchart', ['$rootScope', function($rootSc ...

  8. C++对象模型——函数的效能(第四章)

    4.3 函数的效能 在以下的这组測试中,在不同的编译器上计算两个3D点,当中用到一个nonmember friend function,一个member function,以及一个 virtual m ...

  9. Chrome浏览器扩展开发系列之十四:本地消息机制Native messagin

    Chrome浏览器扩展开发系列之十四:本地消息机制Native messaging 2016-11-24 09:36 114人阅读 评论(0) 收藏 举报  分类: PPAPI(27)  通过将浏览器 ...

  10. 【Android自己定义View实战】之自己定义超简单SearchView搜索框

    [Android自己定义View实战]之自己定义超简单SearchView搜索框 这篇文章是对之前文章的翻新,至于为什么我要又一次改动这篇文章?原因例如以下 1.有人举报我抄袭,原文链接:http:/ ...