这是我参加青训营笔记活动的第12天

web前端性能优化

1、web前端本质是一个GUI软件

• web前端本质是一个GUI软件

  • 比如安卓CS架构，打包apk，应用商店下载，实际访问的是本地资源

  • web前端是从远程服务器端获得资源，再返回，访问

  • cdn ( 缓存分发静态资源 )

    • CDN这个技术其实说起来并不复杂，最初的核心理念，就是将内容缓存在终端用户附近。CDN=更智能的镜像( 并非源内容服务器的完整复制，而是部分内容的缓存 )+缓存+流量导流。

      内容源不是远么？那么，我们就在靠近用户的地方，建一个缓存服务器，把远端的内容，复制一份，放在这里，不就OK了？

    • 到底什么是CDN？ - 知乎 (zhihu.com)

2、渲染

• 渲染

  • 大型框架，如react，vue等渲染都是直接在浏览器进行渲染的，模板通过框架代码进行渲染，会造成首屏渲染性能损耗

  • 前端性能优化 - 首屏渲染优化实现及其必要性 - 简书 (jianshu.com)

    • 首屏渲染加载优化，其实通俗说起来就是：“刚进页面加载快点”
    • 网易云渲染首屏时候会有跳过和打广告，这段时间在进行html资源加载，即：0.2s白屏 -> 0.6s预加载动画 -> 0.2s代码分片骨架屏动画，就完成了LCP

  • 通常需要服务端渲染以及渲染优化的方案

  • 网络请求过程中一些潜在的性能优化点：

    • dns是否可以通过缓存减少dns查询时间
    • 网络请求过程走最近的网络环境
    • 相同的静态资源是否可以缓存
    • 能否减少请求http请求大小
    • 减少http请求
    • 服务端渲染

3、资源合并与压缩

• 资源合并与压缩

  • html，css，js压缩( js压缩与混乱：代码保护 )，文件合并，gzip

    • nodejs提供html-minifier工具 压缩html，css，js
    • 后端模板引擎压缩：服务器压缩
    • clear-css压缩css