码迷,mamicode.com
首页 > Web开发 > 详细

web性能优化指南

时间:2019-12-19 10:03:19      阅读:128      评论:0      收藏:0      [点我收藏+]

标签:form   非关系型数据库   asc   最大   加载完成   work   new   worker   本地缓存   

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

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

 

技术图片

 

1.用户输入www.baidu.com
2.浏览器通过DNS。吧url解析ip
3.和ip地址建立TCP连接,发送HTTP请求
4.服务器接收请求,查库,读文件等,拼接好 返回的HTTP响应
5.浏览器收到首屏html,开始渲染,
6.解析html位dom
7.解析css为css-tree
8.dom+css生成render-tree绘图
9.加载script的js文件
10.执行js文件
 
DNS缓存
 DNS是“域名系统”的缩写,它的工作是将域名和主机名转化为服务器主机的 IP 地址;
  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 src="/a.js?_t=xx">
   2.加版本号 <script src="/a.js?_v=1.6"> 比如jq,vue公用库,内容没有改变 重新加载
   3.加指纹 但是不产生新文件 <script src="/a.js?h=abcd12sa"> 不能清除Cdn缓存,但是生成新文件,会有问题(html,js那个先上)
   4.最终,诞生最优的产生文件<script src="/a.abcd12sa.js">先上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.本地存储
  
 浏览器缓存机制
  通过网络获取内容及速度缓存慢有开销巨大,较大相应需要在客户端与服务器之间进行多次往返通信,这回延迟浏览器获得处理内容的时间,还会增加访问者流量的费用,因此,缓存重复利用之前获取的资源能力成为性能优化的一个关键方面
  广义的缓存,可以分为四个,大家对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)) 
技术图片

  

  防抖
    在函数需要频繁触发时,只有当有足够空闲的时间时,才执行一次
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
/*
            校验用户是不是重复,用户输入完,向后端发送请求
            如果用户每次输入,都发生请求,造成请求过多
            用户停止输入字符串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‘)  性能检测

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

  技术图片

 

 

 

  列入:
      DNS查询耗时 通过使用domainLookupEnd - domainLookupStart  就等于dns查询的时间
      TCP链接耗时  通过 connectEnd - connectStart
      HTTP请求耗时 通过 responseEnd - responseStart 
      解析dom树耗时  通过 domComplete -  domInteractive
      白屏时间 通过 responseStart  - navigationStart
      DOMready时间 通过 domContentLoadedEventEnd - navigationStart
      onload时间 通过 loadEventEnd -  navigationStart 也即是onload回调函数执行的时间
 
Lighthouse分析web应用程序和web页面,收集关于开发人员最佳实践的现代性能指标和见解,让开发人员根据生成的评估页面,来进行网站优化和完善,提高用户体验。
  1.可以在谷歌商店安装一个Lighthouse一个插件就可以了,下面我是检测github网站的数据
技术图片
  2.使用node全局安装
npm install -g lighthouse

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

技术图片

 

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

技术图片

 

 技术图片

 

 浏览器渲染

  技术图片

  1.在这一步浏览器执行了所有的加载解析逻辑,在解析HTML的过程中发出了页面渲染所需要的各种外部资源请求
  2.浏览器将识别并加载所有的css样式信息与dom树合并,最终胜出页面render树,(:after :brfore这样的伪元素在这个环节被构建到DOM树中)
  3.页面中所有元素相对位置信息,大小等信息均在这一步得到计算
  4.在这一步浏览器会根据我们的DOM代码结果,把每一个页面图层转换为像素,并对所有的媒体文件进行解码
  5.最后一步浏览器会合并各个图层,讲数据有CPU输给GPU最终绘制在屏幕上,(复杂的视图会给这个阶段GPU计算带来一些压力,在实际中是为了优化动画性能,我们有时候会手动区分各个视图)
 
  渲染过程说白了,首先是基于HTML构建一个DOM树,这颗DOM树与css解析器解析除的CSSOM相结合,就有了布局渲染树,最后浏览器以布局渲染树为蓝本,去计算布局并绘制图像,我们页面初次渲染就大功告成了。
   
  之后每当一个新元素加入到这个DOM树中,浏览器便会通过css引擎查遍css样式表,找到符合该元素的样式应用到这个元素上,然后在重新去绘制他

web性能优化指南

标签:form   非关系型数据库   asc   最大   加载完成   work   new   worker   本地缓存   

原文地址:https://www.cnblogs.com/adolfmc/p/12065776.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!