前端性能优化
关注
分享
扫一扫
笑道三千
我今年两岁半了，学编程还来不来得及？？？？
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
图片懒加载的原理和实现
一，前置知识 1，为什么要图片懒加载 懒加载是一种对网页性能优化的方式，比如当访问一个页面的时候，优先显示可视区域的图片而不是一次性加载所有图片，当需要显示时，再发送图片请求，避免打开网页时加载过多资源。 当一个网站的加载图片过多时就需要懒加载的协助，页面图片多时，在首次载入时一次性加载会耗费时间长，使用懒加载可以使页面加载速度快、减轻服务器的压力、节省流量。 如下图： 随着滚轮滚动，底部的图片会被不断地加载，从而显示在页面上，也就是说懒加载其实就是按需加载，当页面需要显示图片的时候才进行加载，否则不加载原创 2020-12-23 00:25:40 · 10908 阅读 · 4 评论 -
前端性能优化（慕课网笔记）-4-资源的优化
一，html,css，js的压缩，这个后期靠打包构建工具来实现 二，图片的优化 1，jpg 优点：很高的压缩比，但是可以很好保存画质 应用：大图片如首屏轮播图等 缺点：边缘锯齿 2，png 1,优点:背景透明，线条纹理，边缘的处理很好 2,应用：logo和小图片的使用 3，缺点：体积较大 3，WebP png同样的质量，但是压缩比例更大。但是浏览器的兼容还不是很好。 三，图片加载的优化 上面讲的是单个图片如果过大的处理方式，可以选择合适的图片格式或者采取图片压缩的手段。 但是如果图片的大小不是很大，可是原创 2020-12-22 00:34:47 · 293 阅读 · 1 评论 -
前端性能优化（慕课网笔记）-3-代码优化
一，基本概念 js资源耗时长，原因在于它不仅仅作为一个资源，需要加载，更因为它作为代码，需要被解析。 对于js文件的优化，主要考虑以下两点： 1，Code splitting 代码拆分，按需加载，也就是只加载当前页面需要的js,剩余的js按需加载 2，Tree shaking 代码减重，形象点说就是你去摇一棵树，那么它枯萎的叶子就会掉下来。比如说你加载了一个第三方库api.js，但是仅仅使用到了其中的一些封装的函数，而其他的没有使用到的就被“摇晃下去”，不参与打包。 另外，从js代码的解析和执行来看，可以原创 2020-12-21 23:36:34 · 286 阅读 · 0 评论 -
前端性能优化（慕课网笔记）-2-渲染优化（浏览器）
一，浏览器渲染原理 1，页面渲染的流程 当浏览器拿到资源后，做了啥才将页面呈现给用户？ 2，布局（回流）与绘制（重绘） 第一次布局叫布局，后续DOM操作等导致的布局叫回流。 影响回流的操作： 可以打开rendering查看情况：绿色的部分就是发生了重绘的部分： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style原创 2020-12-20 21:41:25 · 357 阅读 · 1 评论 -
前端性能优化学习（慕课网）笔记
一，指标的讲解 1，network 打开谷歌浏览器： 以淘宝为例，刷新加载： 它是电商网站，首页上有很多图片，动图之类的东西，肯定是做过很多优化的。 点进瀑布图：拉动这里可以调整查看的区域和状态，让瀑布图更大些： 瀑布图中有两根线，一根蓝线是dom加载完成的时间，而红线则是页面所有资源加载完成的时间。 或者悬浮后按回车，进入timing： 图中标签表示我记笔记的顺序： 如果想保存本次页面加载结果，可以在瀑布图空白处右键，然后保存为.har文件即可。 2，lighthouse 它是google集成到原创 2020-12-20 00:32:10 · 517 阅读 · 1 评论