爱站网能不能挖掘关键词福州产品网页制作的公司

当前位置： 首页 > news >正文

爱站网能不能挖掘关键词,福州产品网页制作的公司,好的做详情页的网站有哪些,迁西网站开发HTTP、Web常用协议等等 更新日志 2024年9月5日 —— 什么情况下会导致浏览器内存泄漏#xff1f; 文章目录 HTTP、Web常用协议等等更新日志1. 网络请求的状态码有哪些#xff1f;1#xff09;1xx 信息性状态码2#xff09;2xx 成功状态码3#xff09;3xx 重定向状态码4 文章目录 HTTP、Web常用协议等等更新日志1. 网络请求的状态码有哪些11xx 信息性状态码22xx 成功状态码33xx 重定向状态码44xx 客户端错误状态码55xx 服务器错误状态码 2.在 Web 开发中常用的协议和标准有哪些1协议2标准 3.如何处理跨域问题1CORS跨源资源共享2JSONPJSON with Padding3代理4 iframe postMessage5 WebSocket 4.get请求传参长度的误区、get和post请求在缓存方面的区别1误区2实际上 HTTP协议 从未规定 GET/POST 的请求长度限制是多少。3在缓存方面的区别 5.简单说说你对 token 的理解1概念2作用3特点 6.简单说说你对 axios 的理解1概述2主要特点3应用场景 7. ajax原理1基本概念2工作流程3优点 8.什么情况下会导致浏览器内存泄漏1意外的全局变量2事件监听器未移除3闭包使用不当4缓存未清理5大型数据结构未释放

