腾讯-QQ浏览器-校招 · 第 1 轮 · 一面

虚拟列表是解决大数据量列表渲染性能问题的核心方案。其实现原理基于"只渲染可视区域"的思想。

具体实现上，首先需要确定容器的可视高度和每个列表项的高度。通过监听滚动事件，实时计算当前滚动位置对应的起始索引和结束索引。核心公式是：起始索引 = Math.floor(scrollTop / itemHeight)，结束索引 = 起始索引 + Math.ceil(containerHeight / itemHeight)。

在优化过程中遇到的主要挑战是处理动态高度的列表项。解决方案是维护一个位置缓存数组，记录每个列表项的实际高度和累计偏移量。当列表项高度发生变化时，需要更新缓存并重新计算后续项的位置。

缓冲区设置是性能优化的关键。通常在可视区域前后各增加5-10个列表项作为缓冲，具体数量需要根据列表项的复杂度和渲染耗时来调整。缓冲区过小会导致快速滚动时出现白屏，过大则会增加内存占用和渲染负担。

对于滚动性能优化，还需要结合防抖节流、requestAnimationFrame等技术，确保滚动的流畅性。

在虚拟列表的性能优化中，防抖和节流扮演着不同但互补的角色。

对于滚动事件本身，节流是更合适的选择。因为滚动是连续性操作，用户期望得到实时反馈，而不是等待操作结束后才响应。通常设置16-33ms的节流间隔，对应60-30fps的更新频率，既保证了流畅度又避免了过度计算。

防抖则主要用于一些计算密集型的操作。比如当滚动停止后，可能需要进行数据预加载、图片懒加载等操作，这些可以使用防抖来避免频繁触发。另外，对于搜索框结合虚拟列表的场景，搜索关键词的处理也适合使用防抖。

在实际实现中，还需要考虑组合使用的场景。比如可以对滚动事件使用节流进行实时响应，同时对复杂的重新计算逻辑使用防抖进行优化。这样既保证了用户体验，又避免了不必要的性能消耗。

需要注意的是，节流和防抖的时间设置需要根据具体业务场景调整，过短可能达不到优化效果，过长则会影响用户体验。

requestAnimationFrame是浏览器提供的专门用于动画优化的API，它能够确保回调函数在浏览器下一次重绘之前执行，这对虚拟列表的滚动性能优化具有重要意义。

在虚拟列表中，传统的做法是在滚动事件中直接更新DOM，这可能导致频繁的重排重绘，特别是在快速滚动时会出现掉帧现象。使用requestAnimationFrame可以将DOM更新操作延迟到浏览器的重绘周期，避免不必要的中间状态渲染。

具体实现上，当滚动位置发生变化时，不立即更新虚拟列表的显示状态，而是通过requestAnimationFrame调度更新操作。这样可以将多次快速的滚动操作合并成一次DOM更新，显著减少重排重绘的次数。

还可以结合时间切片的思想，将复杂的计算任务分解到多个帧中执行，避免长时间阻塞主线程。比如在处理大量数据的初始化时，可以使用requestAnimationFrame分批处理，保持页面的响应性。

需要注意的是，requestAnimationFrame的回调频率与显示器刷新率相关，通常是60fps，在某些高刷新率设备上可能更高。因此在使用时需要考虑兼容性和性能平衡。

Token持久化是现代Web应用身份认证的核心机制。其原理基于无状态的JWT（JSON Web Token）或类似的令牌系统，将用户身份信息编码在Token中，避免服务端维护会话状态。

在存储方案上，主要有三种选择：localStorage、sessionStorage和Cookie。localStorage提供持久化存储，用户关闭浏览器后Token仍然有效，适合"记住我"的场景。sessionStorage只在当前会话有效，安全性更高但用户体验稍差。Cookie可以设置httpOnly标志提高安全性，但受到同源策略限制。

