姜波
高级Bug开发
Canvas Ci/Cd Css Docker Docker Compose Dockerfile Express Flutter Git Gitlab Gulp Html Item2 Js Koa Mock Mongodb Mysql Nginx Node Pm2 React Socket Vue Webpack 填坑 微前端 性能优化 架构设计 正则 算法 设计原则 设计模式 面试

© 2019 - 2021 姜波 苏ICP备20040891号

JavaScript填坑进阶篇

JavaScript填坑进阶篇

星期五,九月 18 日,2020 年

全局对象和全局变量对象

全局对象GO

  • 是浏览器天生自带的存储属性和方法的堆,是一个对象

全局变量对象VO

  • 是我们代码创建的变量要存储的地方,是栈内存

全局执行上下文

@ 姜波
6 分钟阅读
JavaScript填坑基础篇

JavaScript填坑基础篇

星期二,九月 15 日,2020 年

alert

  • 需要等到alert弹出框,点击确定关闭后,后面的代码才执行 - alert会阻碍住线程的渲染
  • alert弹出的内容都会默认转换为字符串 - 调用toString

其他类型转数字类型

字符串转数字

  • 空字符串转数字=>0

Symbol转数字

  • 不能把Symbol类型转换为数字,否则报错
@ 姜波
4 分钟阅读
性能优化面试

性能优化面试

星期四,九月 10 日,2020 年

从输入URL到页面加载显示完成都发生了什么

Browser Process

  • UI Thread:搜索 or URL => 搜索引擎or请求的站点
@ 姜波
2 分钟阅读
渲染优化

渲染优化

星期四,九月 10 日,2020 年

移动端图标SVG

从PNG到IconFont

  • 多个图标一套字体,减少获取时的请求数量和体积
  • 矢量图形,可伸缩
  • 直接通过CSS修改样式(颜色、大小等)

从IconFont到SVG

@ 姜波
2 分钟阅读
传输优化

传输优化

星期四,九月 10 日,2020 年

启用压缩Gzip

@ 姜波
1 分钟阅读
资源优化

资源优化

星期三,九月 9 日,2020 年

资源的压缩与合并

为什么要压缩与合并

  • 减少http请求数量
  • 减少请求资源大小

HTML压缩

@ 姜波
2 分钟阅读
代码优化

代码优化

星期三,九月 9 日,2020 年

JS开销和如何缩短解析时间

代码解决方案

  • Code splitting代码拆分,按需加载
  • Tree shaking代码减重

减少主线程工作量

@ 姜波
2 分钟阅读
性能指标和优化目标

性能指标和优化目标

星期二,九月 8 日,2020 年

性能指标

加载

  • 理解加载瀑布图
  • 基于HAR存储与重建性能信息
  • 速度指数(Speed Index)
  • 重要测量指标
    • Speed Index页面渲染速度
    • TTFB网络请求耗时
    • 页面加载时间
    • 首次渲染

响应

@ 姜波
2 分钟阅读

公众号

Image text

QQ

Image text

微信

Image text

微信打赏

Image text

社交链接