1. 网络请求的状态码有哪些 11xx 信息性状态码 100 Continue表示目前为止一切正常客户端可以继续发送请求或者忽略这个响应。101 Switching Protocols服务器根据客户端的请求切换协议。 22xx 成功状态码 200 OK最常见的成功状态码表示请求已成功响应主体包含所请求的资源。201 Created表示请求成功并且服务器创建了新的资源。202 Accepted表示服务器已接受请求但尚未处理。204 No Content表示请求成功但响应没有实体内容。 33xx 重定向状态码 301 Moved Permanently表示请求的资源已被永久移动到新位置浏览器会自动重定向到新位置。302 Found表示请求的资源临时被移动到其他位置浏览器会自动重定向到新位置。但与 301 不同的是这个重定向可能是临时的。303 See Other表示请求的资源存在另一个 URI应使用 GET 方法获取该资源。304 Not Modified表示资源未被修改客户端可以使用缓存的版本。307 Temporary Redirect与 302 类似但客户端应保持请求方法不变进行重定向。 44xx 客户端错误状态码 400 Bad Request表示请求有语法错误或请求无法被服务器理解。401 Unauthorized表示请求需要用户认证通常是因为没有提供有效的身份验证凭证。403 Forbidden表示服务器理解请求但拒绝执行通常是因为用户没有足够的权限访问资源。404 Not Found表示服务器找不到请求的资源。405 Method Not Allowed表示请求方法不被允许例如使用了 POST 请求但服务器只允许 GET 请求。406 Not Acceptable表示服务器无法根据客户端的请求头返回满足要求的资源。408 Request Timeout表示客户端请求超时服务器在规定时间内没有收到完整的请求。409 Conflict表示请求与服务器的当前状态冲突例如提交的内容与已有资源冲突。429 Too Many Requests表示客户端发送的请求过多超出了服务器的限制。 55xx 服务器错误状态码 500 Internal Server Error表示服务器内部错误通常是服务器遇到了意外情况无法完成请求。501 Not Implemented表示服务器不支持请求的功能无法完成请求。502 Bad Gateway表示作为网关或者代理的服务器从上游服务器接收到无效的响应。503 Service Unavailable表示服务器暂时不可用通常是由于服务器过载或正在进行维护。504 Gateway Timeout表示作为网关或者代理的服务器在等待上游服务器响应时超时。505 HTTP Version Not Supported表示服务器不支持请求中使用的 HTTP 版本。 2.在 Web 开发中常用的协议和标准有哪些 1协议 HTTPHyperText Transfer Protocol超文本传输协议 是用于在 Web 浏览器和 Web 服务器之间传输数据的基础协议。目前主要使用的版本是 HTTP/1.1 和 HTTP/2。HTTP/2 相比 HTTP/1.1 有更高的性能支持多路复用、头部压缩等特性。特点包括无状态、基于请求/响应模式等。 HTTPSHyperText Transfer Protocol Secure超文本传输安全协议 在 HTTP 的基础上通过 SSL/TLS 加密来确保数据传输的安全。广泛用于需要保护用户数据如登录信息、支付信息等的场景。提供了数据加密、身份验证和数据完整性校验等功能。 FTPFile Transfer Protocol文件传输协议 虽然在 Web 开发中不是主要用于网页传输但在一些场景下可能用于文件上传和下载例如网站后台管理中上传文件到服务器。支持两种模式主动模式和被动模式。 WebSocket 一种在单个 TCP 连接上进行全双工通信的协议。允许服务器主动向客户端推送数据而不仅仅是客户端请求后服务器响应的模式。常用于实时通信应用如在线聊天、实时数据更新等。
   2标准 HTMLHyperText Markup Language超文本标记语言 用于创建网页的结构和内容。目前 HTML5 是广泛使用的版本支持丰富的多媒体元素、语义化标签、本地存储等特性。 CSSCascading Style Sheets层叠样式表 用于控制网页的外观和布局。CSS3 引入了很多新特性如动画、渐变、弹性布局等。 JavaScript 一种客户端脚本语言用于为网页添加交互性和动态效果。有众多的框架和库如 React、Vue.js、Angular 等遵循 ECMAScript 标准。 RESTRepresentational State Transfer表述性状态转移 一种软件架构风格用于设计 Web 服务。强调资源的概念通过 HTTP 方法GET、POST、PUT、DELETE 等对资源进行操作。 JSONJavaScript Object NotationJavaScript 对象表示法 一种轻量级的数据交换格式。常用于 Web 服务之间的数据传输以及与前端的交互。 XMLeXtensible Markup Language可扩展标记语言 另一种常用的数据交换格式。虽然不如 JSON 简洁但具有良好的扩展性和自描述性。
   3.如何处理跨域问题 跨域问题是由同源政策Same-Origin Policy引起的浏览器出于安全考虑限制 JavaScript 在一个源域、协议、端口上与另一个源进行交互。下面是一些处理跨域问题的方法 1CORS跨源资源共享 CORS 是一种机制允许服务器通过在响应中添加特定 HTTP 头部来指示哪些源可以访问资源。 示例代码 // 服务器端响应头可以如下设置 Access-Control-Allow-Origin: * // 或者指定特定源 Access-Control-Allow-Origin: https://example.com// 在 Node.jsExpress的例子中 const express require(express); const cors require(cors); const app express(); app.use(cors()); // 允许所有跨域请求
   // 或者 app.use(cors({ origin: https://example.com, // 只允许特定源 })); app.get(/data, (req, res) { res.json({ message: Hello, world! }); }); app.listen(3000, () { console.log(Server running on port 3000); });2JSONPJSON with Padding JSONP 是一种非官方的跨域请求方式它利用
   示例代码 //客户端下载数据 function handleResponse(data) { console.log(data); } const script document.createElement(script); script.src https://example.com/data?callbackhandleResponse; document.body.appendChild(script);//服务器响应 handleResponse({ message: Hello, world! });3代理 通过设置同源服务器如 Webpack dev server 或 Nginx代理请求可以有效避免跨域问题。客户端的请求会先发送到代理服务器代理服务器再请求目标服务器的数据。 Webpack 示例配置 webpack.config.js module.exports { devServer: { proxy: { /api: { target: http://api.example.com, changeOrigin: true, }, }, }, };4 iframe postMessage 如果应用的两个部分可以通过 iframe 嵌套的方式共存可以使用 postMessage 方法实现跨域消息传递。 示例代码 //主窗口发送消息 const iframe document.getElementById(my-iframe); iframe.contentWindow.postMessage(Hello from parent, https://example.com);//iframe 接收消息 window.addEventListener(message, (event) { if (event.origin https://parent-origin.com) { console.log(event.data); // 处理消息 } });5 WebSocket WebSocket 协议不受同源政策的限制可以用于跨域通信。需要服务器和客户端都支持 WebSocket。 示例代码 const socket new WebSocket(ws://example.com/socket); socket.onopen function(event) { socket.send(Hello Server!); }; socket.onmessage function(event) { console.log(event.data); };总结 选择合适的跨域解决方案取决于具体的情况通常情况下CORS 是最常见和推荐的方案。 如果控制服务器端那么配置 CORS 将是最高效的方式。 如果不能改动服务器其他方式如 JSONP 和代理也可以考虑。 4.get请求传参长度的误区、get和post请求在缓存方面的区别 1误区 我们经常认为get请求参数长度存在限制而post请求参数长度是无限制的。 2实际上 HTTP协议 从未规定 GET/POST 的请求长度限制是多少。 对get请求参数的限制是来源与浏览器或 web 服务器浏览器或 web 服务器限制了url的长度。为了明确这个概念我们必须再次强调下面几点: HTTP 协议 未规定 GET/POST 的长度限制GET 的最大长度限制是因为浏览器和web服务器限制了 URI 的长度不同的浏览器和 web 服务器限制的最大长度不一样要支持 IE则最大长度为 2083 byte 若只支持 Chrome则最大长度 8182byte。
   3在缓存方面的区别 Get请求类似于查找的过程用户获取数据可以不用每次都与数据库连接可以使用缓存;Post请求一般是修改和删除的工作必须与数据库交互不能使用缓存。 5.简单说说你对 token 的理解 1概念 Token 是一种用于身份验证和授权的凭证。在网络应用中它通常是一个字符串代表着用户的身份或者特定的权限。 2作用 身份验证 当用户登录系统时服务器验证用户的身份信息如用户名和密码后会生成一个 token 并返回给客户端。客户端在后续的请求中携带这个 token服务器通过验证 token 的有效性来确定用户的身份而无需每次都要求用户重新输入用户名和密码。例如在一个移动应用中用户登录后应用会保存 token在后续与服务器的交互中将 token 包含在请求头中服务器据此识别用户身份。 授权访问 Token 可以包含特定的权限信息决定用户可以访问哪些资源和执行哪些操作。服务器可以根据 token 中的权限标识来控制用户对不同功能和数据的访问。比如一个企业管理系统中不同的用户角色可能有不同的权限token 可以明确标识用户的角色和相应的权限范围。
   3特点 无状态性服务器不需要在内存中存储每个用户的会话状态只需要验证 token 的有效性。这使得服务器可以更轻松地扩展并且减少了服务器的资源消耗。例如在分布式系统中多个服务器可以独立地验证 token而不需要共享用户会话信息。安全性 Token 可以使用加密技术进行签名确保其在传输过程中不被篡改。一些 token 还可以设置过期时间增加了系统的安全性。例如JSON Web TokenJWT使用数字签名来保证其完整性和真实性并且可以设置较短的过期时间以减少被攻击的风险。 灵活性Token 可以在不同的平台和设备上使用包括 Web 应用、移动应用和 API 调用。它可以适应不同的身份验证和授权需求并且可以与各种技术栈集成。例如一个基于微服务架构的系统中不同的服务可以使用相同的 token 进行身份验证和授权提高了系统的可维护性和可扩展性。 6.简单说说你对 axios 的理解 1概述 Axios 是一个基于 Promise 的 HTTP 客户端用于在浏览器和 Node.js 中发送 HTTP 请求。它可以方便地与现代 JavaScript 框架如 Vue、React 和 Angular集成提供了简洁的 API 和强大的功能。 2主要特点 支持 Promise API Axios 的所有请求方法都返回 Promise 对象使得异步请求的处理更加简洁和可读。可以使用then和catch方法来处理请求的成功和失败情况。例如axios.get(/api/data).then(response {console.log(response.data);}).catch(error {console.error(error);});支持多种请求方法 Axios 支持常见的 HTTP 请求方法如 GET、POST、PUT、DELETE、PATCH 等。可以轻松地发送不同类型的请求并传递相应的请求参数。例如// GET 请求 axios.get(/api/users, { params: { page: 1, limit: 10 } }); // POST 请求 axios.post(/api/users, { name: John, age: 30 });拦截器 Axios 提供了请求拦截器和响应拦截器可以在请求发送前和响应返回后进行一些预处理操作。请求拦截器可以用于添加请求头、设置认证信息、处理请求参数等。响应拦截器可以用于统一处理错误、格式化响应数据等。例如// 请求拦截器 axios.interceptors.request.use(config {config.headers[Authorization] Bearer token;return config; }, error {return Promise.reject(error); }); // 响应拦截器 axios.interceptors.response.use(response {return response.data; }, error {if (error.response.status 401) {// 处理未授权错误}return Promise.reject(error); });并发请求 Axios 支持并发请求可以同时发送多个请求并等待它们全部完成后进行处理。可以使用axios.all和axios.spread方法来处理并发请求的结果。例如axios.all([axios.get(/api/users),axios.get(/api/posts) ]).then(axios.spread((usersResponse, postsResponse) {console.log(usersResponse.data);console.log(postsResponse.data); })).catch(error {console.error(error); });可配置性 Axios 可以进行各种配置如设置请求超时时间、设置基础 URL、设置请求头、设置响应数据格式等。例如axios.defaults.baseURL https://api.example.com; axios.defaults.timeout 5000; axios.defaults.headers.common[Content-Type] application/json;3应用场景 与后端 API 交互 在前端应用中使用 Axios 与后端服务器的 API 进行通信获取数据、提交表单、更新资源等。例如在一个电商网站中使用 Axios 发送请求获取商品列表、添加购物车、下单等操作。 前后端分离项目 在前后端分离的架构中Axios 作为前端与后端之间的通信桥梁方便地进行数据交互和业务逻辑处理。前后端可以独立开发、测试和部署提高开发效率和系统的可维护性。 移动应用开发 在移动应用开发中Axios 可以用于与服务器进行通信实现数据的同步和更新。例如在一个移动社交应用中使用 Axios 发送请求获取用户动态、发布状态、评论等操作。
   
