在后端合作开发组织工作中，操控性强化是两个非常重要的难题。两个强化较好的中文网站不但能提升使用者新体验，还能对浏览器强化造成积极主动的负面影响。因而，熟练后端操控性强化基本功，不但能提升中文网站的组织工作效率，还能提升应聘者在前端复试中的错误率。
责任编辑将为他们如是说许多提升后端操控性的最差课堂教学，并提供更多许多常用的复试难题和标准答案。透过自学责任编辑，你将能更快地认知后端操控性强化的必要性，并掌控怎样响铃这类复试难题。
一、天然资源强化
当他们要展开后端操控性强化时，天然资源强化一般来说是两个必不可少的关键步骤。下列是许多天然资源强化的基本功：
1、相片强化：相片的大小不一能直接负面影响页面读取速率，因而增大相片的表面积是强化的重点项目。下列是许多基本功：
（1）相片填充：可采用许多新浪网精简版，比如 Tinypng、Kraken、Imageoptim之类；
（2）纯文字：对大相片，可采用纯文字来防止在读取时挤占过多的频宽和天数；
（3）WebP文件格式：WebP是由Google合作开发的相片文件格式，其表面积显著更小，能透过相片服务供应商采用；
（4）积极主动响应式相片：透过采用<picture>、<srcset>、<sizes>等条码，能更快的适应环境相同萤幕大小不一的电子设备，因此达至更快的使用者新体验。
2、CSS与JavaScript文档强化：CSS与JavaScript文档也是页面读取和可视化速率的主要就困局，下列是许多基本功：
CSS强化
（1）CSS强化防止采用过多、过分繁杂的示例；
（2）将CSS放在页面的<head>中，防止阻塞页面渲染；
（3）移除不必要的样式、注释等；
（4）采用精简版对CSS展开填充。
JavaScript强化
（1）将JS放在页面底部，防止阻塞页面渲染；
（2）填充合并JS文档，在增大文档表面积的同时减少文档请求数量；
（3）采用异步读取脚本（<script async></script>），让页面先读取出来，JS 后读取；
（4）采用延迟读取脚本（<script defer></script>）使得JS脚本在HTML元素读取完成后再执行。
3、字体强化：为了使字体不负面影响页面的读取速率，下列是许多基本功：
（1）采用系统默认字体，比如Arial、Helvetica等；
（2）只引用必要的字体（尽可能少），因此采用CDN来加速；
（3）将引入的外部字体放在页面底部，防止阻塞页面的渲染。
二、网络请求强化
后端网络请求强化是提升页面操控性的两个重要方面。下列是许多常用的强化方法：
1、减少请求数量：减少请求数量能显著提升页面操控性，主要就有下列几种方式：
（1）合并脚本和样式表文档。
（2）采用CSS Sprites技术减少相片请求数量。
（3）采用字体图标（iconfont）代替相片。
（4）天然合并天然资源的情况自行处理，比如font文档本身天然就能支持多个字体。
2、采用缓存：采用缓存能防止重复请求相同的天然资源，提升读取速率，主要就有下列几种方式：
（1）采用浏览器缓存。
（2）采用HTTP缓存。
（3）使用localStorage或者sessionStorage。
3、减少请求表面积：减少请求表面积能减少请求天数，提升页面操控性，主要就有下列几种方式：
（1）填充天然资源文档。
（2）去除不必要的注释和空格。
（3）使用WebP文件格式代替JPEG和PNG文件格式，WebP是Google合作开发的一种新型相片文件格式，在相同质量下比PNG和JPEG更小。
三、渲染强化
1、延迟读取（懒读取）：将许多不必要或挤占较大频宽的内容，如视频或相片，采用懒读取的方式来延迟读取，能有效提升页面读取速率。方法包括：
（1）将相片的src属性修改为data-src ，并配合JavaScript实现懒读取。
（2）采用Intersection Observer等API实现懒读取（需要检测浏览器兼容性）。
下面是采用Intersection Observer实现懒读取的示例代码：
const observer = new IntersectionObserver(entries => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const img = entry.target
const imageUrl = img.dataset.src
img.src = imageUrl
observer.unobserve(img)
}
})
})
const images = document.querySelectorAll(img[data-src])
images.forEach(img => {
observer.observe(img)
})
2、防止重排（reflow）：重排是指浏览器为了重新布局页面，需要重新计算元素的位置信息和大小不一信息，一般来说会涉及到重新计算整个回流树的布局信息。重排是两个非常消耗操控性的操作，应尽量防止。方法包括：
（1）尽量减少采用表格布局。
（2）尽量减少采用DOM操作，能采用DocumentFragment、一次性修改多个元素等方式来强化。
（3）防止频繁修改元素的样式，能采用类名切换等方式来批量修改样式。
四、缓存强化
透过有效地采用缓存，能减少网络请求，提升页面读取速率和使用者新体验。下面是许多后端缓存强化的方法和建议：
1、静态天然资源缓存：对不经常更改的静态天然资源，如样式表（CSS）、脚本（JavaScript）和相片等，能透过设置缓存头来指定其缓存天数，使客户
示例代码：
// 透过设置缓存头（Cache-Control、Expires），指定静态天然资源的缓存天数
app.use(express.static(public, { maxAge: 86400000 }));
2、HTTP缓存：利用HTTP头中的缓存策略来缓存积极主动响应，能有效减少重复请求相同天然资源的次数。
示例代码：
// 透过设置积极主动响应头（Cache-Control、Expires、ETag），指定缓存策略
app.get(/api/data, (req, res) => {
res.setHeader(Cache-Control, public, max-age=86400);
res.send(Hello, World!);
});
3、数据缓存：对许多会频繁请求的数据，能将其缓存在客户端，以减少请求次数。能采用浏览器的Web Storage（如localStorage或sessionStorage）来实现数据的缓存。
示例代码：
// 将数据存储在 localStorage 中
localStorage.setItem(data, JSON.stringify(data));
const cachedData = localStorage.getItem(data);
4、相片懒读取：对页面中的相片天然资源，能采用懒读取技术，即仅读取可见区域中的相片，而对不可见的相片，则等到使用者滚动到可见区域时再展开读取，防止一次性读取过多的相片。
示例代码：
<img src=”” data-src=”image.jpg” class=”lazy-load-img”>
<script>
// 懒读取相片
const lazyLoadImages = document.querySelectorAll(.lazy-load-img);
lazyLoadImages.forEach(image => {
if (image.getBoundingClientRect().top <= window.innerHeight) {
image.src = image.dataset.src;
}
});
</script>
5、缓存动态生成的内容：对许多动态生成的内容，能采用缓存机制，将其缓存在服务器或客户端，防止频繁重复生成相同的内容。
示例代码：
// 在服务器端缓存动态生成的内容
const cachedContent = cache.get(dynamic-content);
if (cachedContent) {
res.send(cachedContent);
} else {
const dynamicContent = generateDynamicContent();
cache.set(dynamic-content, dynamicContent);
res.send(dynamicContent);
}
综上所述，透过合理利用缓存，能减少网络请求，提升后端操控性和使用者新体验。根据具体情况选择适合的缓存强化策略，能在一定程度上强化后端操控性。
五、操控性监控与调试
当涉及到后端操控性强化时，操控性监控和调试是两个不可忽视的重要环节。透过监控和调试工具，能帮助他们了解页面的操控性指标，并定位操控性困局，以便采取相应的强化措施。下面是许多后端操控性监控与调试的方法和建议：
1、浏览器合作开发者工具：现代浏览器都提供更多了强大的合作开发者工具（DevTools），其中包含了各种调试和操控性分析的功能。能采用浏览器合作开发者工具中的网络面板（Network Panel）来查看网络请求的操控性指标，比如请求天数、大小不一、详细的请求天数线等。还能采用操控性面板（Performance Panel）来分析页面的读取操控性，包括读取天数、FPS、内存采用等指标。
2、Lighthouse：Lighthouse是两个由Google合作开发的开源工具，用于评估页面的质量和操控性。它能生成详细的报告，包括页面的操控性、可访问性、最差课堂教学等方面的指标，并给出相应的强化建议。能透过Chrome浏览器的合作开发者工具中的Lighthouse面板来运行测试并查看报告。
下列是示例图：
3、Web Vitals：Web Vitals是Google推出的一组关键的操控性指标，用于衡量页面的使用者新体验。其中包括Largest Contentful Paint（最大内容绘制）、First Input Delay（首次输入延迟）和 Cumulative Layout Shift（累计布局偏移）等指标。透过监控这些指标，能了解页面的关键操控性数据，并展开针对性的强化。能采用浏览器的操控性面板或第三方库（如 web-vitals）来捕获和报告这些指标。
4、第三方监控工具：除了浏览器自带的工具外，还有许多第三方的操控性监控工具能采用。比如，能采用Google Analytics的操控性监控功能来跟踪并报告使用者的读取天数、页面视图和使用者可视化等。还有许多其他的监控工具，如New Relic、Pingdom、Datadog等，也提供更多了丰富的操控性监控和报告功能。
5、错误监控工具：在操控性调试的过程中，也不能忽视错误监控。在页面中发生的JavaScript错误或异常可能会导致操控性难题，因而及时捕获和报告这些错误是很重要的。能采用工具如Sentry、Bugsnag、TrackJS等来监控JavaScript错误，并及时展开报告和修复。
综上所述，透过合理采用操控性监控与调试工具，能帮助他们了解页面的操控性状况，并展开相应的强化。选择适合的工具，并深入研究其采用方法，是强化后端操控性的关键一步。
六、复试中常用操控性强化难题
1、什么是操控性强化？请谈谈你对操控性强化的认知？
后端操控性强化是指在后端页面或应用程序合作开发过程中，透过各种技术和策略的应用，以提升使用者新体验和页面读取速率的目标而展开的强化组织工作。
后端操控性强化能包括下列几个方面：
（1）减少请求次数：透过合并和填充CSS、JavaScript以及图像等静态天然资源，减少请求的数量，从而减少页面读取的天数。
（2）缓存强化：利用浏览器缓存机制，将页面或天然资源保存在使用者本地，以便于下次访问时能更快地读取。
（3）延迟读取：将页面中许多不急需的天然资源延迟读取，以强化初始读取天数。比如将相片、视频等天然资源延迟读取或者透过懒读取技术实现。
（4）相片强化：透过填充相片大小不一、选择适当的相片文件格式以及采用CSS或JS技术实现相片懒读取等手段来减少页面中相片的读取天数和大小不一。
（5）后端缓存：透过合理利用浏览器缓存和CDN（内容分发网络）等技术，缓存静态天然资源，减少服务器的请求压力和数据传输量。
（6）DOM操作强化：减少不必要的DOM操作，防止频繁的重绘和重排，以提升页面的渲染操控性。
（7）积极主动响应式设计：适配相同电子设备和萤幕尺寸，采用积极主动响应式布局和媒体查询等技术，以提供更多更快的使用者新体验。
（8）减少HTTP请求大小不一：采用填充算法来增大CSS、JavaScript等文件的大小不一，以减少页面读取天数。
（9）合理采用JavaScript和CSS：防止过多的JavaScript和CSS代码，强化代码结构和逻辑，减少不必要的计算和渲染，以提升页面的积极主动响应速率。
总的来说，后端性能强化的目标是提升使用者访问页面或应用程序的速率和积极主动响应性，减少读取天数，提升使用者新体验，同时也有利于提升中文网站的SEO排名和降低服务器负载。
2、在后端合作开发过程中，你都采用过哪些操控性强化技术？
（1）填充和合并文档：对CSS和JavaScript文档展开填充和合并，减少请求次数和文档大小不一，从而提升读取速率。
（2）相片强化：透过填充相片大小不一、采用适当的相片文件格式，以及采用懒读取技术来减少相片读取天数和大小不一。
（3）懒读取：延迟读取页面上的相片、视频或其他天然资源，使它们在使用者需要访问时再读取，从而减少初始读取天数。
（4）天然资源缓存：设置适当的缓存头部，并利用浏览器缓存机制，将静态天然资源保存在使用者本地，减少服务器请求。
（5）代码强化：减少不必要的代码，防止重复计算、渲染和请求，提升代码的执行组织工作效率。
（6）减少重排和重绘：防止频繁操作DOM，合并操作、采用CSS动画等技术减少页面重排和重绘，提升渲染操控性。
（7）积极主动响应式设计：采用积极主动响应式布局和媒体查询等技术，使页面能适配相同电子设备和萤幕尺寸，提供更多更快的使用者新体验。
（8）采用CDN：采用内容分发网络（CDN），将静态天然资源分布到全球的服务器节点上，减少天然资源读取的天数和延迟。
（9）代码分割和按需读取：将代码分割成较小的模块，按需读取，减少首次读取的天数和天然资源量。
（10）服务端渲染（SSR）：采用服务端渲染技术生成静态HTML，减少客户端渲染所需的天数和组织工作量。
3、平时你是如何对代码展开操控性强化的？
（1）采用静态分析工具：透过采用静态分析工具，能检查代码中的潜在难题、内存泄漏、不必要的对象创建等，并展开相应的修复和强化。
（2）采用运行时分析工具：透过运行时分析工具，如Time Profiler，你能监测应用程序的运行天数和操控性分布。能检测到具体的函数、方法或代码块中所消耗的天数，并根据分析结果展开操控性强化。
（3）在真机上展开测试：为了确保操控性分析数据的准确性，建议在真实的电子设备上展开测试，而不是在模拟器上展开。模拟器在Mac上运行，CPU速率往往较快，而真机上的操控性更接近使用者实际采用场景。
（4）强化天数繁杂度：检查代码中的繁杂循环、递归以及不必要的计算，并尝试寻找更高效的算法和数据结构来减少天数繁杂度，从而提升应用程序的操控性。
（5）强化内存消耗：检查内存泄漏、不必要的内存分配和释放等难题，并及时释放不再采用的对象和天然资源，以减少内存消耗，提升应用程序的操控性和稳定性。
总结
责任编辑他们主要就如是说了后端操控性强化的天然资源强化、网络请求强化、渲染强化、缓存强化以及操控性监控和调试。后端操控性强化在复试中是两个必不可少的专业技能，它不但展示了他们对后端合作开发的深入认知，还显示了他们对使用者新体验和浏览器强化的重视，掌控这些后端操控性强化的基本功将使他们在复试中更具竞争力！