登录过期处理需要建立完善的检测和响应机制。首先是主动检测，在每次发起请求前检查Token的过期时间，如果即将过期可以提前处理。其次是被动检测，通过HTTP拦截器捕获401或403状态码，当服务器返回认证失败时进行相应处理。

处理策略包括自动刷新和重新登录两种。自动刷新适合使用refresh token的场景，可以在用户无感知的情况下延续会话。重新登录则需要引导用户重新输入凭据，同时要保存用户当前的操作状态，避免数据丢失。

在实现上还需要考虑并发请求的处理，避免多个过期请求同时触发登录流程，以及异常情况的兜底方案。

无感刷新Token是提升用户体验的重要技术方案，其核心是在用户无察觉的情况下自动延续会话有效期。

实现基础是双Token机制：access token用于日常API调用，有效期较短（通常15-30分钟）；refresh token用于获取新的access token，有效期较长（通常7-30天）。这种设计平衡了安全性和用户体验。

具体实现流程：首先在HTTP请求拦截器中检测到Token过期（通常是收到401状态码），立即暂停当前请求并将其加入待重试队列。然后使用refresh token向认证服务发起刷新请求，获取新的access token和refresh token。

关键的技术细节是处理并发场景。当多个API同时遇到Token过期时，需要确保只发起一次刷新请求。可以使用Promise缓存机制，第一个过期请求触发刷新流程，后续请求等待同一个Promise的结果。

刷新成功后，更新本地存储的Token，然后重新发起所有待重试的请求。如果刷新失败，则清除本地Token并引导用户重新登录。

还需要考虑边界情况，比如refresh token也过期、网络异常、服务器错误等，都需要有相应的降级处理方案。

无感刷新Token的安全性是整个认证体系的关键环节，需要从多个维度进行防护。

首先是Token的生命周期管理。Access token应该设置较短的有效期，即使被窃取也能限制损害范围。Refresh token虽然有效期较长，但应该实现一次性使用机制，每次刷新后立即失效并生成新的refresh token，这样可以防止重放攻击。

存储安全是另一个重点。Refresh token不应该存储在容易被XSS攻击获取的地方，比如localStorage。更安全的做法是使用httpOnly的Cookie，或者采用内存存储结合服务端会话的方案。对于必须使用localStorage的场景，需要实施严格的XSS防护措施。

网络传输安全要求所有Token相关的请求都必须使用HTTPS，防止中间人攻击。同时可以实施证书绑定（Certificate Pinning）进一步提高安全性。

还需要建立异常检测机制。比如检测异常的刷新频率、来源IP变化、设备指纹变化等，当发现可疑行为时可以强制用户重新登录。服务端也应该维护Token的黑名单机制，能够主动撤销可疑的Token。

最后是审计和监控，记录所有Token的生成、刷新、使用情况，便于安全事件的追踪和分析。

获取用户设备信息是前端开发中的常见需求，主要用于统计分析、兼容性处理和安全防护等场景。

浏览器提供了navigator对象作为获取设备信息的主要接口。navigator.userAgent包含了浏览器和操作系统的详细信息，但需要通过正则表达式解析。navigator.platform提供操作系统平台信息，navigator.language获取用户的语言偏好。

对于更精确的设备识别，可以使用一些专门的库，比如UAParser.js、platform.js等，它们能够更准确地解析userAgent字符串，提取出浏览器名称、版本、操作系统、设备类型等信息。

现代浏览器还提供了一些新的API。navigator.getBattery()可以获取电池信息，screen对象提供屏幕分辨率和色深信息，navigator.connection提供网络连接类型。这些信息可以组合形成设备指纹，用于用户识别。

需要注意的是，随着隐私保护意识的增强，浏览器对设备信息的获取越来越严格。比如Chrome已经开始限制userAgent的详细程度，Safari也在减少可获取的设备信息。因此在实际应用中，需要考虑隐私合规和功能降级。

服务端也可以通过分析HTTP请求头获取设备信息，包括User-Agent、Accept-Language、Accept-Encoding等，结合IP地址可以获得更全面的用户画像。

