- 博客(10)
- 收藏
- 关注
RSS订阅原创 一道笔试题：课程分组
一位老师教一个班级的学生们四门课，分别是数学，音乐，英语和自然课，对于在上这些课程的学生们满足以下条件，每节课程只有3个学生，这个班任意两个学生至少一起上一门课程，计算该班最多有多少个学生符合上诉条件的分组可能。
2023-11-07 05:10:17
552
2
原创 前端性能优化：7.页面渲染优化
本文将主要关注浏览器获取到资源后，进行渲染部分的相关优化内容。7.1 页面渲染性能页面渲染阶段对性能体验的应i昂与资源加载阶段同样重要，而对于设计高交互频次的应用来说可能更加重要。本节将整个渲染过程划分为五个串行阶段进行概述。优化渲染的实质，就是尽量压缩每个阶段的执行时间或跳过某些阶段的执行。7.1.1 流畅的使用体验要达到怎样的性能指标，才能满足用户流畅的使用体验呢？目前大部分折别的屏幕分辨率都在60fps左右，也就是每秒屏幕会刷新60次，所以要满足用户的体验期望，就需要浏览器在渲染页面动画或
2022-01-20 17:25:33
2846
原创 前端性能优化：6.项目构建优化
通过对页面生命周期过程的了解，我们知道为了展示出想要的页面，需要许多相关的资源文件，诸如HTML文件、CSS文件、JavaScript文件及图片等其他资源文件。只有所需的资源都被浏览器请求到后，通过渲染阶段才会达到期待的页面效果，那么如何更快速地请求到资源就成为一个值得关注的优化点。比如能否压缩请求资源的大小？能否将请求的资源进行合并以减少发起HTTP请求的数量？本文将首先分别介绍HTML文件、CSS文件、JavaScript文件压缩的原理和方法，然后从工程实践角度出发，讨论时下十分热门的前端构建工具we
2022-01-14 11:43:59
559
原创 前端性能优化：5.高性能的JavaScript代码
用户通过浏览器访问页面的过程，除了输入URL地址到所访问页面完成首屏渲染，更多的时候页面在相应与用户的交互。高性能网站的要求不仅是执行顺畅无BUG，还希望对用户的页面操作能够更快速响应，而且在执行完任务的同时占用更少的资源。5.1 数据存取无论哪种计算机语言，说到底它们的作用都是对数据的存取与处理，JavaScript也不例外。若能在处理数据之前，更快速的读取到数据，那么必然会对程序执行性能产生积极的作用。本节建工数据的存取及作用域链的角度，探讨一些在JavaScript中能提升性能的方式。5.1.
2021-12-31 17:46:29
925
原创 前端性能优化：4.资源加载优化
根据HTTP Archive网站的统计数据，截止到2021年12月互联网页面的请求数据量中，图像资源已经占据了60%~65%，这仅是平均数据，对于电商或图片社交场景，这个比例将更大。想要获得更好的性能体验，只靠资源压缩与恰当的文件格式类型，是很难满足期望的。我们还需要针对资源加载过程进行优化，该环节所要做的内容可概括为分清资源加载的优先级顺序，仅加载当前所必需的资源，并利用系统空闲提前加载可能会用到的资源。即本文将探讨的内容：资源的优先级、延迟加载和预加载。4.1 图像延迟加载4.1.1什么是延迟加载
2021-12-27 17:11:10
1032
原创 前端性能优化：3.图像资源优化
一条高效传递信息的原则：字不如表，表不如图。图像资源优化的根本思想：压缩。无论选取何种图像的文件格式，还是针对同一种格式压缩至更小的尺寸，其本质都是用更小的资源开销来完成图像的传输和展示。3.1 图像基础3.1.1 图像是否必须如果一个页面打开后有很多图像，那么用户其实很难快速梳理出有效信息，即便获取到了也会让用户感觉很累。当确定了图像的展示效果必须存在时，在前端实现上也并非一定就要用图像文件，还存在一些场景可以使用更高效的方式来实现所需的效果。网站中一个图像在不同的页面或不同的交互状态下，需
2021-12-24 10:24:39
864
原创 前端性能优化：2.前端页面的生命周期
2.1 一道题经典问题：从浏览器地址栏输入URL后，到页面渲染出来，整个过程发生了什么？前端阶段作答：浏览器接收到URL，到网络请求线程的开启。一个完整的HTTP请求发出。服务器接收到请求并转到具体的处理后台。前后台之间的HTTP交互和涉及的缓存机制。浏览器接收到数据包后的关键渲染路径。JS引擎的解析过程。2.2 网络请求线程开启URL结构：Protocol://Host:port/Path?Query#Fragment标识 名称 备注Protocol 协议头 说明浏览器如何处理要打
2021-12-22 17:42:16
825
原创 前端性能优化：1.什么是前端性能优化
1.1 性能的起因人无我有，人有我优，人优我廉，人廉我专1.2 性能的影响1.2.1 用户的留存根据Google营销平台提供的调研发现，如果网站页面加载时间超过3，就会有53%的移动网站的访问遭到用户抛弃。同时她们还针对加载时间分别在5s内和20s内的网站进行比较，发现加载时间在5s内的网站，用户的停留时间相比会长70%，用户在一定时间内从该网站离开的跳出率会低35%，而网站上展示广告的可见率也会高25%。1.2.1 网站的转化率根据Mobify的调研，发现商品的结账页面加载时间每减少100ms
2021-12-22 17:06:53
716
原创 Javascript 类型判断
JS的基本类型JS的基本类型共有七种：bigInt（bigInt是一种内置对象，是处symbol外的第二个内置类型）、number、string、boolean、symbol、undefined、null。复杂数据类型有对象（object）包括基本的对象、函数（Function）、数组（Array）和内置对象（Date等）。判断类型的方法方法一、typeof方法基本数据类型除了null外都返回对应类型的字符串。typeof 1 // "number" typeof 'a' // "string
2021-11-09 17:32:26
69
原创 求解仓库设置位置问题
求解仓库设置位置问题城市街道图如图所示，所有街道都是水平或者垂直分布，假设水平和垂直方形均有m+1条，任何两个相邻位置之间的距离为1。在街道的十字路口有n个商店，图中的n=3、m=8，3个商店的坐标位置分别是（2，4）、（5，3）和（6，6）。现在需要在某个路口设置建立一个合用的仓库。若仓库位置为（3，5），那么这三个商店到仓库的路程总长度最少是10，设计一个算法找到仓库的最佳位置，使得所有商店...
2019-04-21 23:10:38
3046
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人