zoukankan      html  css  js  c++  java
  • 前端性能优化构建优化、传输加载优化

    常见构建优化方案:

    1、tree-shaking:上下文未用到的代码(dead code),基于ES6 import export

    2、作用域提升:代码体积减小,提高执行效率

    3、noparse、DllPlugin

    4、code splitting代码拆分

    5、持久化缓存方案:给每个打包资源文件增加hash值,充分利用浏览器缓存

    常见网络传输优化:

    1、启用压缩Gzip,对传输资源进行体积压缩,可高达90%。

    2、启用Keep Alive,对TCP链接的复用。

    3、HTTP资源缓存:

      (1)Cache-Control/Expires

      (2)Last-Modified + If-Modified-Since

      (3)Etag + If-None-Match

    4、Service Workers,加速重复访问,离线支持

    Service Workers注意项:会延长首屏时间,但页面总加载时间减少,兼容性需要考虑如IE,只能在localhost或https下使用。

    5、使用HTTP2,HTTP2优势:二进制传输、请求响应多路复用、Server push减少了TTFB时间

    6、搭建SSR服务端渲染,加速首屏加载,更好的SEO

  • 相关阅读:
    Python基础之基本数据类型
    Python基础之变量
    mysql数据库
    进程与线程
    并发编程
    网络编程
    内置函数(魔法方法)
    组合,封装,访问限制机制,property装饰器
    面向对象之继承
    Web开发中最致命的8个小错误
  • 原文地址:https://www.cnblogs.com/MarsPGY/p/15782132.html
Copyright © 2011-2022 走看看