这是一个涉及网络协议、浏览器架构、渲染引擎等多个技术领域的复杂过程，可以分为以下几个主要阶段：

DNS解析阶段：浏览器首先检查本地DNS缓存，如果没有找到对应记录，会依次查询操作系统缓存、路由器缓存、ISP DNS服务器，最终通过递归查询获得目标服务器的IP地址。现代浏览器还支持DNS预解析和HTTP/2的服务器推送来优化这个过程。

建立连接阶段：获得IP地址后，浏览器与服务器建立TCP连接，这涉及三次握手过程。如果是HTTPS请求，还需要进行TLS握手，包括证书验证、密钥交换等步骤。HTTP/2和HTTP/3协议在这个阶段有不同的优化策略。

发送请求和接收响应：浏览器构造HTTP请求报文，包含请求行、请求头、请求体等信息。服务器处理请求后返回响应，浏览器开始接收HTML文档。现代浏览器支持流式处理，可以在接收过程中就开始解析。

HTML解析和DOM构建：浏览器的HTML解析器开始工作，将HTML标记转换为DOM树。这个过程是增量的，遇到外部资源（CSS、JS、图片）时会触发相应的加载过程。解析过程中还会处理字符编码、错误恢复等问题。

CSS解析和样式计算：CSS解析器将样式表转换为CSSOM树，然后与DOM树结合进行样式计算，确定每个元素的最终样式。这个过程涉及选择器匹配、层叠规则、继承机制等复杂逻辑。

布局和绘制：渲染引擎根据DOM树和样式信息进行布局计算，确定每个元素的几何位置和大小。然后进行绘制，将元素转换为像素。现代浏览器使用分层和合成技术来优化这个过程。

JavaScript执行：JavaScript引擎解析和执行脚本，可能会修改DOM和样式，触发重新布局和绘制。现代浏览器使用JIT编译、V8引擎等技术来优化JavaScript执行性能。

HTTP缓存是Web性能优化的核心机制，通过避免重复的网络请求来提升用户体验和减少服务器负载。缓存机制可以分为强缓存和协商缓存两大类。

强缓存机制：当浏览器请求资源时，首先检查本地缓存中是否存在该资源的有效副本。强缓存的控制主要通过两个HTTP头实现：Cache-Control和Expires。Cache-Control是HTTP/1.1标准，提供了更精细的控制选项，如max-age指定缓存有效期，no-cache表示需要验证，no-store表示不缓存。Expires是HTTP/1.0标准，指定绝对过期时间，但容易受到客户端时间不准确的影响。

协商缓存机制：当强缓存失效或被禁用时，浏览器会向服务器发送请求验证资源是否已更新。协商缓存通过两组HTTP头实现：Last-Modified/If-Modified-Since和ETag/If-None-Match。Last-Modified记录资源的最后修改时间，但精度只到秒级，且可能存在文件修改时间变化但内容未变的情况。ETag是资源的唯一标识符，通常是内容的哈希值，能够更准确地判断资源是否变化。

缓存策略设计：不同类型的资源需要采用不同的缓存策略。静态资源如图片、CSS、JS文件通常设置较长的强缓存时间，并通过文件名哈希来处理更新问题。HTML文件通常设置较短的缓存时间或使用协商缓存，确保能及时获取更新。API接口根据数据特性选择合适的缓存策略。

现代缓存优化：Service Worker提供了更灵活的缓存控制能力，可以实现离线访问、缓存策略自定义等高级功能。HTTP/2的服务器推送可以主动向客户端发送资源，减少往返时间。CDN缓存在全球分布的边缘节点缓存资源，进一步提升访问速度。

同源策略是浏览器的核心安全机制，它限制了一个源的文档或脚本如何与另一个源的资源进行交互。同源的定义是协议、域名、端口三者完全相同，任何一个不同都被视为跨源访问。

