朝阳39的博客

更多性能优化方案见。

提前创建 Webview 容器。

当浏览器向CDN节点请求数据时，CDN节点会判断缓存数据是否过期，若缓存数据并没有过期，则直接将缓存数据返回给客户端；否则，CDN节点就会向服务器发出回源请求，从服务器拉取最新数据，更新本地缓存，并将最新数据返回给客户端。CDN边缘节点的缓存机制与HTTP 缓存相同，可减少 CDN 边缘节点对源服务器的请求。浏览器、操作系统、Local DNS、根域名服务器，都会对DNS结果做一定程度的缓存。用户在浏览网站的时候，CDN会选择一个离用户最近的CDN边缘节点来响应用户的请求。

Hybrid 架构是一种将原生应用和Web技术相结合的开发方式，它能够充分利用Web技术的跨平台特性和原生应用的性能优势。在Hybrid架构中，原生应用负责提供基本的框架和功能，而Web技术则用于实现页面的展示和业务逻辑。

JWT （json web token）是当前最流行的用户登录权限校验（用户认证鉴权）方案。

最重要的：开放封闭原则。

前后端分离渲染页面过程复杂（至少需三步：1. 加载html,js等资源 2. http请求获取数据 3.渲染页面 ），SSR渲染页面过程简单（在服务端已渲染好页面，直接加载 html 即可），所以性能好（ 纯H5页面，SSR 是性能优化的最佳方案，但成本也高）如果 H5 在 App WebView 中展示，可使用 App 预取，如用户访问列表页时，App 预加载文章首屏内容，用户进入 H5 页，直接从 App 中获取内容，瞬间展示首屏。针对列表页，默认只展示第一页内容，上划加载更多。

fetch 是全局变量 window 的一个方法（API），返回一个promise对象，也用于发起网络请求，因比 XMLHttpRequest 更简洁易用，已取代 XMLHttpRequest。服务端向客户端发送等待传输的应答，此时服务端已停止接收客户端的 http 请求（只出不进），并继续向客户端传输未传输完的数据（服务端：好的，等我把数据传输完毕就断开连接）客户端向服务端发送断开连接请求（客户端：我的 http 请求已发送完，可以断开连接了！客户端向服务端发送连接确认（客户端：可以，那我开始连接啦！

bable 用于将 ES6 的语法编译为 ES5。

如果你是一个资深的前端架构设计师，当你的客户需要设计一个电商系统，需要至少：从技术选型、设计模式及代码组织、构建部署的角度考虑前端架构设计，请设计几个需要从客户这里了解的基础信息，以便来进行架构设计。越简单越好，不用给出说明，直接设计问题，后续收到问题的答案后开始架构的设计，不需要额外再说明。

前端自动化的内容自动化代码检查自动化测试自动化构建自动化部署自动化文档前端自动化的最佳实践

Cookie 是一段不超过 4KB 的小型文本数据，由一个名称（Name）、一个值（Value）和其它几个用于控制 Cookie 有效期、安全性、使用范围的可选属性组成。

数据结构设计用数据描述所有的内容数据要结构化，易于程序操作(遍历、查找)，比如数组、对象、对象为元素构成的数组（每个元素记得设置唯一的 id 属性，以便对元素进行删改操作）数据要可扩展，以便增加新的功能list 数组存储所有待办事项，方便增加删除元素和排序每个待办事项用对象描述，方便增加删除属性id 属性确保事项唯一，数据类型为数字（也可以设计成字符串）title 属性描述事项内容，数据类型为字符串completed 属性描述事项是否完成，数据类型为布尔值组件设计从

与前端开发相关的角色。

前端开发经常需要模拟接口请求，可以通过 json-server 实现。

都可以考虑用空间换时间。

