vlambda博客
学习文章列表

有哪些web性能优化方法?

关注“ 程序员面试经验分享

技术干货,第一时间推送


狗子:感谢大自然的馈赠



前端性能优化,是每个前端必备的技能,优化自己的代码,使自己的网址可以更加快速的访问打开,减少用户等待,今天就会从几个方面说起前端性能优化的方案,

看下面的一张图,经常会被面试官问,从输入URL到页面加载完成,发生了什么?

 

有哪些web性能优化方法?

 

 

DNS缓存

  DNS查找流程:浏览器缓存 — 本地hosts文件 — 本地DNS解析器缓存 — 本地DNS服务器 — 本地DNS服务器设置(是否设置转发器)— 根DNS服务器

 浏览器缓存之客户端缓存

    无需请求的memory cache,disk cache;

    需要发请求验证的Etag、Last-Modified304;

    H5新增的 localStorage、sessionStorage;

  合理利用以上缓存,可以很大程度上提高前端性能。

 网站存在缓存怎么解决?

  1.文件加哈希

       1.上线之后,要求用户强刷新,这种问题,用文件名加指纹方式解决

       2. a.hash.js  hash是整个a.js文件的md5值,文件内容不变,hash不变,缓存生效

  2.缓存文件怎么解决

   1.加时间戳 <script >
   2.加版本号 <script > 比如jq,vue公用库,内容没有改变 重新加载
   3.加指纹 但是不产生新文件 <script > 不能清除Cdn缓存,但是生成新文件,会有问题(html,js那个先上)
   4.最终,诞生最优的产生文件<script >先上js,在上html webpack build 打包

 

优化策略

 1.长连接

  2.减少文件体积   

   1.js打包压缩 

      1.无效字符的删除、剔除注释、代码语义的缩减与优化、代码保护

      2.使用在线网站压缩、使用 html-minifier 对html 中的 js 进行压缩、使用uglifyjs2 对 js 进行压缩

      2.图片压缩

      1.把网站上用到的一些图片整合到一张单独的图片中

      3.css压缩

     1.无效代码删除、css语义合并

      2.使用在线网站压缩、使用 html-minifier 对html 中的 css 进行压缩、使用clean-css 对 css 进行压缩

   4.html 压缩

     1.压缩在文本文件中有意义但是在HTML中不显示的字符,包括空格、制表符、换行符、注释等

      2.使用在线网站压缩、nodejs提供了html-minifier 工具、后端模板引擎渲染压缩

   5.开启 gzip

   6.文件合并

    1.如果不合并 === > 文件与文件之间有插入的上行请求,增加了N - 1 个网络延迟;受丢包问题影响更严重;经过代理服务器时可能会被断开

    2.如果合并 === > 首屏渲染时间变长;文件缓存大面积失效

    3.公共库合并、不同页面的合并

    4.使用在线网站进行文件合并、使用 nodejs 实现文件合并

 3.减少文件请求次数

      1.雪碧图

      2.js,css打包

      3.缓存控制

      4.懒加载

 4.减少用户和服务器的距离

  (地理位置)

       1.cdn  js可以推到cdn缓存上

 5.本地存储

 6.图片大小计算

  对于一张 100 100 像素的图片来说,图像上有 10000 个像素点,如果每个像素的值是 RGBA 存储的话,那么也就是说每个像素有 4 个通道,每个通道 1 个字节(8 位 = 1个字节),所以该图片大小大概为 39KB(10000  * 4 / 1024)。但是在实际项目中,一张图片可能并不需要使用那么多颜色去显示,我们可以通过减少每个像素的调色板来相应缩小图片的大小。

 

 浏览器缓存机制

  通过网络获取内容及速度缓存慢有开销巨大,较大相应需要在客户端与服务器之间进行多次往返通信,这回延迟浏览器获得处理内容的时间,还会增加访问者流量的费用,因此,缓存重复利用之前获取的资源能力成为性能优化的一个关键方面

  广义的缓存,可以分为四个,大家对httpcache比较熟悉

      1.Http Cache

      2.Service Worker Cache

      3.Memory Cache

      4.Push Cache


  Http Cache

   浏览器大佬:需要获取main.js,看下强缓存里有没有

      1.Expires和Cache-Control两个header来控制强缓存

   2.expires: Mon, 16 Mar 2020 09:50:27 GMT

   3.last-modified: Thu, 15 Feb 2018 14:17:52 GMT

  Memory Cache

    内存缓存,短命,比如常用数据js里,浏览器也有自己的策略,base64图片,体积小的静态资源

  Service Worker Cache

    是一种独立于主干线程之外的javascript线程,它脱离于浏览器窗体,算是幕后工作,可以实现离线缓存,网络代理等