同源策略的保护范围：主要包括DOM访问限制、Cookie和LocalStorage访问限制、AJAX请求限制等。这些限制防止了恶意网站窃取用户数据或进行CSRF攻击，但也给正常的跨域通信带来了挑战。

CORS解决方案：跨源资源共享是W3C标准，通过HTTP头来控制跨域访问。简单请求（GET、POST等特定条件）直接发送，服务器通过Access-Control-Allow-Origin等响应头决定是否允许访问。复杂请求需要先发送预检请求（OPTIONS），服务器确认允许后才发送实际请求。CORS还支持携带凭据、自定义头部等高级功能。

JSONP方案：利用script标签不受同源策略限制的特点，通过动态创建script标签来实现跨域请求。服务器返回JavaScript代码，调用预定义的回调函数传递数据。JSONP只支持GET请求，且存在安全风险，现在主要用于兼容老旧浏览器。

代理服务器方案：在同源的服务器上设置代理，将跨域请求转发到目标服务器。这种方案对前端透明，但增加了服务器负担。在开发环境中，webpack-dev-server等工具提供了便捷的代理配置。

其他解决方案：postMessage API可以实现不同窗口间的安全通信，常用于iframe通信。document.domain可以在主域相同的情况下实现跨子域访问。WebSocket协议不受同源策略限制，可以实现跨域实时通信。

JavaScript事件循环是理解异步编程的核心概念，它解释了JavaScript如何在单线程环境中处理并发操作。

基础概念：JavaScript引擎包含调用栈（Call Stack）、堆（Heap）、任务队列（Task Queue）等组件。调用栈负责执行同步代码，堆用于内存分配，任务队列存储待执行的异步回调。

执行机制：事件循环不断检查调用栈是否为空，如果为空就从任务队列中取出第一个任务放入调用栈执行。这个过程确保了异步操作不会阻塞主线程，同时保证了代码执行的有序性。

宏任务和微任务：ES6引入了微任务概念，将异步任务分为宏任务（MacroTask）和微任务（MicroTask）。宏任务包括setTimeout、setInterval、I/O操作、UI渲染等。微任务包括Promise.then、queueMicrotask、MutationObserver等。

执行优先级：每次事件循环会先执行完所有微任务，然后执行一个宏任务，再执行所有新产生的微任务，如此循环。这意味着微任务的优先级高于宏任务，Promise.then会在setTimeout之前执行。

实际应用：理解事件循环对于编写高质量的异步代码至关重要。比如在处理用户交互时，可以使用微任务来确保DOM更新的时机；在进行大量计算时，可以使用宏任务来分片处理，避免阻塞用户界面。

Node.js中的差异：Node.js的事件循环更复杂，包含多个阶段（timers、I/O callbacks、idle/prepare、poll、check、close callbacks），每个阶段都有自己的任务队列。process.nextTick的优先级甚至高于Promise.then。

闭包是JavaScript中最重要也是最容易被误解的概念之一，它涉及作用域、词法环境、垃圾回收等多个核心机制。

闭包的定义：闭包是指函数能够访问其外部作用域变量的特性，即使外部函数已经执行完毕。从技术角度讲，闭包是函数对象和其词法环境的组合。

作用域链的形成：当函数被创建时，JavaScript引擎会为其创建一个词法环境，包含该函数可以访问的所有变量和函数。作用域链是由当前执行环境的变量对象和所有外层环境的变量对象组成的链表结构。

变量查找机制：当访问一个变量时，JavaScript引擎会沿着作用域链从内向外查找。首先在当前作用域查找，如果没有找到就向上一级作用域查找，直到全局作用域。这个过程是在编译时确定的，称为词法作用域。

闭包的内存模型：当内部函数引用了外部函数的变量时，这些变量不会随着外部函数的执行结束而被销毁，而是被保存在闭包的词法环境中。这就是为什么闭包能够"记住"外部变量的原因。