https 同时使用了对称加密和非对称加密，之所以没有全部使用非对称加密，是因为非对称加密的运算更加复杂，成本更高。在传输过程中，若有中间人攻击，伪造了 keyA 和 keyB 与客户端交互，也会变得不安全，所以又增加了证书校验。免费的证书容易被伪造，不推荐使用，建议购买使用第三方（如阿里云）的付费证书。加密用 keyA ，解密需要用另一个密钥 keyB。加密和解密都用同一个 key。

使用场景：限定客户端必须带有指定的 Headers 信息才能访问服务器，否则视为非法访问// axios 中自定义 Headers 的方法headers:{'自定义的请求头key':'自定义的请求头的值'}第一次请求时，服务器返回资源和 Last-Modified后续请求，在请求头中会带上 If-Modified-Since (值为上次服务器返回的 Last-Modified 值)服务器将对比请求头中的 If-Modified-Since 值和服务器上资源的最后修改时间。

用 WPS 图片打开。

面试时说出这些，会给你加分哦！Content-Type 的值为 text/plain 或 multipart/form-data 或 application/x-www-form-urlencodedContent-Type 表示HTTP请求中传递信息的数据类型，可取值为：（加粗的为最常见的四种值）如果 HTTP请求不属于上述的简单请求，浏览器就会先自动使用 HTTP的 OPTIONS 方法向服务器发出一个预检请求，用于检

OAuth2 是当下广泛流行的第三方应用授权登录方案，如微信扫码登录。

启动 Prettier 自动格式化文档后，所有字符串会自动补全为双引号，但 eslint 的检验规则是字符串需用单引号。

让页面渲染更快！

默认情况下不加载图片，直到滚动页面，图片进入浏览器窗口的可视区域，才加载图片！

通过setTimeout()延迟1s给数据赋值来模拟后端接口异步获取数据。

主要考虑是用 JavaScript 还是 Typscript，相比之下Typscript有以下优势：框架间没有绝对的高低，根据开发成员技术栈和个人喜好选择即可。代码风格：函数性组件——组件只是一个返回特定界面的函数。数据更新：采用 immutable 更新的方式，需要调用特定的 useState hook 的来调用来更新界面。代码重用：使用给定的 hooks 抽象成一系列的函数，在组件内部使用函数调用的方式来重用逻辑。代码风格：单文件组件——将模版、逻辑和样式融合到一个自创的 vue 文件中。数据更新

通常工作经验为 1 - 3 年的前端开发会遇到瓶颈期，进入瓶颈期有以下特征：以下建议，不分先后，自由选择，可同步进行！如果将计划1天完成的任务在半天内完成，那么你便多出了半天的自学时间！具体方式如下：加我微信 13908056224，邀请你入群哦！......

脚手架本质是一个操作系统的客户端，通过命令行执行。以vue2的脚手架Vue cli为例，通过执行以下命令来创建vue项目提升前端研发效能将研发过程通过下方范例命令，来看看命令的格式vue 是主命令，通常是脚手架的名称或方便记忆的别名（脚手架Vue cli在安装时使用的@vue/cli，命令中使用的别名 vue）create 是脚手架内部名义的命令，通常表示脚手架执行某项操作，这里是创建vue-test-app 是命令的参数，此处为自定义的新创建的vue项目的项目名称。–force 是命

从第4步开始页面的构建页面构建页面的构建过程，主要做两件事解析HTML代码并构建文档对象模型（DOM）执行JavaScript代码。当浏览器在页面构建阶段遇到了脚本节点，就会停止HTML到DOM的构建，转而开始执行JavaScript代码，依次执行全局JS代码，若期间调用了函数，则执行JS 函数内的代码。JS 代码执行结束后，将继续HTML到DOM的构建，直到再次遇到脚本节点。这两件事不断交替，直到整个页面构建完毕，接着进入事件处理阶段。事件处理页面构建完成后，用户即可看到页.

