前端面试拼图-实践经验

摘要:最近,看了下慕课2周刷完n道面试题,记录并添加部分可参考的文档,如下...

1. H5页面如何进行首屏优化?

        路由懒加载

        适用于SPA(不适用MPA)

        本质就是路由拆分,有限保证首页加载

        服务端渲染SSR

        传统的前后端分离(SPA)渲染页面的过程复杂

        SSR渲染页面过程简单,所以性能好

        如果是纯H5页面,SSR是性能优化的终极方案

        APP预取

        如果H5在APP WebView中展示,可使用APP预取

        用户访问列表页时,APP预加载页面首屏内容

        用户进入H5页面,直接从APP中获取内容,瞬间展示首屏

        分页

        针对列表页

        默认值展示第一页内容

        上划加载更多

        图片懒加载lazyLoad

        针对详情页

        默认只展示文本内容,然后触发图片懒加载

        注意:提前设置图片尺寸,尽量只重绘不重排

        Hybrid

        提前将HTML JS CSS下载到APP内部

        在APP webview中使用file://协议加载页面文件

        再用Ajax获取内容并展示(也可结合APP预 取)

        总结:服务端SSR是H5的终极优化方案(但成本也高)

        移动端H5要结合APP能力去优化

        严格来说,hybrid不是H5,但这里回答也没有问题

        扩展:SSR

        SSR(Server-Side Rendering,服务器端渲染)是一种将页面内容在服务器端生成并直接返回给客户端的技术。相比于传统的客户端渲染(CSR,Client-Side Rendering),SSR 在首次加载页面时可以直接呈现出完整的 HTML 内容,而不需要等待 JavaScript 文件下载和执行完成后再进行页面渲染,从而提高了首屏加载速度和搜索引擎优化(SEO)效果

        SSR是一门"古老"的技术,刚刚兴起Web1.0时,就是SSR技术:PHP ASP JSP等,Vue和React框架也分别有Nuxt.js(Vue)和Next.js(React)

2. 后端一次性返回10w条数据,你该如何渲染?

        后端返回10W条数据,本身技术方案设计不合理;

        JS可以处理10w条数据,但是渲染的DO会非常卡顿;

        自定义中间层

        自定义node.js中间层,获取并拆分这10W条数据

        前端对接node.js中间层(后端的问题优先考虑用后端的思维解决,中间件),而不是服务端

        成本比较高

        虚拟列表

        只渲染可视区域DOM

        其他区域不显示,只用<div>撑起高度

        随着浏览器滚动,创建和销毁DOM

        虚拟列表实现起来非常复杂(且效果不一定好,例如低配手机),可借用第三方lib,例如Vue-virtual-scroll-list、 React-virtualiszed

3. 前端常用的设计模式有哪些?并说明使用场景

        设计原则

        最重要的思想:开放封闭原则

        对扩展开放

        对修改封闭

        工厂模式

        用一个工厂那个函数,来创建实例,隐藏new

        如jQuery $函数,React 的createElement函数

class Foo{}
// 工厂模式
function factory(a, b, c) {// if elsereturn new Foo()
}
const f = factory(1, 2, 3)

        单例模式

        全局唯一的实例(无法生成第二个)

        如Vuex Redux的store ;如全局唯一的dialog modal

未完待续...

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/753841.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

ThreadLocal-内存泄露问题

ThreadLocal概述 ThreadLocal是多线程中对于解决线程安全的一个操作类&#xff0c;它会为每个线程都分配一个独立的线程副本从而解决了变量并发访问冲突的问题。ThreadLocal 同时实现了线程内的资源共享案例&#xff1a;使用JDBC操作数据库时&#xff0c;会将每一个线程的Conn…

从0到1理解MySQL的事务和ACID特性