实际应用场景：闭包在JavaScript中有广泛应用。模块模式利用闭包创建私有变量和方法；函数柯里化通过闭包实现参数的部分应用；事件处理器中经常使用闭包来保存状态；React Hooks的实现也大量依赖闭包机制。

潜在问题和优化：闭包会阻止垃圾回收，可能导致内存泄漏。特别是在循环中创建闭包、DOM事件处理器中引用外部变量等场景。解决方案包括及时清理引用、使用弱引用、避免不必要的闭包创建等。

高质量参考回答：

虚拟DOM是现代前端框架的核心技术，它通过JavaScript对象来描述真实DOM结构，实现高效的页面更新。

虚拟DOM的数据结构：虚拟节点通常包含标签名、属性、子节点等信息。可以设计为简单的对象结构：{tag: ‘div’, props: {className: ‘container’}, children: […]}。这种结构既能完整描述DOM信息，又便于JavaScript处理。

创建虚拟DOM：实现createElement函数来创建虚拟节点，支持嵌套结构和各种属性类型。还需要处理文本节点、组件节点等特殊情况。现代框架通常使用JSX语法，通过Babel转换为createElement调用。

Diff算法实现：这是虚拟DOM的核心，通过比较新旧虚拟DOM树找出差异。基础算法采用深度优先遍历，比较节点类型、属性、子节点等。优化策略包括同层比较、key值优化、启发式算法等，将O(n³)复杂度降低到O(n)。

DOM更新操作：根据Diff结果生成更新指令，包括创建、删除、移动、更新等操作。需要考虑操作的顺序和批量处理，避免不必要的DOM操作。还要处理事件绑定、生命周期等复杂情况。

性能优化策略：虚拟DOM的性能优势来自于减少直接DOM操作和批量更新。可以通过shouldComponentUpdate、React.memo等机制避免不必要的比较。时间切片技术可以将大量更新分散到多个帧中执行。

实际框架的实现：React的Fiber架构实现了可中断的渲染过程；Vue的响应式系统结合虚拟DOM实现了精确的依赖追踪；现代框架还引入了编译时优化，在构建阶段就确定哪些部分需要动态更新。

Vue的响应式系统是其核心特性，Vue 3在这方面进行了重大重构，带来了性能和功能的显著提升。

Vue 2的响应式实现：基于Object.defineProperty实现，通过劫持对象属性的getter和setter来追踪依赖和触发更新。初始化时需要递归遍历整个数据对象，为每个属性添加响应式处理。这种方式的限制包括：无法检测属性的添加和删除，需要使用Vue.set和Vue.delete；数组索引和length的变化无法直接监听，需要重写数组方法。

Vue 3的Proxy实现：使用ES6的Proxy API重写了响应式系统，可以监听整个对象而不是单个属性。Proxy能够拦截对象的所有操作，包括属性访问、赋值、枚举、函数调用等，提供了更完整的监听能力。

性能优势对比：Vue 3的响应式系统在多个方面都有性能提升。初始化性能更好，因为不需要递归遍历所有属性；内存占用更少，避免了为每个属性创建getter/setter；支持懒响应式，只有被访问的属性才会被转换为响应式。

功能增强：Vue 3支持更多数据类型的响应式处理，包括Map、Set、WeakMap、WeakSet等。新增了shallowReactive、readonly等API，提供了更精细的响应式控制。ref和reactive的设计让开发者能够更灵活地组织响应式数据。

组合式API的配合：Vue 3的响应式系统与组合式API深度集成，通过setup函数和各种响应式API，开发者可以更灵活地组织和复用逻辑代码。这种设计比Vue 2的选项式API更适合复杂应用的开发。

兼容性考虑：虽然Vue 3在响应式系统上有重大改进，但在API设计上保持了向后兼容，大部分Vue 2的代码可以在Vue 3中正常运行。同时提供了兼容性构建版本，帮助项目平滑迁移。

