【前端必备】七、页面性能优化
1.文件优化
图片优化
- 一些修饰类图片可用CSS代替
- 将多个图标文件整合到一张图片中 (CSS Sprite)
- 选择正确的图片格式:
- gif无损压缩,适合logo、线条等小型简单图像
- jpeg适合照片、渐变图像
- PNG-8相对于GIF来讲有对alpha透明通道的支持,PNG-24会比JPEG,GIF,PNG-8占用更多的存储空间
- svg适合简单的平面矢量形状,复杂的渲染时需要较多计算。
计算图片大小
对于一张 100 _ 100 像素的图片来说,图像上有 10000 个像素点,如果每个像素的值是 RGBA 存储的话,那么也就是说每个像素有 4 个通道,每个通道 1 个字节(8 位 = 1 个字节),所以该图片大小大概为 39KB(10000 _ 1 * 4 / 1024)。其他文件优化
- 静态资源使用 CDN加载
- 重要的CSS文件放head中,其他可以放底部或动态加载
- 将耗时的js代码使用Web Workers执行
- <script>标签
- 放在底部,避免阻塞渲染
- 动态脚本加载,向DOM中插入<script>标签
- 给标签加上 defer或async
- defer ,表示该文件会并行下载,但是会放到 HTML 解析完成后顺序执行。
- 没有任何依赖的JS文件可以加上async,表示加载和渲染后续文档元素的过程将和 JS 文件的加载与执行并行无序进行。
2.懒执行、懒加载、预加载、预渲染、DNS预解析
懒执行 | 将某些逻辑延迟到使用时再计算,可用于首屏优化 | 定时器,事件触发 |
懒加载 | 将不关键的资源延后加载。 | 定时器,事件触发,可视区 |
预加载 | rel="preload" href="http://example.com" /> 动态加载,Ajax | |
预渲染 | rel="prerender" href="//yuchengkai.cn" /> | |
DNS预解析 | rel="dns-prefetch" href="//yuchengkai.cn" /> | |
服务器渲染 |
打开或关闭DNS预解析:
- 在服务器端发送 X-DNS-Prefetch-Control 报头
- 在文档中使用meta标签:
<meta http-equiv="x-dns-prefetch-control" content="on">
在一些高级浏览器中,页面中所有的超链接,默认打开了DNS预解析。
但是,如果页面中采用的https协议,很多浏览器是默认关闭了超链接的DNS预解析。
如果加了上面这行代码,则表明强制打开浏览器的预解析。
3.强缓存与协商缓存
强缓存
表示在缓存期间不需要请求,state code 为 200。
两种响应头实现: Expires 和 Cache-Control。
Expires: Wed, 22 Oct 2018 08:41:00 GMT
在指定的绝对时间后过期
Cache-control: max-age=30
30秒后过期
Cache-Control 出现于 HTTP / 1.1,优先级高于 Expires
协商缓存
向服务器确认缓存是否过期,配合强缓存,两种实现方式。ETag 优先级比 Last-Modified 高。
(1)校验修改时间: Last-Modified 和 If-Modified-Since
(2)校验文件指纹: ETag 和 If-None-Match
首次请求资源,响应头上会有Last-Modified或ETag。
再次请求时,请求头上带着If-Modified-Since、If-None-Match。
服务器进行校验,如果资源没变,响应304 Not Modifield,
改变了,则返回资源带上新的Last-Modified或ETag。
如果在本地打开缓存文件,就会造成 Last-Modified 被修改,所以在 HTTP / 1.1 出现了 ETag 。
浏览器行为对缓存的影响
1)当ctrl+f5强制刷新网页时,直接从服务器加载,跳过强缓存和协商缓存;
2)当f5刷新网页时,跳过强缓存,但是会检查协商缓存;
Cache-Control消息头字段
在http 请求和响应中通过指定指令来实现缓存机制。缓存指令是单向的, 这意味着在请求设置的指令,在响应中不一定包含相同的指令。
* 禁止缓存
Cache-Control: no-cache, no-store, must-revalidate
* 缓存静态资源
对于应用程序中不会改变的文件,你通常可以在发送响应头前添加积极缓存。
对于频繁变动的资源,可以使用 Cache-Control: no-cache 并配合 ETag 使用,表示该资源已被缓存,但是每次都会发送请求询问资源是否更新。
对于代码文件来说,通常使用 Cache-Control: max-age=31536000 并配合策略缓存使用,然后对文件进行指纹处理,一旦文件名变动就会立刻下载新的文件。
更多关于Cache-Control参考:MDN Cache-Control
更多关于缓存参考:MDN HTTP caching
4.使用 HTTP / 2.0
因为浏览器会有并发请求限制,在 HTTP / 1.1 时代,每个请求都需要建立和断开,消耗了好几个 RTT 时间,并且由于 TCP 慢启动的原因,加载体积大的文件会需要更多的时间。
在 HTTP / 2.0 中引入了多路复用,能够让多个请求使用同一个 TCP 链接,极大的加快了网页的加载速度。并且还支持 Header 压缩,进一步的减少了请求的数据大小。
5.防抖和节流
debounce和throttle,
防抖和节流的作用都是防止函数多次调用。在事件和函数执行之间加了一个控制层。
防抖动是将多次执行变为最后一次执行,节流是将多次执行变成每隔一段时间执行。
指触发事件后在 n 秒内函数只能执行一次,如果在 n 秒内又触发了事件,则会重新计算函数执行时间。
/** * @desc 函数防抖 * @param func 函数 * @param wait 延迟执行毫秒数 * @param immediate true 表立即执行,false 表非立即执行*/
function debounce(func,wait,immediate) { let timeout;
return function () { let context = this; let args = arguments;
if (timeout) clearTimeout(timeout); if (immediate) { var callNow = !timeout; timeout = setTimeout(() => {timeout = null; }, wait) if (callNow) func.apply(context, args)} else { timeout = setTimeout(function(){func.apply(context, args) }, wait); } }
}
所谓节流,就是指连续触发事件但是在 n 秒中只执行一次函数。
时间戳版和定时器版。
/*** @desc 函数节流* @param func 函数* @param wait 延迟执行毫秒数* @param type 1 表时间戳版,2 表定时器版*/
function throttle(func, wait ,type) {if(type===1){let previous = 0;}else if(type===2){let timeout;}return function() {let context = this;let args = arguments;if(type===1){let now = Date.now();if (now - previous > wait) {func.apply(context, args);previous = now;}
}else if(type===2){if (!timeout) {timeout = setTimeout(() => {timeout = null;func.apply(context, args)}, wait);}}
}
转载于:https://www.cnblogs.com/mthz/p/web7.html
【前端必备】七、页面性能优化相关推荐
- 前端小游戏页面性能优化
公司是做教育类游戏开发,以前是用flash制作,现在开始使用CreateJS框架开发Canvas游戏.今天突然收到一个任务:游戏在iPad2下面游戏会打不开,然后自动刷新,再加载不出来,然后再刷新,陷 ...
- 前端页面性能优化 - 字体加载优化
相比于英文的字库来说,中文字库的体积非常之大,小则1M,动辄几十 M 的体积非常常见.所以在前端页面性能优化中,字体加载的优化就显得尤为重要.阅读了相关的知识和文章,在研究了市面上字体加载方案之后,我 ...
- 前端页面性能优化指标
前端页面性能优化指标 一.有哪些指标 LCP(Largest Contentful Paint) FID( First Input Delay) CLS(Cumulative Layout Shift ...
- 前端页面性能优化(完整归纳版)
前端页面性能优化 当优化前端页面性能时,可以从多个方面入手.以下是一些常见的优化技巧,使用 Markdown 格式展示: 1. 优化资源加载 压缩和合并文件:减少请求次数,通过压缩和合并 CSS.Ja ...
- web前端开发,如何提高页面性能优化?
web前端开发,如何提高页面性能优化? 内容方面 减少HTTP请求次数 减少DOM操作 减少DNS查询 使用Ajax 可缓存 css方面 把css样式HTML代码页的上端 从页面中分离css代码,从外 ...
- 前端页面性能优化的几种方式
前端页面性能优化的几种方式 提升页面性能优化的常见方式: 资源压缩合并,减少http请求 非核心代码异步加载 --> 异步加载的方式 --> 异步加载的区别 利用浏览器缓存 --> ...
- web前端页面性能优化SEO优化
首先什么叫网站? 网站一般分为前端和后台.我们可以理解成后台是用来实现网站的功能的,比如:实现用户注册,用户能够为文章发表评论等等.而前端应该是属于功能的表现.并且影响用户访问体验的绝大部分来自前端页 ...
- web页面性能优化及SEO优化
web页面性能优化 前言: 在同样的网络环境下,两个同样能满足你的需求的网站,一个"Duang"的一下就加载出来了,一个纠结了半天才出来,你会选择哪个?研究表明:用户最满意的打开网 ...
- 前端如何进行网站性能优化
大家好,我是IT修真院学员,一枚正直纯洁善良的WEB程序员,今天给大家分享一下,修真院官网JS任务4,深度思考中的知识点-前端如何进行网站性能优化. 一.背景介绍 性能优化的目的 1.从用户角度而言, ...
- 雅虎网站页面性能优化的34条黄金守则(转)
2019独角兽企业重金招聘Python工程师标准>>> 雅虎团队经验:网站页面性能优化的34条黄金守则 1.尽量减少HTTP请求次数 终端用户响应的时间中,有80%用于下 ...
最新文章
- [TypeScript] Using Interfaces to Describe Types in TypeScript
- java-String StringBuffer
- 区块链预言机(4)内在机制
- php mysql_fetch_array mysql_fetch__php提示Warning:mysql_fetch_array() expects的解决方法
- .tex类型文件怎么阅读_Python用于NLP :处理文本和PDF文件
- offset系列,client系列,scroll系列回顾
- H.264学习(一)——帧和场的概念
- [css] 你了解css3的currentColor吗?举例说明它的作用是什么?
- android应用开发---(第1章)android基础学习之六大Layout布局
- Unity中设置Transform的forward/up/right旋转异常问题
- 制作CAB自解压文件的工具——IExpress
- 如果可以再读一次研究生
- csuoj-1900 锋芒毕露
- 10个成语理解项目管理的价值观和方法论
- 宋体 ttf_.shx和.ttf字体,你真的了解?
- 数的“平方”速算秘诀,超实用的技巧,3秒出答案
- oracle官网一体机,沃趣科技-最新活动-oracle一体机|沃趣oracle一体机QData
- IB中文:文学作品中幽默手法的表现方式(下)
- C语言之出圈游戏(详解)
- 步进电机S曲线的生成
热门文章
- android手机安装python并写代码运行
- Salt-Syndic
- 荷兰商业银行使用精益领导力推行改进
- Spring与Quartz集成详解
- 关于 shell 脚本编程的10 个最佳实践
- 类似mysqlhotcopy备份mysql myisam脚本
- anaconda下载的python在哪_python包管理器anaconda介绍安装和使用
- js 根据公历日期 算出农历_给孩子过农历生日,还是阳历生日?家长不要盲从,看看这些再决定...
- android 放大镜动画,Android在图片上进行放大镜效果(放大镜形状)
- RedHat7修改主机名hostname