图片优化

  图片通常是最占用流量的,pc端加载平均图片大小是600k,简直比js打包后的文件还大,所以针对图片的优化,不同场景,使用不同文化的类型

  1. jpg   

    1.有压缩

       2.体积小,不支持透明

         3.用于背景图,轮播图

  2.png

    1.无压缩,质量高,支持透明

       2.色彩线条更丰富,小图,比如logo,商品icon

  3.svg

    1.文本,体积小,矢量图

       2.渲染成本,学习成本

  4.图片打成雪碧图,减少http请求次数

 

gzip

  Http压缩就是以缩小体积为目的,对HTTP内容进行重新编码的过程

  Gzip压缩背后的原理,是在一个文本文件中找出一些重复出现的字符串,临时替换他们,从而、使整个文件变小,根据这个原理,文件找那个代码重复率越高,那么压缩的效率越高,使用Gzip收益就越大,反之亦然基本来说Gzip都是服务器干的活,比如nginx

 

本地存储

  常见本地存储格式有 cookie  localstroage sessionStroage  indexDB

   1.cookie

      最早,体积先定。性能浪费,所有请求都带上所有的当前域名的。

    因为 http 请求无状态,所以需要 cookie 去维持客户端状态

    cookie 生成方式:http response header 中的 set-cookie;js 中可以通过document.cookie读写cookie

    使用:用于浏览器端和服务器端的交互;客户端自身数据的存储

    过期时间:expire

    存储限制:作为浏览器存储,大小4kb左右;需要设置过期时间 expire

    cookie 存储能力被 localstorage 代替

    httponly 不允许 js 读写

    cookie 中在相关域名下面 --- cdn的流量损耗 。解决:cdn 的域名和主站的域名要分开

  2.Web Storage

      1.存储量大,不自动发个服务器,js控制

   2.localstroage

     HTML5 设计出来专门用于浏览器存储的

       大小为 5M 左右

     仅在客户端使用,不和服务端进行通信

     接口封装较好

     浏览器本地缓存方案

   3.sessionStroage

    会话级别的浏览器存储

    大小为 5M 左右

    仅在客户端使用,不和服务端进行通信

    接口封装较好

    对于标表单信息的维护

  3.indexDB

      运行在浏览器上的非关系型数据库

  4.pwa

   基于缓存技术的应用模型

     可靠:在没有网络的环境中也能提供基本的页面访问

    快速:针对网页渲染及网络数据访问有较好的优化

         融入:应用可以被增加到手机桌面,并且和普通应用一样有全屏、推送等特性

重绘与回流

  回流:当我们对DOM修改引发了DOM几何尺寸的变化(比如修改元素的宽,高度或者隐藏元素等)时,浏览器需要重新计算元素的几何属性,(其他元素的几何属性和位置也会因此受到影响),然后再将计算的结果绘制出来,这个过程就是回流(也加重排)

 

  重绘:当我们对DOM的修改导致了样式的变化,却并未影响几何属性,(比如修改了颜色和背景色)时,浏览器不需要重新计算元素的几何属性,直接为该元素绘制新的样式,(跳过了上图所示的回流环节)。这个过程叫做重绘

 

  由此我们可以看出,重绘不一定导致回流,回流一定导致重绘

 

  回流是影响最大的

      1.窗体,字体大小

      2.增加样式表

      3.内容变化

      4.class属性

      5.offserWidth和offsetHeight

      6.fixed

节流和防抖

  节流

    预定一个函数只有在大于等于执行周期时才执行,周期内调用不执行