原型链是JavaScript实现继承的核心机制，理解原型链对于掌握JavaScript的面向对象编程至关重要。

基础概念：每个JavaScript对象都有一个内部属性[[Prototype]]，通常通过__proto__访问，指向该对象的原型。当访问对象的属性或方法时，如果对象本身没有该属性，JavaScript引擎会沿着原型链向上查找。

原型链的构成：原型链是由对象及其原型组成的链式结构。链的顶端是Object.prototype，它的原型是null。普通对象的原型链通常是：对象 -> Object.prototype -> null。数组对象的原型链是：数组 -> Array.prototype -> Object.prototype -> null。

构造函数和原型：函数对象有一个特殊的prototype属性，当函数作为构造函数使用时，新创建的实例对象的原型会指向构造函数的prototype属性。这是JavaScript实现类似类继承的基础机制。

属性查找机制：当访问对象属性时，查找顺序是：对象自身属性 -> 原型对象属性 -> 原型的原型对象属性，直到找到属性或到达原型链顶端。这个过程是动态的，原型对象的修改会影响所有相关实例。

继承的实现：JavaScript通过原型链实现继承。可以通过设置构造函数的prototype属性来建立继承关系，或者使用Object.create()直接指定对象的原型。ES6的class语法本质上也是基于原型链的语法糖。

现代JavaScript的改进：ES6引入了class语法，提供了更清晰的面向对象编程方式。Object.setPrototypeOf()和Object.getPrototypeOf()提供了更标准的原型操作方法。Proxy可以拦截原型链上的属性访问，实现更复杂的继承模式。

性能考虑：原型链查找有性能开销，特别是深层次的原型链。现代JavaScript引擎通过内联缓存、隐藏类等技术优化了原型链访问。在实际开发中，应该避免过深的原型链和频繁的原型修改。

前端项目的打包体积直接影响页面加载速度和用户体验，特别是在移动网络环境下。优化策略需要从多个维度综合考虑。

代码分割策略：这是最有效的优化手段之一。可以按路由分割，将不同页面的代码打包成独立的chunk，实现按需加载。也可以按功能模块分割，将第三方库、公共组件、业务代码分别打包。现代打包工具如Webpack、Vite都提供了强大的代码分割功能。

Tree Shaking优化：移除未使用的代码是减少体积的直接方法。需要使用ES6模块语法，避免CommonJS的动态引入。配置打包工具正确识别副作用，使用sideEffects字段标记纯模块。对于第三方库，选择支持Tree Shaking的版本，或者使用按需引入的方式。

依赖库优化：分析打包结果，识别体积较大的依赖库。可以寻找更轻量的替代方案，比如用day.js替代moment.js。对于UI组件库，使用按需引入避免打包整个库。考虑使用CDN加载常用库，减少打包体积。

资源压缩和优化：启用Gzip或Brotli压缩，可以显著减少传输体积。对JavaScript和CSS进行压缩混淆，移除注释和空白字符。图片资源使用适当的格式和压缩比例，考虑使用WebP等现代格式。

构建工具配置：合理配置打包工具的优化选项。设置合适的chunk分割策略，避免过多的小文件。使用长期缓存策略，为静态资源添加哈希值。配置externals将大型库排除在打包之外。

现代化技术应用：使用ES2015+的语法特性，现代浏览器的原生支持更高效。考虑使用模块联邦等微前端技术，实现代码共享。利用HTTP/2的多路复用特性，优化资源加载策略。

监控和分析：使用webpack-bundle-analyzer等工具分析打包结果，识别优化机会。建立打包体积监控机制，防止体积回归。定期审查依赖库，移除不再使用的包。

BFC（Block Formatting Context，块级格式化上下文）是CSS布局中的重要概念，理解BFC对于解决各种布局问题具有重要意义。