2. ajax原理 AJAXAsynchronous JavaScript and XML即异步 JavaScript 和 XML其工作原理如下 1基本概念 AJAX 不是一种新的编程语言而是一种用于创建快速动态网页的技术。它通过在后台与服务器进行少量数据交换实现网页的异步更新而无需重新加载整个网页。这使得网页能够提供更流畅的用户体验就像在使用桌面应用程序一样。 2工作流程 创建 XMLHttpRequest 对象 在 JavaScript 中首先创建一个 XMLHttpRequest 对象它是 AJAX 的核心对象用于在后台与服务器进行通信。不同浏览器对 XMLHttpRequest 对象的实现略有不同但现代浏览器都提供了标准的 API。例如var xhr new XMLHttpRequest();配置请求 设置请求的方法GET、POST 等、URL 和是否异步等参数。可以设置请求头信息以便向服务器传递特定的信息。例如 xhr.open(GET, /api/data, true); xhr.setRequestHeader(Content-Type, application/json);发送请求 使用send()方法发送请求。如果是 POST 请求可以在send()方法中传递请求参数。例如xhr.send();监听状态变化 通过监听 XMLHttpRequest 对象的onreadystatechange事件来检测请求的状态变化。当请求的状态发生变化时该事件会被触发。可以在事件处理函数中根据请求的状态进行相应的处理。例如xhr.onreadystatechange function() {if (xhr.readyState 4 xhr.status 200) {// 请求成功处理响应数据var response xhr.responseText;console.log(response);} else if (xhr.readyState 4 xhr.status! 200) {// 请求失败处理错误console.error(请求失败 xhr.status);} };服务器响应 服务器接收到请求后进行相应的处理并返回响应数据。响应数据可以是 XML 格式、JSON 格式或纯文本等。XMLHttpRequest 对象会根据响应的状态码和内容类型自动解析响应数据并将其存储在responseText或responseXML属性中。 处理响应数据 在客户端根据响应数据的格式进行相应的处理。如果是 JSON 格式可以使用JSON.parse()方法将其转换为 JavaScript 对象。可以根据响应数据更新网页的内容或者执行其他操作。例如var responseData JSON.parse(xhr.responseText); document.getElementById(result).innerHTML responseData.message;3优点 异步通信 AJAX 允许网页在不刷新整个页面的情况下与服务器进行通信从而提供更流畅的用户体验。用户可以继续与网页进行交互而不会被长时间的等待所打断。 局部更新 可以只更新网页的一部分内容而不是重新加载整个页面。这减少了网络流量和服务器负载提高了性能。 更好的用户体验 通过异步通信和局部更新用户可以更快地获得反馈并且不会因为页面刷新而丢失当前的操作状态。 与服务器进行交互 可以在后台与服务器进行数据交换实现动态内容的加载、表单提交、数据验证等功能。
   8.什么情况下会导致浏览器内存泄漏 1意外的全局变量 未声明的变量 在 JavaScript 中如果忘记使用var、let或const声明变量会创建一个全局变量。如果这个变量引用了一个大对象并且在不需要时没有被正确释放就可能导致内存泄漏。例如function foo() { x {}; }这里的x会成为一个全局变量并且如果函数被多次调用可能会积累多个大对象占用内存。 未清理的定时器引用 使用setInterval或setTimeout创建的定时器如果在不需要时没有被清除会一直保留对回调函数的引用从而导致内存泄漏。例如function startTimer() {const intervalId setInterval(() {console.log(Timer tick);}, 1000);// 如果没有在适当的时候清除这个定时器就可能导致内存泄漏 }2事件监听器未移除 DOM 元素的事件监听器 当为 DOM 元素添加事件监听器时如果在元素被移除或不再需要时没有移除事件监听器该元素和其相关的事件处理函数会一直存在于内存中。例如const element document.getElementById(myElement); element.addEventListener(click, handleClick); // 如果 element 被移除了但没有移除事件监听器就可能导致内存泄漏自定义事件的监听器 在自定义事件系统中如果在不再需要监听某个事件时没有移除监听器也会导致内存泄漏。例如const eventEmitter new EventEmitter(); eventEmitter.on(customEvent, handleCustomEvent); // 如果在适当的时候没有调用 eventEmitter.off(customEvent, handleCustomEvent)就可能导致内存泄漏3闭包使用不当 循环中的闭包 在循环中创建闭包如果闭包引用了循环变量或外部的大对象并且在循环结束后这些闭包没有被正确释放会导致内存泄漏。例如for (let i 0; i 10; i) {document.getElementById(button${i}).addEventListener(click, function() {console.log(i); // 闭包引用了循环变量 i}); }长期存在的闭包 如果一个函数返回一个闭包并且这个闭包被长期存储或引用而闭包又引用了大量的内存资源可能会导致内存泄漏。例如function createFunction() {const largeObject {}; // 假设这是一个大对象return function() {return largeObject;}; } const myFunction createFunction(); // 如果 myFunction 被长期存储而 largeObject 又没有被正确释放就可能导致内存泄漏4缓存未清理 对象缓存 如果创建了一个对象缓存并且在不再需要缓存的对象时没有清理缓存会导致内存泄漏。例如const cache {}; function addToCache(key, value) {cache[key] value; } // 如果没有在适当的时候清理 cache 中的对象就可能导致内存泄漏数据存储未清理 如果使用浏览器的本地存储如localStorage或sessionStorage或 IndexedDB 存储了大量数据并且在不需要时没有清理这些数据也可能导致内存泄漏。例如localStorage.setItem(myData, JSON.stringify(largeObject)); // 如果在适当的时候没有移除这个存储项就可能导致内存泄漏5大型数据结构未释放 大型数组或对象 如果创建了一个非常大的数组或对象并且在不再需要时没有将其设置为null或使用其他方式释放内存会导致内存泄漏。例如const largeArray new Array(1000000).fill(0); // 如果在适当的时候没有释放 largeArray就可能导致内存泄漏递归数据结构 如果创建了一个递归的数据结构并且在不再需要时没有正确地释放它可能会导致内存泄漏。例如function createRecursiveObject() {const obj {};obj.child createRecursiveObject();return obj; } const recursiveObject createRecursiveObject(); // 如果在适当的时候没有释放 recursiveObject就可能导致内存泄漏