前端设计模式——适配器模式
适配器模式（Adapter Pattern）：将一个类的接口转化为客户端所期望的接口，使得原本不兼容的类可以一起工作。在前端开发中，可以使用适配器模式来处理不同浏览器之间的兼容性问题。 适配器模式通常包含三个角色：客户端、目标对象和适配器对象。客户端调用适配器对象的接口，适配器对象再调用目标对象的接 ...
浏览器事件循环相关概念及其理解
相关解释 在打开浏览器的时候会创建出来若干进程，以便于完成相关任务，其实最重要的是渲染进程。 渲染进程的主要工作为：解析HTML，绘制CSS样式，执行JS代码等。 其中在执行JS代码的时候，会根据代码任务的类型创建出来若干队列，其中常见的有： 延时队列(setInterval,setTi ...
JS对象
JavaScript DOMContentLoaded document.addEventListener("DOMContentLoaded", function() { . . . }); 这是一个事件监听器，它监听浏览器的 "DOMContentLoaded" 事件，即 HTML 文档体加载、 ...
前端资源浏览器渲染原理
前端资源浏览器渲染原理
怎样解决跨域？
跨域的原因 跨域是是因为浏览器的同源策略限制，是浏览器的一种安全机制，服务端之间是不存在跨域的。 所谓同源指的是两个页面具有相同的协议、主机和端口，三者有任一不相同即会产生跨域。 解决跨域 配置类重写addCorsMappings方法 1、CorsConfig配置类添加@Configuration注 ...
9种跨域方式实现原理
摘要：当协议、子域名、主域名、端口号中任意一个不相同时，都算作不同域。不同域之间相互请求资源，就算作“跨域”。 本文分享自华为云社区《九种跨域方式实现原理咋回事》，作者：龙哥手记 一、什么是跨域？ 1.什么是同源策略及其限制内容？ 同源策略是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同 ...
前后端分离架构：Web 实现前后端分离，前后端解耦
一、前言”前后端分离“已经成为互联网项目开发的业界标杆，通过Tomcat+Ngnix(也可以中间有个Node.js)，有效地进行解耦。并且前后端分离会为以后的大型分布式架构、弹性计算架构、微服务架构、多端化服务（多种客户端，例如：浏览器，车载终端，安卓，IOS等等）打下坚实的基础。前后端分离(解耦) ...
页面重排和重绘问题
页面重排（reflow）是指浏览器重新计算页面的渲染布局，通常是由于元素的尺寸、位置或者视口尺寸发生了变化导致的。重排会影响页面的性能，应尽量避免。
页面重绘（repaint）是指浏览器对已渲染的页面进行更新，通常是由于元素的样式发生了变化导致的。重绘不会影响布局，但会消耗更多的 CPU 资源。 ...
【HTML基础篇001】超详细认识HTML标签种类
🏆一、HTML是什么又不是什么？ 👤1.1、HTML是什么 超文本标记语言（Hypertext Markup Language, HTML）是一种用于创建网页的标记语言。 本质上是浏览器可识别的规则，我们按照规则写网页，浏览器根据规则渲染我们的网页。对于不同的浏览器，对同一个标签可能会有不同的解 ...
Nginx 防盗链
Nginx 防盗链 本篇主要介绍一下 nginx 中 防盗链的具体配置 , 以及http 的 referer 头 概述 防盗链其实就是 防止别的站点来引用你的 资源, 占用你的流量 在了解nginx 防盗链之前 我们先了解一下 什么是 HTTP 的头信息 Referer,当浏览器访问网站的时候,一般 ...
教你用CSS实现表单部件
案例介绍 欢迎来到我的小院，我是霍大侠，恭喜你今天又要进步一点点了！我们来用CSS编程实战案例，使用列表标签完成一个下拉菜单样式的表单部件。 案例演示 运行代码后在浏览器弹出由标签组成的下拉菜单样式的列表。 源码学习 进入核心代码学习，我们先来看HTML模板中的代码。 <!-- 有个小院-兴趣编程 ...
浏览器DevTools使用技巧
我们是袋鼠云数栈 UED 团队，致力于打造优秀的一站式数据中台产品。我们始终保持工匠精神，探索前端道路，为社区积累并传播经验价值。 本文作者：正则 作为一名前端开发人员，平时开发中使用最多的就是 Chrome devtools，但可能很多同学像我一样平时用的最多也就 Console、Elements ...