BFC的定义和特性：BFC是页面中的一个独立渲染区域，内部元素的布局不会影响外部元素，外部元素也不会影响内部元素。BFC具有以下特性：内部的块级盒子垂直排列；相邻块级盒子的垂直margin会重叠；BFC区域不会与浮动元素重叠；计算BFC高度时会包含浮动元素。

触发BFC的条件：多种CSS属性可以触发BFC的创建。overflow属性值不为visible（如hidden、auto、scroll）；float属性值不为none；position属性值为absolute或fixed；display属性值为inline-block、table-cell、table-caption、flex、inline-flex、grid、inline-grid等；根元素html本身就是一个BFC。

清除浮动的应用：这是BFC最常见的应用场景。当父元素包含浮动子元素时，父元素的高度会塌陷。通过为父元素创建BFC（如设置overflow:hidden），可以让父元素包含浮动子元素的高度，实现清除浮动的效果。

防止margin重叠：相邻块级元素的垂直margin会发生重叠，取较大值。通过将其中一个元素包装在BFC容器中，可以防止margin重叠。这在设计组件间距时特别有用。

实现自适应布局：BFC区域不会与浮动元素重叠的特性可以用来实现两栏布局。左侧元素浮动，右侧元素创建BFC，就能实现左侧固定宽度、右侧自适应的布局效果。

现代布局方案的对比：虽然BFC在传统布局中很重要，但现代CSS提供了更好的布局方案。Flexbox和Grid布局能够更直观地解决大部分布局问题，不需要依赖BFC的特性。但理解BFC仍然有助于理解CSS的渲染机制和解决兼容性问题。

实际开发中的注意事项：创建BFC可能会带来副作用，比如overflow:hidden会裁剪溢出内容。需要根据具体场景选择合适的触发方式。在使用CSS框架时，了解BFC有助于理解框架的实现原理和解决样式冲突。

响应式布局是现代Web开发的基础要求，需要让网站在不同设备和屏幕尺寸上都能提供良好的用户体验。

基础概念和原理：响应式设计的核心思想是"一套代码，多端适配"。通过灵活的布局、可伸缩的图片、CSS媒体查询等技术，让页面能够根据设备特性自动调整布局和样式。

视口设置：响应式布局的第一步是正确设置viewport meta标签。<meta name="viewport" content="width=device-width, initial-scale=1.0">告诉浏览器按设备宽度渲染页面，禁用默认的桌面视口行为。

弹性布局系统：使用相对单位而不是固定像素值。百分比用于宽度设置，em/rem用于字体和间距，vw/vh用于视口相关的尺寸。这样可以让布局随屏幕尺寸自然缩放。

媒体查询策略：CSS媒体查询是响应式设计的核心工具。可以根据屏幕宽度、高度、分辨率、设备方向等条件应用不同的样式。常见的断点设置包括移动端（<768px）、平板（768px-1024px）、桌面端（>1024px）。

现代布局技术：Flexbox非常适合一维布局，可以轻松实现元素的对齐、分布、换行等效果。CSS Grid适合二维布局，能够创建复杂的网格系统。这两种技术都具有良好的响应式特性。

图片和媒体适配：使用max-width:100%让图片自适应容器宽度。picture元素和srcset属性可以根据设备特性加载不同尺寸的图片。CSS的object-fit属性控制图片在容器中的显示方式。

移动优先策略：从移动端开始设计，然后通过媒体查询逐步增强桌面端体验。这种方法符合移动互联网的发展趋势，也有助于性能优化。

性能考虑：响应式设计需要考虑不同设备的性能差异。移动端应该优先加载关键内容，使用懒加载技术处理非关键资源。避免在小屏幕上加载大尺寸图片。

测试和调试：使用浏览器开发者工具的设备模拟功能进行测试。在真实设备上验证效果，特别是触摸交互和性能表现。建立响应式设计的测试流程。

移动端性能优化是前端开发的重要课题，需要从网络、渲染、交互等多个维度进行综合优化。

