2022年1月9日
前端性能优化-其他优化方案
摘要： 1、PND到 iconfont，然后再到SVG解决移动端图标。 2、使用Flexbox优化布局，相比传统table或浮动布局，性能会更高。 3、优化资源加载的顺序，使用preload，prefetch调整浏览器加载资源的优先级。 preload：提前加载较晚出现，但对当前页面非常重要的资源，优先级比 阅读全文
posted @ 2022-01-09 21:27 火星_PGY 阅读(72) 评论(0) 推荐(0)
前端性能优化-构建优化、传输加载优化
摘要： 常见构建优化方案： 1、tree-shaking：上下文未用到的代码（dead code），基于ES6 import export 2、作用域提升：代码体积减小，提高执行效率 3、noparse、DllPlugin 4、code splitting代码拆分 5、持久化缓存方案：给每个打包资源文件增加 阅读全文
posted @ 2022-01-09 20:40 火星_PGY 阅读(78) 评论(0) 推荐(0)
前端性能优化-资源优化
摘要： 资源优化方向压缩和合并，目的是减少http请求数量、减少请求资源大小。 css、JS文件合并原则： 1、若干小文件可以尝试合并 2、无冲突，服务相同模块 3、不是为了优化合并而合并，按需合并，让用户更早看到和使用功能为主。 图片优化方案： 1、选择合适格式的图片，了解jpg、png、svg、webp 阅读全文
posted @ 2022-01-09 13:40 火星_PGY 阅读(96) 评论(0) 推荐(0)
前端性能优化-代码优化
摘要： JS的开销在哪里：加载、解析编译、执行 下图是谷歌演讲展示JS和图片之间的性能对比，相同大小的文件JS开销明显要比图片大的多： 加载优化方案： 1、Code splitting 代码拆分，按需加载 2、Tree shaking 代码减重 3、代码压缩 解析编译执行优化方案，主要是减少主线程工作量： 阅读全文
posted @ 2022-01-09 11:51 火星_PGY 阅读(368) 评论(0) 推荐(0)
前端性能优化-渲染优化
摘要： 一、现代浏览器网页渲染原理——关键渲染路径（critical rendering path） 这个过程无论首次加载还是后续操作都会经历这样的过程。 浏览器渲染页面过程： 1、浏览器构建对象模型： （1）构建DOM对象：HTML=>DOM （2）构建CSSOM对象：CSS=>CSSOM 2、浏览器构建 阅读全文
posted @ 2022-01-09 10:54 火星_PGY 阅读(343) 评论(0) 推荐(0)