从0到1理解MySQL的事务和ACID特性 在开始之前&#xff0c;我们先来了解一下MySQL的事务是什么&#xff0c;以及ACID是什么。 事务是什么&#xff1f; 事务可以简单地理解为一组数据库操作的集合&#xff0c;它们一起被视为一个不可分割的工作单元。事务要么全部成功执行&…

SpringBoot ApplicationListener实现发布订阅模式

文章目录 前言一、Spring对JDK的扩展二、快速实现发布订阅模式 前言 发布订阅模式(Publish-Subscribe Pattern)通常又称观察者模式&#xff0c;它被广泛应用于事件驱动架构中。即一个事件的发布&#xff0c;该行为会通过同步或者异步的方式告知给订阅该事件的订阅者。JDK中提供…

springboot 查看和修改内置 tomcat 版本

解析Spring Boot父级依赖 去到项目的根pom文件中&#xff0c;找到parent依赖&#xff1a; <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-parent</artifactId><version>${springboot.version}…

Error response from daemon Get server gave HTTP response to HTTPS client

使用docker compose拉起docker镜像时&#xff0c;若出现如下报错 Error response from daemon: Get "https://devops.test.cn:5000/v2/": http: server gave HTTP response to HTTPS client表示Docker守护进程无法从指定url获取响应&#xff0c; 可能原因有以下&…

苍穹外卖-day09:用户端历史订单模块(理解业务逻辑),商家端订单管理模块(理解业务逻辑),校验收货地址是否超出配送范围(相关API)

用户端历史订单模块 1. 查询历史订单&#xff08;分页查询&#xff09; 1.1 需求分析和设计 产品原型&#xff1a; 业务规则 分页查询历史订单可以根据订单状态查询展示订单数据时&#xff0c;需要展示的数据包括&#xff1a;下单时间、订单状态、订单金额、订单明细&#…

C解析YAML

在C语言中解析YAML文件&#xff0c;你可以使用如libyaml等专门的YAML解析库。以下是使用libyaml库进行YAML解析的一个基本示例。libyaml是一个用来解析和生成YAML数据的C库。 首先&#xff0c;你需要确保已经正确安装了libyaml库。对于许多Linux发行版&#xff0c;你可以使用包…

软考76-上午题-【面向对象技术3-设计模式】-创建型设计模式01

一、创建型设计模式一览 二、创建型设计模式 2-1、创建型设计模式的概念 一个类创建型模式使用继承改变被实例化的类&#xff1b; 一个对象创建型模式将实例化委托给另一个对象。 对应java的new一个对象。 2-2、简单工厂模式&#xff08;静态工厂方法&#xff09; 简单工厂…

一文解读ISO26262安全标准:概念阶段

一文解读ISO26262安全标准&#xff1a;概念阶段 1 相关项定义2 安全生命周期启动3 危害分析和风险评估 HaRa4 功能安全概念 由上一篇文章知道&#xff0c;安全生命周期包含概念阶段、产品开发阶段、生产发布后续阶段。本文详细解读概念阶段要进行的安全活动。 本部分规定了车辆…

猫头虎分享已解决Bug || TypeError: Cannot interpret ‘float‘ value as integer.

博主猫头虎的技术世界 &#x1f31f; 欢迎来到猫头虎的博客 — 探索技术的无限可能&#xff01; 专栏链接&#xff1a; &#x1f517; 精选专栏&#xff1a; 《面试题大全》 — 面试准备的宝典&#xff01;《IDEA开发秘籍》 — 提升你的IDEA技能&#xff01;《100天精通鸿蒙》 …

利用自定义 URI Scheme 在 Android 应用中实现安全加密解密功能

在现代移动应用开发中&#xff0c;安全性和用户体验是至关重要的考虑因素。在 Android 平台上&#xff0c;开发人员可以利用自定义 URI Scheme 和 JavaScript 加密解密技术来实现更安全的数据传输和处理。本文将介绍如何在 Android 应用中注册自定义 URI Scheme&#xff0c;并结…

