性能优化
文章平均质量分 63
黑木令
这个作者很懒,什么都没留下…
展开
-
性能优化: 资源合并与压缩 -- 文件合并(CSS与JavaScript 文件合并提升前端性能)
之前有整理过一部分知识点, 一直没有发布, 因为都是有关 CSS 方面的零散内容; 现在想想无论分享什么内容都需要慢慢积累, 所以还是决定将之前整理的相关内容验证之后慢慢分享给大家, 不仅仅是 CSS; 这个专题 就是前端性能相关的内容; 不积跬步,无以至千里, 一时得失莫要在意 。好了废话不多说, 直接上代码以及图例(为了让大家方便阅读, 都有自己验证过程的一些图片作为分享) 。资源合并与压缩 – 文件合并1. 文件不合并的问题:1. 文件与文件之间有插入的上行请求, 增加了 N-1 个网络延迟原创 2021-07-09 15:56:45 · 25934 阅读 · 4 评论 -
性能优化: CSS 和 JS 的装载与执行(一个网站在浏览器端, 是如何进行渲染的、CSS+JS 渲染过程中的性能优化点)
之前有整理过一部分知识点, 一直没有发布, 因为都是有关 CSS 方面的零散内容; 现在想想无论做什么都需要慢慢积累, 所以还是决定将之前整理的相关内容验证之后慢慢分享给你们, 现在看到感觉还挺有意思 。好了废话不多说, 直接上代码以及图例(为了让大家方便阅读, 都有自己验证过程的一些图片作为分享) 。1. CSS 和 JS 的装载与执行 1. 一个网站在浏览器端, 是如何进行渲染的 2. HTML 渲染过程中的一些特点2. 需要了解的知识点 1. 理解浏览器端 html / css /原创 2021-07-07 22:50:12 · 26204 阅读 · 3 评论 -
性能优化: 前端图片的相关内容 -- 概述(讲解前端各种图片格式以及不同格式的图片对性能的影响)
之前有整理过一部分知识点, 一直没有发布, 因为都是有关 CSS 方面的零散内容; 现在想想无论做什么都需要慢慢积累, 所以还是决定将之前整理的相关内容验证之后慢慢分享给你们, 现在看到感觉还挺有意思 。好了废话不多说, 直接上代码以及图例(为了让大家方便阅读, 都有自己验证过程的一些图片作为分享) 。1. 图片的相关优化 – 概述 1. jpg 图片的解析过程 2. png8/png24/png32 之间的区别 3. 不同图片格式常用的业务场景2. jpg 图片的解析过程 1.原创 2021-06-10 23:45:20 · 63675 阅读 · 0 评论 -
性能优化: 图片的相关优化 -- 优化项 : 图片压缩
之前有整理过一部分知识点, 一直没有发布, 因为都是有关 CSS 方面的零散内容; 现在想想无论做什么都需要慢慢积累, 所以还是决定将之前整理的相关内容验证之后慢慢分享给你们, 现在看到感觉还挺有意思 。好了废话不多说, 直接上代码以及图例(为了让大家方便阅读, 都有自己验证过程的一些图片作为分享) 。1. 图片压缩: 图片压缩方式 1. 针对真实图片情况, 舍弃一些相对无关紧要的色彩信息 。 2. css雪碧图: 1. 把网站中用到的一些图片整合到一张单独的图片上; 减少网站的 ht原创 2021-06-10 23:42:53 · 12749 阅读 · 0 评论 -
性能优化: 资源合并与压缩 -- 压缩(前端开发过程中 JavaScript、HTML、CSS 文件的压缩)
之前有整理过一部分知识点, 一直没有发布, 因为都是有关 CSS 方面的零散内容; 现在想想无论做什么都需要慢慢积累, 所以还是决定将之前整理的相关内容验证之后慢慢分享给你们, 现在看到感觉还挺有意思 。好了废话不多说, 直接上代码以及图例(为了让大家方便阅读, 都有自己验证过程的一些图片作为分享) 。资源合并与压缩 – 压缩: 概述 1. 资源的合并与压缩涉及到的优化点: 1. 减少 http 请求数量 。 2. 减小请求资源的大小 。 2. google 首页案例原创 2021-06-09 13:30:49 · 33855 阅读 · 0 评论 -
性能优化: 避免重绘与回流的实现方式
之前有整理过一部分知识点, 一直没有发布, 因为都是有关 CSS 方面的零散内容; 现在想想无论做什么都需要慢慢积累, 所以还是决定将之前整理的相关内容验证之后慢慢分享给你们, 现在看到感觉还挺有意思 。好了废话不多说, 直接上代码以及图例(为了让大家方便阅读, 都有自己验证过程的一些图片作为分享) 。1. 避免重绘与回流: 实现方式 1. 使用 translate 代替 top 改变 。 2. 使用 opacity 代替 visibility 。 3. 不要一条一条的修改 DOM 的样式,原创 2021-06-09 13:27:48 · 60783 阅读 · 0 评论 -
性能优化: http 请求的过程及潜在的性能优化点
之前有整理过一部分知识点, 一直没有发布, 因为都是有关 CSS 方面的零散内容; 现在想想无论做什么都需要慢慢积累, 所以还是决定将之前整理的相关内容验证之后慢慢分享给你们, 现在看到感觉还挺有意思 。好了废话不多说, 直接上代码以及图例(为了让大家方便阅读, 都有自己验证过程的一些图片作为分享) 。1. 什么是 Web 前端 1. Web 前端本质上是一种 GUI软件, 可以直接借鉴其它 GUI软件 系统架构设计方法 。 1. 什么是 GUI软件? 1. 图形化用户界面:原创 2021-06-07 22:52:43 · 39958 阅读 · 2 评论 -
前端性能优化——概述(概括前端性能优化入手点)
之前有整理过一部分知识点, 一直没有发布, 因为都是有关 CSS 方面的零散内容; 现在想想无论做什么都需要慢慢积累, 所以还是决定将之前整理的相关内容验证之后慢慢分享给你们, 现在看到感觉还挺有意思 。好了废话不多说, 直接上代码以及图例(为了让大家方便阅读, 都有自己验证过程的一些图片作为分享) 。1. 前端性能优化点:1. 4 个层面 与 8 个点 。1. 4 个层面:1. 网络层面2. 构建层面3. 浏览器渲染层面4. 服务端层面2. 8个点:1. 资源的合并与压缩 。2原创 2021-06-07 22:48:42 · 33965 阅读 · 0 评论