Web前端进阶指南 | 点击上方红色按钮加关注,一起学前端! 春江水暖鸭先知,产品好坏客户知,作为前端开发,我们更注重客户体验,产品的好坏决定着客户的体验,那么一款产品的好坏有很多因素,其中性能是决定因素,那么怎么优化才能让产品的性能达到优良,让客户体验良好,今天我就带大家去了解学习前端性能优化。 优化的目的在于让页面加载的更快,对用户操作响应更及时,为用户带来更好的用户体验,对于开发者来说优化能够减少页面请求数,能够节省资源。 前端优化的方法有很多种,可以将其分为两大类,第一类是页面级别的优化如请求数,内联脚本的位置优化等,第二类为代码级别的优化,例Javascript中的DOM 操作优化、CSS选择符优化、图片优化以及 HTML结构优化等等。 那么我们需要优化那些点呢? 说起加载,当我们输入URL时,我们要知道这中间发生了什么? 我们从输入 URL 到显示页面这个过程中,涉及到网络层面的,有三个主要过程: 这里我们就不用去管DNS解析和TCP链接了,毕竟不是我们的事,也干不来,但是HTTP请求和响应是我们优化的重点。 HTTP优化可分为两个方面: 减少请求数: 内联脚本的位置: 浏览器是并发请求的,很多时候我们会加入很多的外链脚本,而外链脚本在加载时却常常阻塞其他资源,例如在脚本加载完成之前,它后面的图片、样式以及其他脚本都处于阻塞状态,直到脚本加载完成后才会开始加载。如果将脚本放在比较靠前的位置,则会影响整个页面的加载速度从而影响用户体验。所以说尽可能的将脚本往后挪,减少对并发下载的影响。 客户端的渲染 前端去取后端的数据生成DOM树,加载过来后,自己在浏览器由上而下跑执行JS,随后就会生成相应的DOM。 优点: 缺点: 服务端的渲染 DOM树在服务端生成,然后返回给前端,页面上展现的内容,我们在HTML源文件也能找到。 优点: 缺点: 类似企业级网站,主要功能是页面展示,它没有复杂的交互,并且需要良好的SEO,那我们应该使用服务端渲染。 现在很多网站使用服务端渲染和客户端渲染结合的方式:首屏使用服务端渲染,其他页面使用客户端渲染。这样可以保证首屏的加载速度,也完成了前后端分离。 区分:源码里如果能找到前端页面中的内容文字,那就是在服务端构建的DOM,就是服务端渲染,反之是客户端渲染。 浏览器渲染 浏览器渲染机制一般分为: 在渲染DOM的时候,浏览器所做的事情: 新建独立图层会减少重回回流带来的影响,但是在图层重组的时候会消耗大量的性能,所以要权衡利弊,有所选择。 渲染流程的CSS优化 CSS的渲染是从右到左进行匹配的,我们应该注意: CSS阻塞 我们将css放在head标签里和尽快启用CDN实现静态资源加载速度的优化,因为只要CSSOM不OK,那么渲染就不会完成。 JS阻塞 JS引擎是独立于渲染引擎存在的,就是说插在页面那,就在那执行,浏览器遇到script标签时,它就会停止交于JS引擎渲染,等它渲染完,浏览器又交于渲染引擎继续CSSOM和DOM的构建。 DOM渲染优化 也就是说重绘回流问题 当页面布局和几何信息发生变化的时候,就需要回流。比如以下情况: 注意:回流一定会触发重绘,而重绘不一定会回流,回流比重绘做的事情要多,带来的开销也大,在开发中,要从代码层面出发,尽可能把回流和重绘的次数最小化。 如何最小化重绘和重排 强缓存 发现有缓存直接用。 Expires 绝对时间,判断客户端日期是否超过这个时间 Cache-Control:相对时间,判断访问间隔是否大于3600秒 在设定时间之前不会和服务端进行通信了 如果两个都下发以后者为准 协商缓存 询问服务器缓存是否可以用,在进行判断是否用。 Last-ModifiedIf-Modified-Since 第一次请求,respone的header加上Last-Modified(最后修改时间) 再次请求,在request的header上加上If-Modified-Since 和服务端的最后修改时间对比,如果没有变化则返回304 Not Modified,但是不会返回资源内容;如果有变化,就正常返回资源内容。浏览器收到304的响应后,就会从缓存中加载资源 如果协商缓存没有命中,浏览器直接从服务器加载资源时,Last-Modified的Header在重新加载的时候会被更新 EtagIf-None-Match 这两个值是由服务器生成的每个资源的唯一标识字符串,只要资源有变化就这个值就会改变;其判断过程与Last-ModifiedIf-Modified-Since类似,他可以精确到秒的更高级别。 DNS预解析 在一些浏览器的a标签是默认打开dns预解析的,在s协议下dns预解析是关闭的,加入mate后会打开。 减小图片大小 我看到有的文章通过计算图片大小来优化图片,就是说: 比如一张100*100的图片,图片上有10000个像素点,如果每个像素的值是RGBA存储的话,那么也就是说每个像素有4个通道,每个通道1个字节(8位 = 1个字节),所以该图片的大小大概为39KB。所以说通过: 上面的两种方式减小图片的大小,不过在我们开发中直接压缩来减小图片的大小。 改变图片的格式 这个图片的类型也决定着图片的属性,详细的我再微头条说过,附上链接: 各种图片格式的特点 日常开发过程中,滚动事件做复杂计算频繁调用回调函数很可能会造成页面的卡顿,这时候我们更希望把多次计算合并成一次,只操作一个精确点,JS把这种方式称为debounce(防抖)和throttle(节流) 函数节流 当持续触发事件时,保证在一定时间内只调用一次事件处理函数,意思就是说,假设一个用户一直触发这个函数,且每次触发小于既定值,函数节流会每隔这个时间调用一次用一句话总结防抖和节流的区别:防抖是将多次执行变为最后一次执行,节流是将多次执行变为每隔一段时间执行实现函数节流我们主要有两种方法:时间戳和定时器 这个节流函数利用时间戳让第一次滚动事件执行一次回调函数,此后每隔1000ms执行一次,在小于1000ms这段时间内的滚动是不执行的 当持续触发事件时,一定时间段内没有再触发事件,事件处理函数才会执行一次,如果设定时间到来之前,又触发了事件,就重新开始延时。也就是说当一个用户一直触发这个函数,且每次触发函数的间隔小于既定时间,那么防抖的情况下只会执行一次。 如上所见,当持续触发scroll函数,handle函数只会在1秒时间内执行一次,在滚动过程中并没有持续执行,有效减少了性能的损耗。 防抖和节流能有效减少浏览器引擎的损耗,防止出现页面堵塞卡顿现象。 上面我们主要从加载资源优化、渲染优化、浏览器缓存策略、图片优化、节流与防抖这几个方面,讲述了我们平常不易掌握和了解的性能优化知识点,希望大家可以了解学习掌握并加以应用,让我们的产品体验更佳,精益求精,做最好的产品和自己。
关于前端性能优化的知识点
优化的目的
优化哪些?
加载资源优化
渲染优化
浏览器缓存
meta -equiv="x-dns-prefetch-control" content="on">link rel="dns-prefetch" href="ebnet">
图片优化
节流和防抖
var throttle = function(func, delay) { var prev = Dateno(); return function() { var context = this; this指向indo var args = arguments; var no = Dateno(); if (no - prev >= delay) { funcapply(context, args); prev = Dateno(); } }}function handle() { consolelog(Mathrandom());}indoaddEventListener('scroll', throttle(handle, 1000));
函数防抖
function debounce(fn, ait) { var timeout = null; 定义一个定时器 return function() { if(timeout !== null) clearTimeout(timeout); 清除这个定时器 timeout = setTimeout(fn, ait); }} 处理函数function handle() { consolelog(Mathrandom()); } 滚动事件indoaddEventListener('scroll', debounce(handle, 1000));
总结
优化什么意思?(关于前端性能优化的知识点):mc怎么远程服务器地址
mc怎么远程服务器地址描述::