前端进阶之旅前端进阶之旅
基础篇
进阶篇
高频篇
精选篇
手写篇
面经篇
AI 篇
原理篇
每日一题
小程序题库
知识卡片
  • 场景篇按分类整理的大前端场景考点
  • 历年面经按年份追踪真实考点
  • 算法题库NEW在线编码即时判题
  • 专项自测100 题快速查漏
  • 前端基础
    • HTTP从报文一路讲到 HTTPS
    • 浏览器渲染、事件循环、进程
    • 计算机基础Linux、网络、操作系统
  • 进阶专项
    • 设计模式23 种模式怎么用
    • 前端系统进阶学习大型项目工程化
    • 前端综合文章长期沉淀的实践文
  • 工程与工具
    • Node学习指南从环境搭建到服务端
    • NPM工作流script、依赖与发布
    • Docker容器化部署上手
    • Canvas图形与动画实战
  • 路线与导图
    • 思维导图知识点全景图
    • 学习路线按图索骥不跑偏
  • 动态
    • 公众号动态公众号历史文章
    • 博客动态站长的技术博客
    • 开发者导航常用工具与文档站
  • AI 助手随时提问,即时解析
  • AI 模拟面试模拟真实面试 + 报告
  • AI 知识地图串起全站知识点
  • AI 定制路线按你的简历现排
AI 热点
旧版
基础篇
进阶篇
高频篇
精选篇
手写篇
面经篇
AI 篇
原理篇
每日一题
小程序题库
知识卡片
  • 场景篇按分类整理的大前端场景考点
  • 历年面经按年份追踪真实考点
  • 算法题库NEW在线编码即时判题
  • 专项自测100 题快速查漏
  • 前端基础
    • HTTP从报文一路讲到 HTTPS
    • 浏览器渲染、事件循环、进程
    • 计算机基础Linux、网络、操作系统
  • 进阶专项
    • 设计模式23 种模式怎么用
    • 前端系统进阶学习大型项目工程化
    • 前端综合文章长期沉淀的实践文
  • 工程与工具
    • Node学习指南从环境搭建到服务端
    • NPM工作流script、依赖与发布
    • Docker容器化部署上手
    • Canvas图形与动画实战
  • 路线与导图
    • 思维导图知识点全景图
    • 学习路线按图索骥不跑偏
  • 动态
    • 公众号动态公众号历史文章
    • 博客动态站长的技术博客
    • 开发者导航常用工具与文档站
  • AI 助手随时提问,即时解析
  • AI 模拟面试模拟真实面试 + 报告
  • AI 知识地图串起全站知识点
  • AI 定制路线按你的简历现排
AI 热点
旧版

图解前端性能优化

首页2018-01-12 11:24:03Front-End
性能优化

# 一、css和js的装载与执行

# 1.1 HTML 页面加载渲染的过程

# 1.2 HTML渲染过程的一些特点

# 1.3 css 阻塞和 js 阻塞

# 1.3.1 CSS阻塞

# 1.3.2 JS阻塞

# 二、资源的压缩与合并

# 2.1 文件合并

# 2.2 css、js 及 HTML压缩

# 2.2.1 CSS压缩

# 2.2.2 JS压缩

# 2.2.3 HTML压缩

# 2.3 http 清求的过程及潜在的性能优化点

# 三、图片相关的优化

# 3.1 不同格式图片常用的业务场景

# 3.2 图片压缩几种方法-雪碧图、Image inline

# 3.2.1 使用矢量图

# 3.2.2 在安卓下使用webp

# 四、 懒加载与预加载

# 4.1 懒加载原理

# 4.2 预加载原理

# 4.3 懒加载、预加载使用场景

# 4.4 预加载原生 js 和 PreloadJS 实现

# 五、缓存

# 六、重绘与回流

# 6.1 什么是重绘与回流

# 6.1.1 重绘

# 6.1.2 回流

# 6.2 避免重绘回流的两种方法

# 6.3 css 性能让 Javacript 变慢?

# 6.4 案例解析-重绘、回流及图层

# 6.5 实战优化点总结

# 七、浏览器存储

# 7.1 cookies

# 7.2 LocalStorage、SessionStorage

# 7.2.1 LocalStorage

# 7.2.2 SessionStorage

# 7.3 IndexedDB

# 7.4 案例解析

# 7.5 PWA与Service Workers

# 7.5.1 PWA

# 7.5.2 Service Workers

# 7.6 Service Workers-离线应用

# 八、移动H5前端性能优化指南

fe
  • 一、css和js的装载与执行
    • 1.1 HTML 页面加载渲染的过程
    • 1.2 HTML渲染过程的一些特点
    • 1.3 css 阻塞和 js 阻塞
      • 1.3.1 CSS阻塞
      • 1.3.2 JS阻塞
  • 二、资源的压缩与合并
    • 2.1 文件合并
    • 2.2 css、js 及 HTML压缩
      • 2.2.1 CSS压缩
      • 2.2.2 JS压缩
      • 2.2.3 HTML压缩
    • 2.3 http 清求的过程及潜在的性能优化点
  • 三、图片相关的优化
    • 3.1 不同格式图片常用的业务场景
    • 3.2 图片压缩几种方法-雪碧图、Image inline
      • 3.2.1 使用矢量图
      • 3.2.2 在安卓下使用webp
  • 四、 懒加载与预加载
    • 4.1 懒加载原理
    • 4.2 预加载原理
    • 4.3 懒加载、预加载使用场景
    • 4.4 预加载原生 js 和 PreloadJS 实现
  • 五、缓存
  • 六、重绘与回流
    • 6.1 什么是重绘与回流
      • 6.1.1 重绘
      • 6.1.2 回流
    • 6.2 避免重绘回流的两种方法
    • 6.3 css 性能让 Javacript 变慢?
    • 6.4 案例解析-重绘、回流及图层
    • 6.5 实战优化点总结
  • 七、浏览器存储
    • 7.1 cookies
    • 7.2 LocalStorage、SessionStorage
      • 7.2.1 LocalStorage
      • 7.2.2 SessionStorage
    • 7.3 IndexedDB
    • 7.4 案例解析
    • 7.5 PWA与Service Workers
      • 7.5.1 PWA
      • 7.5.2 Service Workers
    • 7.6 Service Workers-离线应用
  • 八、移动H5前端性能优化指南

← 移动设备分辨率对照与移动端适配方案echart使用小结 →