网络层面优化：移动网络环境复杂，延迟高、带宽有限。首先要减少HTTP请求数量，合并CSS/JS文件，使用CSS Sprites或字体图标。启用Gzip/Brotli压缩，可以减少60-80%的传输体积。使用CDN加速静态资源加载，选择地理位置较近的节点。

资源加载优化：实施资源优先级策略，关键资源使用preload预加载，非关键资源使用prefetch预获取。图片使用懒加载，只加载可视区域内的图片。选择合适的图片格式，WebP在移动端有很好的支持和压缩效果。

代码层面优化：减少JavaScript包体积，使用Tree Shaking移除未使用代码。避免阻塞渲染的同步脚本，将非关键JS设置为async或defer。CSS优化包括移除未使用样式、使用CSS压缩、避免复杂选择器。

渲染性能优化：减少DOM操作次数，批量更新DOM避免多次重排重绘。使用CSS3硬件加速，transform和opacity属性可以触发GPU加速。避免强制同步布局，读取布局属性后立即修改样式会导致性能问题。

移动端特有优化：处理300ms点击延迟，使用touch事件或FastClick库。优化滚动性能，使用transform代替改变position，启用-webkit-overflow-scrolling: touch。合理使用viewport设置，避免页面缩放导致的性能问题。

内存管理：移动设备内存有限，需要特别注意内存泄漏。及时清理事件监听器、定时器、闭包引用。使用对象池技术复用对象，减少垃圾回收压力。

电池和CPU优化：减少不必要的动画和定时器，使用requestAnimationFrame替代setInterval。避免复杂的CSS动画，优先使用transform和opacity。合理使用Web Workers处理计算密集任务。

监控和测试：使用Lighthouse等工具进行性能评估，关注FCP、LCP、CLS等核心指标。在真实移动设备上测试，模拟器无法完全反映真实性能。建立性能监控体系，持续跟踪性能指标。

现代技术应用：Service Worker可以实现离线缓存和后台同步。HTTP/2的多路复用减少了连接开销。Progressive Web App技术提供了接近原生应用的体验。

最长公共子串（Longest Common Substring）是经典的字符串算法问题，在文本处理、生物信息学、版本控制等领域有广泛应用。

问题定义：给定两个字符串，找出它们之间最长的连续相同子串。注意这里强调"连续"，这是与最长公共子序列（LCS）的主要区别。子序列不要求连续，而子串必须是连续的字符序列。

动态规划解法：这是解决该问题的经典方法。创建一个二维数组dp，其中dp[i][j]表示以第一个字符串第i个字符和第二个字符串第j个字符结尾的最长公共子串长度。

状态转移方程：如果str1[i-1] == str2[j-1]，则dp[i][j] = dp[i-1][j-1] + 1；否则dp[i][j] = 0。这个方程体现了子串必须连续的特性，一旦字符不匹配，长度就重置为0。

算法实现思路：初始化二维数组，第一行和第一列为0。遍历两个字符串，根据状态转移方程填充数组。在填充过程中记录最大长度和对应的结束位置，最后根据结束位置和长度提取出最长公共子串。

空间优化：由于每个位置只依赖于左上角的值，可以使用滚动数组将空间复杂度从O(mn)优化到O(min(m,n))。如果只需要长度而不需要具体子串，甚至可以进一步优化。

时间复杂度分析：基本算法的时间复杂度是O(mn)，其中m和n分别是两个字符串的长度。空间复杂度在未优化时是O(mn)，优化后可以降到O(min(m,n))。

实际应用场景：在代码版本控制中，可以用来找出两个文件版本之间的相同代码块。在文本相似度检测中，最长公共子串的长度可以作为相似度的一个指标。在生物信息学中，用于DNA序列比对分析。

与其他算法的对比：最长公共子序列允许字符不连续，问题更复杂但应用更广泛。编辑距离算法关注的是将一个字符串转换为另一个字符串的最小操作数。KMP算法解决的是字符串匹配问题，可以看作是最长公共子串的特殊情况。