使用购物车实现批量下载特别提醒：因官网批量下载数量限制，以下案例中都最多只能选择20个图标。批量下载图标，需要先将图标添加入库【“购物车”】，再下载选择颜色和大小，点击格式就会触发下载，推荐SVG批量添加页面中的图标入库方法1：手动选择需要的图标添加入库方法2：运行代码批量添加入库按F12打开控制台，运行代码var iconList = document.querySelectorAll('.icon-gouwuche1'); for (var i = 0; i &.

1. 下载安装Apifoxhttps://www.apifox.cn/#2. 登录Apifox可以直接微信扫码登录（新用户扫码后，选择生成新账户）3. 新建团队4. 新建项目新建好后，点击项目名称进入项目。5. 新建分组鼠标移动到左侧项目概览上时，会出现新建分组按钮，点击它！6. 新建接口鼠标移动到左侧新建的分组上时，会出现新建接口按钮，点击它！右上角下拉选择“mock服务”后，输入接口地址，接口名称，保存切换到【高级mock】选项卡，点击“新建期.

1.电脑上本地启动前端项目若只是一个html文件，则需启动一个http服务运行该文件，在浏览器中会显示类似http://127.0.0.1:5500/demo.html的网址，具体操作方式如下：webstrom直接运行html文件即可，运行的方式有：点击右上角的运行按钮鼠标右键快捷菜单点运行菜单【运行】中点运行快捷键Shift+F10vscode安装插件LiveServer使用LiveServer运行html文件，运行的方式有：鼠标右键快捷菜单点o.

httphttp（超文本传输协议）互联网上应用最为广泛的一种网络协议，用于在Web浏览器和网站服务器之间传递信息。优点高效缺点以明文方式发送内容，不提供任何方式的数据加密，如果攻击者截取了Web浏览器和网站服务器之间的传输报文，就可以直接读懂其中的信息。因此，HTTP协议不适合传输一些敏感信息，比如：信用卡号、密码等支付信息。httpshttps（安全套接字层超文本传输协议）在http的基础上加入了SSL协议，SSL依靠证书来验证服务器的身份，并为浏览器和服务器之间的通信加密主要作.

为什么需要URL编码？根据网络标准RFC 1738的硬性规定："只有字母和数字[0-9a-zA-Z]、一些特殊符号"$-_.+!*'(),"[不包括双引号]、以及某些保留字，才可以不经过编码直接用于URL。"即URL不支持汉字，[] 等字符。但在使用URL传参时（如get请求），参数值经常包含汉字，[] 等字符，怎么办？将这些URL不支持的字符进行编码后使用。如https://www.baidu.com/s?wd=春节 编码后为https://www.baidu.c......

DNS —— 域名系统DomainNameSystem，缩写：DNS 用于通过域名找到对应的IP地址（每个IP地址对应着互联网中的一台服务器）效益：语义化的域名取代纯数字的IP，方便用户记忆和使用。原理：将域名和IP地址的映射关系存在一个分布式数据库中，通过DNS服务器将域名解析为IP流程：1. 用户使用域名发起请求 >>DNS服务器2.DNS服务器将域名解析为IP（会找到最佳的IP地址） >> 用户3.用户向（使用DNS服务器...

前端框架的定义所谓框架，即提供一套完整的解决方案。所以前端框架，就是一整套提升前端开发效率的前端编程方案，使用前端框架，就需要按照框架定好的代码结构进行开发。前端框架的分类前端框架主要分为JS框架和UI框架前端框架——JS框架的选型vue （最易上手）https://cn.vuejs.org/v2/guide/react （国外最普及）https://react.docschina.org/docs/getting-started.htmlAngul..

互联网前端分三层：HTML：超文本标记语言。从语义的角度描述页面结构。 CSS：层叠样式表。从审美的角度负责页面样式。 JS：JavaScript。从交互的角度描述页面行为。...

单页面应用（SinglePage Web Application，SPA）只有一张Web页面的应用，是一种从Web服务器加载的富客户端，单页面跳转仅刷新局部资源 ，公共资源(js、css等)仅需加载一次，常用于PC端官网、购物等网站如图:多页面应用（MultiPage Application，MPA）多页面跳转刷新所有资源，每个公共资源(js、css等)需选择...