// 函数节流 每隔多少时间执行一次 const throttle = (func ,wait = 100) =>{ // 无论调用多少次,函数都是100毫秒执行一次 let lastTime =0; return(...args) =>{ let now = new Date().getTime() if(now - lastTime >wait) { func.apply(this.args) lastTime = now } } }
let i =1; window.addEventListener('scroll',throttle(()=>{ // 使用做图片懒加载 console.log(i) i+=1 },350))

  防抖

    在函数需要频繁触发时,只有当有足够空闲的时间时,才执行一次

/* 校验用户是不是重复,用户输入完,向后端发送请求 如果用户每次输入,都发生请求,造成请求过多 用户停止输入字符串350毫秒,在发出 */  const debounce = (func,wait = 350) =>{ let timer =0; return (...args)=>{ if(timer) { clearInterval(timer) } timer = setTimeout(() => { func.apply(this,args) }, wait); } }  let i =1; window.addEventListener('scroll',debounce(()=>{ // 验证 console.log(i) i+=1 },350))



lazy-load

  对于一些图片多,页面长的网页来说,如果每次打开页面加载全部的网页内容,页面加载速度势必会受到影响,如果每次打开网页只将网页可视区域的内容加载给用户 ,将大大提高网页浏览速度,同时也减轻服务器负载,我们可以使用lazyload.js来实现对图片的延迟加载,当网页图片进入到浏览器可视区域时,才会去请求服务器加载图片。

 

// 获取所有的图片 const img = document.getElementsByTagName('img') // 获取可视区域的高度 const viewHeight = window.innerHeight || document.documentElement.clientHeight; // num用于计算当前显示到那一张图片,避免每次都是从第一张开始检查是否漏出 let num =0; function lazyload() { for(let i=num;i<img.length;i++) { // 用可是区域高度减去元素顶部距离可视区域顶部的高度 let distance = viewHeight - img[i].getBoundingClientRect().top // 如果可视区域高度大于等于元素顶部距离可视区域顶部的高度,说明元素露出 if(distance >=0) { // 给元素写入真实的src,展示图片 img[i].src = img[i].getAttribute('data-src') // 前i张图片已经加载完毕,,下次从第i+1张开始检查是否露出 num = i+1 } } } // 监听scroll window.addEventListener('scroll',lazyload,false)

 

performance.getEntriesByType('navigation')  性能检测

  通过在浏览器控制台输入这个命令,就可以检测到网页加载数据,检测网页加载性能

  有哪些web性能优化方法?

 

 

 

  列入:

      DNS查询耗时 通过使用domainLookupEnd - domainLookupStart  就等于dns查询的时间

      TCP链接耗时  通过 connectEnd - connectStart

      HTTP请求耗时 通过 responseEnd - responseStart 

      解析dom树耗时  通过 domComplete -  domInteractive

      白屏时间 通过 responseStart  - navigationStart

      DOMready时间 通过 domContentLoadedEventEnd - navigationStart

      onload时间 通过 loadEventEnd -  navigationStart 也即是onload回调函数执行的时间

 

Lighthouse插件

Lighthouse分析web应用程序和web页面,收集关于开发人员最佳实践的现代性能指标和见解,让开发人员根据生成的评估页面,来进行网站优化和完善,提高用户体验。

  1.可以在谷歌商店安装一个Lighthouse一个插件就可以了,下面我是检测github网站的数据

有哪些web性能优化方法?

  2.使用node全局安装

npm install -g lighthouse

  安装完之后运行,也是找的github网址,运行成功之后,会弹出一个生成的html页面。

有哪些web性能优化方法?

 

 生成一个html文件,找到然后直接打开就行

有哪些web性能优化方法?

 

 有哪些web性能优化方法?

 

 浏览器渲染

  有哪些web性能优化方法?

  1.在这一步浏览器执行了所有的加载解析逻辑,在解析HTML的过程中发出了页面渲染所需要的各种外部资源请求

  2.浏览器将识别并加载所有的css样式信息与dom树合并,最终胜出页面render树,(:after :brfore这样的伪元素在这个环节被构建到DOM树中)

  3.页面中所有元素相对位置信息,大小等信息均在这一步得到计算

  4.在这一步浏览器会根据我们的DOM代码结果,把每一个页面图层转换为像素,并对所有的媒体文件进行解码

  5.最后一步浏览器会合并各个图层,讲数据有CPU输给GPU最终绘制在屏幕上,(复杂的视图会给这个阶段GPU计算带来一些压力,在实际中是为了优化动画性能,我们有时候会手动区分各个视图)

 

  渲染过程说白了,首先是基于HTML构建一个DOM树,这颗DOM树与css解析器解析除的CSSOM相结合,就有了布局渲染树,最后浏览器以布局渲染树为蓝本,去计算布局并绘制图像,我们页面初次渲染就大功告成了。

   

  之后每当一个新元素加入到这个DOM树中,浏览器便会通过css引擎查遍css样式表,找到符合该元素的样式应用到这个元素上,然后在重新去绘制他

 

服务端渲染 等等.....

以上就是所总结的常见的前端性能优化

https://www.cnblogs.com/zhoulifeng/p/12060250.html


程序员面试经验分享

 每天进步一点点  

有哪些web性能优化方法?


免责声明:以上内容源自网络,版权归原作者所有,如侵犯原创版权请告知,我们将尽快删除相关内容。

有哪些web性能优化方法?

点分享

点点赞

点在看