蓝桥杯C++大学B组一个月冲刺记录2024/3/18

蓝桥杯C大学B组一个月冲刺记录2024/3/18 规则:每日三题 昨天因为前妻姐emo上了,静下来思考了点东西,就没做题啦.今日补上! 另外:博客浏览量破万了,写的东西有人看还是很开心的 1.母亲的牛奶 农夫约翰有三个容量分别为 A,B,C升的挤奶桶。 最开始桶 A和桶 B都是空的&#xff0c;…

计算机组成原理——自己制作一个cpu

cpu包括单周期cpu、中断cpu、多周期cpu 代码实现之后在实验箱看效果&#xff0c;并且看波形图 单周期波形 中断cpu 多周期cpu 1.单周期CPU总体电路图 如图是一个简单的基本上能够在单周期CPU上完成所要求设计的指令功能的数据通路和必要的控制线路图。其中指令和数据各存储在不…

【2024-03-18】顺丰春招笔试两道编程题解

恭喜发现宝藏&#xff01;搜索公众号【TechGuide】回复公司名&#xff0c;解锁更多新鲜好文和互联网大厂的笔经面经。 作者TechGuide【全网同名】 订阅专栏&#xff1a; 【专享版】2024最新大厂笔试真题解析&#xff0c;错过必后悔的宝藏资源&#xff01; 第一题&#xff1a;转…

超越想象的数据可视化:五大工具引领新潮流

在数据分析领域&#xff0c;数据可视化工具是每位分析师的得力助手。它们能够将复杂的数据转化为直观、易懂的图表和图像&#xff0c;帮助分析师快速洞察数据背后的规律与趋势。下面&#xff0c;我将从数据分析师的角度&#xff0c;为大家介绍五个常用的数据可视化工具。 一、…

【vue.js】文档解读【day 5】| ref模板引用

如果阅读有疑问的话&#xff0c;欢迎评论或私信&#xff01;&#xff01; 本人会很热心的阐述自己的想法&#xff01;谢谢&#xff01;&#xff01;&#xff01; 文章目录 模板引用前言访问模板引用模板引用与v-if、v-show的结合v-for中的模板引用函数模板引用 模板引用 前言 …

Vue.js+SpringBoot开发食品生产管理系统

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 加工厂管理模块2.2 客户管理模块2.3 食品管理模块2.4 生产销售订单管理模块2.5 系统管理模块2.6 其他管理模块 三、系统展示四、核心代码4.1 查询食品4.2 查询加工厂4.3 新增生产订单4.4 新增销售订单4.5 查询客户 五、…

二蛋赠书十八期:《一本书讲透Elasticsearch:原理、进阶与工程实践》

Elasticsearch 是一种强大的搜索和分析引擎&#xff0c;被广泛用于各种应用中&#xff0c;以其强大的全文搜索能力而著称。 不过&#xff0c;在日常管理 Elasticsearch 时&#xff0c;我们经常需要对索引进行保护&#xff0c;以防止数据被意外修改或删除&#xff0c;特别是在进…

PC-DARTS: PARTIAL CHANNEL CONNECTIONS FOR MEMORY-EFFICIENT ARCHITECTURE SEARCH

PC-DARTS&#xff1a;用于内存高效架构搜索的部分通道连接 论文链接&#xff1a;https://arxiv.org/abs/1907.05737 项目链接&#xff1a;https://github.com/yuhuixu1993/PC-DARTS ABSTRACT 可微分体系结构搜索(DARTS)在寻找有效的网络体系结构方面提供了一种快速的解决方案…

总线设备驱动框架

1.platform_device&#xff1a;修改设备树&#xff0c;添加设备&#xff08;device&#xff09;节点&#xff0c;设备树节点部分会被转换为 platform_device。 2.platform_driver&#xff1a; 首先定义入口&#xff0c;出口函数&#xff1b;构建platform_driver结构体&#xf…