卷心菜007
卷心菜007

前端面经整理

目录

1）html，http，web基础篇

进程和线程的区别？

如何理解html语义化？用过哪些html标签？

h5新特性

canvas相关

cookie,session,localStorage区别，cookie的长度限制

什么是cookie隔离？请求资源时不要带cookie怎么做?

cookie和session有哪些区别？

cookie和token的区别 ?

登陆后，前端做了哪些工作？如何得知已登录？

前端性能优化方法

浏览器输入url后发生了什么

css加载会造成阻塞吗？

为什么js会阻塞页面加载？

websocket

了解浏览器缓存机制吗？强缓存 协商缓存(136)

常见的块元素，行内元素，行内块元素

常见的网络攻击方式有哪些？什么是xss攻击？什么是csrf攻击？

同源策略，什么是跨域？为什么浏览器要使用同源策略？跨域的几种解决方案？了解预检请求吗？

了解CDN么？为什么要用CDN？CDN的核心是什么？

dns 域名解析

osi七层模型

常用端口号

（2）css篇

link和@import的区别

盒模型

display:none，visibility:hidden和opcatity:0的区别

BFC相关

margin塌陷

清除浮动

选择器优先级

absolute定位是基于什么的

水平垂直居中

css做圆形，三角形

媒介查询相关的自适应布局

重排(回流/reflow)和重绘(repaint或redraw)？该怎么优化？怎么减少回流？

动画相关

高性能动画是什么？衡量它的标准是什么？

flex布局

精灵图

伪类和伪元素

（3）js篇

script放在head会造成什么问题？如何解决？

script 引入方式

什么是windows对象？什么是document对象？（bom和dom）

介绍一下JavaScript的执行上下文(50)

迭代器的原理，如何实现

闭包，内存泄漏

作用域链，变量提升

let，var，const

常用数组，字符串方法

map和forEach区别

js事件循环机制，宏任务微任务，async/await,读代码运行顺序

原型、构造函数，实例

介绍一下JavaScript的原型链？js原型链的顶端是什么？Object的原型是什么？

对象继承方法

讲讲继承，多态？

new做了什么操作

箭头函数的特性？

谈谈对this的理解？

bind,call,apply的区别，手撕源码

this指向

设计模式，应用场景，手撕源码

get和post

为什么javascript是单线程？与异步有冲突吗？

同步和异步的区别？

说一下promise解决了什么问题。他的底层逻辑？如何实现？没有promise该怎么办？

延时和异步

defer和async的区别？

async/await具体该怎么用？

promise和async/await的关系？

promise，promise.all,promise.race源码手撕（让你写一个请求，5秒内执行完就返回执行结果，否则返回超时）

ajax和axios，fetch的区别是什么？

requestJS的核心原理是什么？如何动态加载的？如何避免多次重复加载？如何缓存？

垃圾回收

基本数据类型

= =和===的区别

js动画和css动画区别 ，为什么css动画比JavaScript高效？

dom0级事件dom2级事件

模块化

防抖节流

深浅拷贝

什么是事件监听？说说前端中的事件流？如何阻止事件冒泡？

事件委托

浏览器渲染过程

generator

如何判断数组

在数组原型链上实现删除数组重复数据的方法。

数组去重有哪些方法？

数组展平

typeof 和instance of

为什么0.1+0.2！=0.3

（4）webpack篇

怎么打包 ，webpack是用来干什么的？ 除了webpack用过其他打包工具吗？

webpack热更新原理

loader和plugin

（5）vuejs篇

双向绑定原理，手撕简单源码

（6）react及react native篇

Vue和React的区别？

react 路由模式？

react单向数据流的好处 ?

react和vue的区别

说一下什么是虚拟DOM?为什么要使用虚拟DOM？虚拟DOM是怎么工作的？为什么操作 DOM 慢?

diff算法

setstate同步还是异步，具体过程

redux原理

ReactHook

React生命周期

容器组件和展示组件

父子组件通信

非父子通信

高阶组件（高阶组件不是组件）

shouldComponentUpdate 可以避免不必要的render

（7）计算机网络

http和https的区别

http1.0,1.1,2.0,3.0特性

http状态码，尤其301和302区别，304。

http请求几种方法及区别，尤其get/post的幂等性

TCP 和 UDP有什么特点？有哪些区别，大概适用于什么样的场合。

TCP的三次握手和四次挥手？2MSL是为啥？

TCP的拥塞控制？

（8）其他

（9）主管/hr面问题

职业规划

你有什么优点（与众不同的东西）

你有什么缺点（别傻傻的光说缺点，说说你是怎么克服，或者绕开它们的呀）

（10）反问环节的参考提问

讲讲前端工程化？

场景

1）html，http，web基础篇


进程和线程的区别？

做个简单的比喻：进程=火车，线程=车厢
线程在进程下行进（单纯的车厢无法运行）
一个进程可以包含多个线程（一辆火车可以有多个车厢）
不同进程间数据很难共享（一辆火车上的乘客很难换到另外一辆火车，比如站点换乘）
同一进程下不同线程间数据很易共享（A车厢换到B车厢很容易）
进程要比线程消耗更多的计算机资源（采用多列火车相比多个车厢更耗资源）进程间不会相互影响，一个线程挂掉将导致整个进程挂掉（一列火车不会影响到另外一列火车，但是如果一列火车上中间的一节车厢着火了，将影响到所有车厢）进程可以拓展到多机，进程最多适合多核（不同火车可以开在多个轨道上，同一火车的车厢不能在行进的不同的轨道上）进程使用的内存地址可以上锁，即一个线程使用某些共享内存时，其他线程必须等它结束，才能使用这一块内存。（比如火车上的洗手间）－"互斥锁"进程使用的内存地址可以限定使用量（比如火车上的餐厅，最多只允许多少人进入，如果满了需要在门口等，等有人出来了才能进去）－“信号量”


如何理解html语义化？用过哪些html标签？

html语义化是说用正确的标签做正确的事。
html标签可以分为：块级标签，行内标签，内联块状标签
行内元素与块级函数可以相互转换，通过修改display属性值来切换块级元素和行内元素，行内元素display：inline，块级元素display：block。

块级标签：标签独占一行，宽度与高度撑满父元素。

、

、

...

、
    、
      、
      、、
      、
      、

      行内标签：标签在一行内，宽度与高度由内容决定，只有在内容超过HTML的宽度时，才会换行。
      、、、、、

      内联块状标签：内联块状元素（inline-block）就是同时具备内联元素、块状元素的特点，
      代码display:inline-block就是将元素设置为内联块状元素。(css2.1新增)，、标签就是这种内联块状标签


      h5新特性

      1. HTML语义化,有助于爬虫抓取更多的有效信息，爬虫是依赖于标签来确定上下文和各个关键字的权重.
      2. 本地存储，h5提供了sessionStorage、localStorage和cookie，使用之前应该先判断支持情况。注意：localStorage存储的数据是不能跨浏览器共用的，一个浏览器只能读取各自浏览器的数据,储存空间5M。
      3. 离线web应用
      4.表单新增功能。以往input中的name和value要随着form表单一起提交，form表单必须包裹input , 而现在可以通过input的form属性綁定.
      5.地理定位，h5提供了Geolocation API访问地理位置，即通过window.navigator.geolocation来实现访问。这个对象有三个方法:
      getCurrentPosition()、watchPosition()、clearWatch()
      页面第一次使用这个api需要获得用户许可, watchPosition可以对位置变化事件进行监听。


      canvas相关

      绘制一个绿色的长方形？


      cookie,session,localStorage区别，cookie的长度限制

      localStorage（本地存储）和sessionStorage（会话存储）不会自动把数据发给服务器
      localStorage长期存储数据，浏览器关闭数据后不丢失，仅在本地保存，大小为一般为5MB；
      sessionStorage仅在当前会话下有效，关闭页面或浏览器后被清除。存放数据大小为一般为5MB，如果两个页面存在关系，则可以共享sessionStorage；
      cookie是网站为了标识用户身份而存储在用户本地终端（Client Side）上的数据（通常经过加密）。cookie始终在同源的http请求中携带（即使不需要）都会在浏览器和服务器端间来回传递，cookie数据大小不会超过4K。

      有期时间：localStorage存储持久数据，浏览器关闭后数据不丢失，除非自动删除数据。sessionStorage数据在当前浏览器窗口关闭后自动删除。cookie 设置的cookie过期时间之前一直有效，即使窗口或者浏览器关闭；

      二、cookie和session的区别
      1、cookie数据存放在客户的浏览器上，session数据放在服务器上 
      2、session保存在服务器，客户端不知道其中的信息；cookie保存在客户端，服务器能够知道其中的信息 
      3、session中保存的是对象，cookie中保存的是字符串 
      4、cookie不是很安全，别人可以分析存放在本地的cookie并进行cookie欺骗，考虑*到安全应当使用session 
      5、session会在一定时间内保存在服务器上，当访问增多，会比较占用你服务器的性能，考虑到减轻服务器性能方面，应当使用cookie 
      6、单个cookie保存的数*据不能超过4K，很多浏览器都限制一个站点最多保存20个cookie 
      7、建议将登录信息等重要信息存放为session，其他信息如果需要保留，可以放在cookie中 
      8、session不能区分路径，同一个用户在访问一个网站期间，所有的session在任何一个地方都可以访问到，而cookie中如果设置了路径参数，那么同一个网站中不同路径下的cookie互相是访问不到的。 
      9、COOKIE:是服务端向客户端写入的小的片段信息。cookie信息保存在服务器缓存区，不会在客户端显现。当你第一次登陆一个网站，服务器向你的机器写得片段信息。你可以在Internet选项中找到存放cookie的文件夹。如果不删除，cookie就一直在这个文件夹中。 
      10、session需要借助cookie才能正常工作。如果客户端完全禁止cookie，session将失效。 但是如果服务器端启用了url编码，也就是用 URLEncoder.encode()把所有的url编码了，则会在url后面出现如下类似的东西 index.jsp:jsessionid=fdsaffjdlks;jaf;lkdjsf 服务器通过这个进行session的判断. 
      11.Cookie支持跨域名访问，例如将domain属性设置为“.biaodianfu.com”，则以“.biaodianfu.com”为后缀的一切域名均能够访问该Cookie。跨域名Cookie如今被普遍用在网络中，例如Google、Baidu、Sina等,而Session则不会支持跨域名访问。Session仅在他所在的域名内有效。仅运用Cookie或者仅运用Session可能完成不了理想的效果。这时应该尝试一下同时运用Cookie与Session。Cookie与Session的搭配运用在实践项目中会完成很多意想不到的效果。


      什么是cookie隔离？请求资源时不要带cookie怎么做?

      如果静态文件都放在主域名下，那静态文件请求的时候都带有的cookie的数据提交给server的，非常浪费流量，所以不如隔离开。
       
      因为cookie有域的限制，因此不能跨域提交请求，故使用非主要域名的时候，请求头中就不会带有cookie数据，
      这样可以降低请求头的大小，降低请求时间，从而达到降低整体请求延时的目的。
       
      同时这种方式不会将cookie传入server，也减少了server对cookie的处理分析环节，
      提高了server的http请求的解析速度。


      cookie和session有哪些区别？


      Cookie是存放在客户端（浏览器），Session是保存在服务端。

      Cookie是客户端保存用户信息的一种机制，用来记录用户的一些信息。可以设置有效期
      Session是服务端记录用户状态时用于标识具体用户。在浏览器窗口关闭后这次的Session就消失了。

      Cookie的安全性不如Session
      Session如果过多，会对服务端产生较大的压力，不是特别重要的数据，可以考虑使用Cookie存放


      cookie和token的区别 ?

      token和cookie一样都是首次登陆时，由服务器下发，都是当交互时进行验证的功能，作用都是为无状态的HTTP提供的持久机制。token存在哪儿都行，localstorage或者cookie。
      当用户退出登录的时候cookie和服务器的session都会注销；但是用户退出登录的时候token只是注销浏览器信息，不查库。


      登陆后，前端做了哪些工作？如何得知已登录？

      前端存放服务端下发的cookie, 简单说就是写一个字段在cookie中表明已登录, 并设置失效日期

      或使用后端返回的token, 每次ajax请求将token携带在请求头中, 这也是防范csrf的手段之一。


      前端性能优化方法

      （1）浏览器渲染机制，减少重绘重排
      （2）事件处理程序，使用事件委托
      （3）网络请求优化，善用缓存，不重复加载相同的资源，减少 HTTP 请求，使用http2.0
      （4）静态资源使用 内容分发网络（CDN）是一组分布在多个不同地理位置的 Web 服务器。我们都知道，当服务器离用户越远时，延迟越高。CDN 就是为了解决这一问题，在多个位置部署服务器，让用户离服务器更近，从而缩短请求时间。


      浏览器输入url后发生了什么

      DNS 解析:将域名解析成 IP 地址 
      TCP 连接：TCP 三次握手 
      发送 HTTP 请求 
      服务器处理请求并返回 HTTP 报文（html）
      浏览器解析渲染页面 
      断开连接：TCP 四次挥手 
      TCP 三次握手结束后，开始发送 HTTP 请求报文。 
      根据 HTML 解析出 DOM 树 
      根据 CSS 解析生成 CSS 规则树 
      结合 DOM 树和 CSS 规则树，生成渲染树 
      根据渲染树计算每一个节点的信息。

      请求报文由请求行（request line）、请求头（header）、请求体 构成。
      1.请求行包含请求方法、URL、协议版本 
      2.请求头包含请求的附加信息，由关键 字/值对组成，每行一对，关键字和值用英文冒号“:”分隔。 比如：Host，表示主机名，虚拟主机；Connection,HTTP/1.1 增加的，使用 keepalive，即持久 连接，一个连接可以发多个请求；User-Agent，请求发出者，兼容性以及定制化 需求。 
      3.请求体，可以承载多个请求参数的数据，包含回车符、换行符和请求数据，并不是所有请求都具有请求数据。


      css加载会造成阻塞吗？

      CSS 不会阻塞 DOM 解析，但会阻塞 DOM 渲染。
      CSS 会阻塞 JS 执行，并不会阻塞 JS 文件下载 
      CSSOM 作用 
      第一个是提供给 JavaScript 操作样式表的能力 
      第二个是为布局树的合成提供基础的样式信息 这个 CSSOM 体现在 DOM 中就是 document.styleSheets。
      由之前讲过的浏览器渲染流程我们可以看出： DOM 和 CSSOM 通常是并行构建的，所以「CSS 加载不会阻塞 DOM 的解析」。 然而由于 Render Tree 是依赖 DOM Tree 和 CSSOM Tree 的，所以它必须等到两 者都加载完毕后，完成相应的构建，才开始渲染，因此，「CSS 加载会阻塞 DOM 渲染」。
      由于 JavaScript 是可操纵 DOM 和 css 样式 的,如果在修改这些元素属性同 时渲染界面（即 JavaScript 线程和 UI 线程同时运行）,那么渲染线程前后获 得的元素数据就可能不一致了。 因此为了防止渲染出现不可预期的结果,浏览器设置 「GUI 渲染线程与 JavaScript 引擎为互斥」的关系。 
      有个需要注意的点就是： 「有时候 JS 需要等到 CSS 的下载，这是为什么呢？」 仔细思考一下，其实这样做是有道理的，如果脚本的内容是获取元素的样式，宽 高等 CSS 控制的属性，浏览器是需要计算的，也就是依赖于 CSS。浏览器也无法 感知脚本内容到底是什么，为避免样式获取，因而只好等前面所有的样式下载完 后，再执行 JS。
      JS 文件下载和 CSS 文件下载是并行的，有时候 CSS 文件很大，所以 JS 需要等待。 因此,样式表会在后面的 js 执行前先加载执行完毕,所以「css 会阻塞后面 js 的执行」。


      为什么js会阻塞页面加载？

      1. 现代浏览器会并行加载js文件。
      2.加载或者执行js时会阻塞对标签的解析，也就是阻塞了dom树的形成，只有等到js执行完毕，浏览器才会继续解析标签。没有dom树，浏览器就无法渲染，所以当加载很大的js文件时，可以看到页面很长时间是一片空白。

      所以会阻塞对标签的解析是因为加载的js中可能会创建，删除节点等，这些操作会对dom树产生影响，如果不阻塞，等浏览器解析完标签生成dom树后，js修改了某些节点，那么浏览器又得重新解析，然后生成dom树，性能比较差。


      websocket

      HTTP 协议有一个缺陷：通信只能由客户端发起，做不到服务器主动向客户端推送信息。
      （1）建立在 TCP 协议之上，服务器端的实现比较容易。
      （2）与 HTTP 协议有着良好的兼容性。默认端口也是80和443，并且握手阶段采用 HTTP 协议，因此握手时不容易屏蔽，能通过各种 HTTP 代理服务器。
      （3）数据格式比较轻量，性能开销小，通信高效。
      （4）可以发送文本，也可以发送二进制数据。
      （5）没有同源限制，客户端可以与任意服务器通信。
      （6）协议标识符是ws（如果加密，则为wss），服务器网址就是 URL。


      了解浏览器缓存机制吗？强缓存 协商缓存(136)

      浏览器缓存就是把一个已经请求过的资源拷贝一份存储起来，当下次需要该资源时，浏览器会根据缓存机制决定直接使用缓存资源还是再次向服务器发送请求。作用: 减少网络传输的损耗以及降低服务器压力。 
      强制缓存（本地缓存）：给资源设置过期时间，客户端每次请求资源时都会查看是否过期，如果过期则向服务器再次发送请求。
      协商缓存：当强缓存过期时，客户端向服务器发送请求时可以设置协商缓存，请求资源时，把本地该资源的唯一ID携带发给服务器，服务器和最新资源做对比，资源没变，返回304，浏览器读取本地缓存。资源改变，返回200，返回最新资源。
      优先级: 强制缓存 > 协商缓存; 

      （1）强缓存为什么要有两个呢 Expires, Cache-Control?Cache-Control有哪些属性?分别表示什么意思？
      两者作用差不多，区别就在于 Expires 是http1.0的产物，Cache-Control是http1.1的产物，两者同时存在的话，Cache-Control优先级高于Expires；
       Expires：过期时间，浏览器再次加载资源时，如果在这个过期时间内，则命中强缓存。
       Cache-Control:则代表在这个请求正确返回时间（浏览器也会记录下来）的5分钟内再次加载资源，就会命中强缓存。

      （2）协商缓存出于什么原因有Last-Modified,Etag? etag的原理?
      Etag是上一次加载资源时，该资源的一种唯一标识，只要资源有变化，Etag就会重新生成。
      浏览器在下一次加载资源向服务器发送请求时，会将上一次返回的Etag值放到request ，会拿来跟该资源文件的Etag值做比较，如果相同，则表示资源文件没有发生改变，命中协商缓存。
      Last-Modified是该资源文件最后一次更改时间，服务器会在response header里返回，同时浏览器会将这个值保存起来，在下一次发送请求时，放到request header里的If-Modified-Since里，服务器在接收到后也会做比对，如果相同则命中协商缓存。


      常见的块元素，行内元素，行内块元素

      display 属性在块级元素和行内元素的转换，display 有三个值：
      inline:值为 inline 将变成行内元素，比如 div。不能设置宽高，和行内元素并排
      block:值为 block 的，比如 span。能设置宽高（填充父级），独占一行。
      inline-block：值为 inline-block 也就是变成行内块元素

      （1）块级元素：块元素通常会独占一行，或者多行，它的宽高，边距等都可以设置。

          定义表格标题
          定义地址
          定义列表中定义条目
          定义文档中的分区或节
          定义列表
          定义列表中的项目
          定义一个框架集
          创建 HTML 表单

      ~

          定义标题
          定义一条水平线

          定义段落

          定义表格
    •     标签定义列表项目
      • 可以设置宽高属性，这种就称为行内块元素。
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13

      懒加载和预加载？

      预加载：提前加载图片，当用户需要查看时可直接从本地缓存中渲染。 

      懒加载：懒加载的主要目的是作为服务器前端的优化，减少请求数或延迟请求数。 
      1.第一种是纯粹的延迟加载，使用setTimeOut或setInterval进行加载延迟.
      2.第二种是条件加载，符合某些条件，或触发了某些事件才开始异步下载。
      3.第三种是可视区加载，即仅加载用户可以看到的区域，这个主要由监控滚动条来实现，一般会在距用户看到某图片前一定距离遍开始加载，这样能保证用户拉下时正好能看到图片。

      两种技术的本质：两者的行为是相反的，一个是提前加载，一个是迟缓甚至不加载。

      懒加载对服务器前端有一定的缓解压力作用，预加载则会增加服务器前端压力。


      常见的网络攻击方式有哪些？什么是xss攻击？什么是csrf攻击？

      Xss(cross-site scripting) 攻击：全称跨站脚本攻击，攻击者在web页面中会插入一些恶意的script代码。当用户浏览该页面的时候，那么嵌入到web页面中script代码会执行，因此会达到恶意攻击用户的目的。

      CSRF (Cross Site Request Forgery)，跨站请求伪造，攻击者借助用户的 Cookie 骗取服务器的信任，以用户名义伪造请求发送给服务器。如：在请求的 url 后加入一些恶意的参数。
      防范CSRF：添加 token 验证：在 HTTP 请求中以参数的形式加入一个随机产生的 token，并在服务器端建立一个拦截器来验证这个 token，若请求无 token 或者 token 不正确，则认为可能是 CSRF 攻击而拒绝该请求。


      同源策略，什么是跨域？为什么浏览器要使用同源策略？跨域的几种解决方案？了解预检请求吗？

      同源策略:  协议/主机/端口
      我们来看下面的页面是否与 http://store.company.com/dir/index.html 是同源的？
      http://store.company.com/dir/index2.html 同源 
      http://store.company.com/dir2/index3.html 同源 虽然在不同文件夹下 
      https://store.company.com/secure.html 不同源 不同的协议(https) 
      http://store.company.com:81/dir/index.html 不同源 不同的端口(81) 
      http://news.company.com/dir/other.html 不同源 不同的主机(news)

      浏览器使用同源策略主要是为了安全，比如：如果没有同源限制存在浏览器中的cookie等其他数据可以任意读取。防止 XSS、CSFR 等攻击。
      跨域是指一个域下的文档或脚本试图去请求另一个域下的资源。跨域并不是请求发不出去，请求能发出去，服务端能收到请求并正常返回结果，只是结果被浏览器拦截了。

      解决方案：
      （1）jsonp：ajax受同源影响，利用JS中src属性连接访问跨域JS。不安全可能会遭受 XSS 攻击。只能get，不安全、有缓存、大小限制。
      （2）CORS:服务端设置。
      （3）nginx 反向代理：搭建一个中转 nginx 服务器，用于转发请求。
      （4）webpack添加proxy
      （5）location.hash:a与b跨域，通过中间页c，不同域：location.hash传值。不同域：js。

      预检请求: 需预检的请求要求必须首先使用 OPTIONS 方法发起一个预检请求到服务器，以获知服务器是否允许该实际请求。"预检请求“的使用，可以避免跨域请求对服务器的用户数据产生未预期的影响。


      了解CDN么？为什么要用CDN？CDN的核心是什么？

      （和西天取经一个道理，唐僧取经之前，国内想看经书只能跑老远去西天看经书，唐僧取经回来，再去国内各地传播，之后各地的人想听佛法就去最近的寺庙听就好了）

      CDN ：内容分发网络
      CDN的核心点有两个，一个是缓存，一个是回源。
      静态资源本身具有访问频率高、承接流量大的特点，因此静态资源加载速度始终是前端性能的一个非常关键的指标。
      CDN 是静态资源提速的重要手段，在许多一线的互联网公司，“静态资源走 CDN”并不是一个建议，而是一个规定


      dns 域名解析

      DNS 主要的作用就是将人们所熟悉的网址 (域名) “翻译”成电脑可以理解的 IP 地址，这个过程叫做 DNS 域名解析，一个域名往往对应多个DNS地址。

      DNS的规范规定了2种类型的DNS服务器，一个叫主DNS服务器，一个叫辅助DNS服务器。在一个区中主DNS服务器从自己本机的数据文件中读取该区的DNS数据信息，而辅助DNS服务器则从区的主DNS服务器中读取该区的DNS数据信息。当一个辅助DNS服务器启动时，它需要与主DNS服务器通信，并加载数据信息，这就叫做区域传送（zone transfer）。 这种情况下，使用TCP协议。

      为什么域名解析用UDP协议?
      因为UDP快啊！UDP的DNS协议只要一个请求、一个应答就好了。而使用基于TCP的DNS协议要三次握手、发送数据以及应答、四次挥手。但是UDP协议传输内容不能超过512字节。不过客户端向DNS服务器查询域名，一般返回的内容都不超过512字节，用UDP传输即可。

      为什么区域传送用TCP协议？
      因为TCP协议可靠性好啊！你要从主DNS上复制内容啊，你用不可靠的UDP？ 因为TCP协议传输的内容大啊，你用最大只能传512字节的UDP协议？万一同步的数据大于512字节，你怎么办？


      osi七层模型

      物理层：
          作用：通过媒介输出比特（bit）
          协议：RJ45、CLOCK、IEEE802.3 
          设备：中继器、集线器
      数据链路层：
            作用：将比特组装成帧（Frame）和点对点传递
            协议：PPP FR HDLC VLAN MAC
            设备：网桥、交换机
      数据链路层在概念上分为两个子层：逻辑链路控制子层（LLC）和媒体访问控制子层（MAC）。数据链路层负责分配MAC地址，或称为物理地址，由48比特长，12个16进制数字组成，0~23位。是厂商向IETF等机构申请用来标识厂商的代码。

      网络层：
           作用：负责数据包从源到宿的传递和网际交互
           协议：IP IPX ICMP IGMP ARP RARP OSPF
           设备：网络层中继系统：路由器，网络层以上的中继系统：网关

      传输层：
             作用：提供端到端的可靠报文传递和错误恢复
             协议：
             TCP (传输控制协议：面向连接的，数据传输的单位是报文段，提供可靠的交付)，
             UDP（用户控制协议：它是无连接的，数据传输的单位是用户数据报，它不能保证提供可靠的交付）
             SCTP (流控制传输协议 Stream Control Transmission Protocol )

      会话层：
               作用：建立管理和终止会话（会话协议的数据单元SPDU）
               协议：NFS SQL NETBIOS RPC

      表示层：
             作用：数据翻译、解密和压缩（表示协议数据单元PPDU）
             协议：JPEG MPEG ASII
             
      应用层：
             作用：允许访问OSI环境的手段（应用协议数据单元APDU）
             协议：FTP（文件传输协议）、DNS（域名解析协议）、Telnet（虚拟终端协议）、SMTP（电子邮件协议）、HTTP（超文本传输协议）、www、NFS


      常用端口号

      端口号小于256的一般为常用端口号
      HTTP协议代理服务器常用端口号：80/8080/3128/8081/9098
      FTP（文件传输）协议代理服务器常用端口号：21

      TOMCAT，默认端口号为8080
      Oracle 数据库，默认的端口号为1521


      （2）css篇


      link和@import的区别

      @import是 CSS 提供的语法规则，只有导入样式表的作用；
      link是HTML提供的标签，不仅可以加载 CSS 文件，还可以定义 RSS、rel 连接属性等


      盒模型

      w3c：宽度=内容的宽度（content）+ border + padding + margin 
      IE： 宽度=内容宽度（content+border+padding）+ margin


      display:none，visibility:hidden和opcatity:0的区别

      display:none隐藏后不占据额外空间，它会产生回流和重绘，而visibility:hidden和opacity:0元素虽然隐藏了，但它们仍然占据着空间，它们俩只会引起页面重绘。

      display:none不会被子元素继承，但是父元素都不在了，子元素自然也就不会显示了，皮之不存，毛之安附~~
      visibility:hidden 会被子元素继承，可以通过设置子元素visibility:visible 使子元素显示出来
      opacity: 0 也会被子元素继承，但是不能通过设置子元素opacity: 0使其重新显


      BFC相关

      BFC就是让元素成为一个个独立的块，他们之间互不影响。　（bfc是块级格式上下文，它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。）通俗一点来讲，可以把 BFC 理解为一个封闭的大箱子，箱子内部的元素无论如何翻江倒海，都不会影响到外部。

      影响：
      同一个BFC下外边距会发生重叠：在网页制作过程中由于浏览器加载是自上而下的原因，外边距上下会取最大值，左右不受影响。
      解决：此处用个div给包住，只通过一行代码(给外层的div 添加属性position:absolute)　　 ps:inherit除外


      margin塌陷

      第一种情况：两个同级元素，垂直排列，上面的盒子给margin-bottom，下面的盒子给margin-top，那么他们两个的间距会重叠，以大的那个计算。
      解决这种情况的方法为：(1)两个外边距不同时出现.(2)用个div给包住，给外层的div 添加属性position:absolute

      第二种情况：两个父子元素，内部的盒子给margin-top，其父级也会受到影响，同时产生上边距，父子元素会进行粘连。
      解决这种情况的方法为：父级添加一个css属性，overflow: hidden，禁止超出，外边距重叠就是margin-collapse。
      解决方案：
      1、为父盒子设置border，为外层添加border后父子盒子就不是真正意义上的贴合(可以设置成透明：border：1px solid ansparent);
      2、为父盒子添加overflow: hidden;
      3、为父盒子设定padding值;
      4、为父盒子添加position: fixed;
      5、为父盒子添加 display: table;
      6、利用伪元素给父元素的前面添加一个空元素。


      清除浮动

      清除浮动主要是为了解决，父元素因为子级元素浮动引起的内部高度为0的问题
      当父元素不给高度的时候，内部元素不浮动时会撑开，而浮动的时候，父元素变成一条线。
      解决方法：
      （1）使用after伪元素清除浮动（推荐使用）
          .clearfix:after{/*伪元素是行内元素 正常浏览器清除浮动方法*/
              content: "";
              display: block;
              height: 0;
              clear:both;
              visibility: hidden;
          }
      （2）使用before和after双伪元素清除浮动。
      （3）父级添加overflow属性（父元素添加overflow:hidden）（不推荐）
      （4）额外标签法（在最后一个浮动标签后，新加一个标签，给其设置clear：both；）（不推荐）


      选择器优先级

      在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式。
      作为style属性写在元素内的样式
      id选择器
      类选择器
      标签选择器
      通配符选择器
      浏览器自定义或继承
      !important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性。同一级别中后写的会覆盖先写的样式


      absolute定位是基于什么的

      相对定位（relative）：
      相对定位的块状元素相对于原来位置移动，移动后仍然占据文档流的位置，不影响其他元素的布局

      绝对定位（absolute）：
      被绝对定位的对象将从文档流中脱离，绝对定位的参照位置看它的上级或上上级有没有定位了，如果父级没有设置定位属性，则会相对于html根元素进行定位，


      水平垂直居中

      水平居中：
          (1)text-align：center
          (2)flex
      垂直居中：
          (1)flex


      css做圆形，三角形


       


      媒介查询相关的自适应布局


      px，em，rem

      px像素
      em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。
      em是CSS3新增的一个相对单位（root em，根em），使用rem为元素设定字体大小时，相对的是HTML根元素。可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。


      重排(回流/reflow)和重绘(repaint或redraw)？该怎么优化？怎么减少回流？

      重排必重绘！！！
      重排(回流/reflow)：对DOM树进行渲染，只要DOM树上的属性改变了浏览器布局，就会触发reflow，reflow的时候，浏览器会使被改变的那部分DOM树失效，并重新构造这部分。
      重绘(repaint)：当渲染树中的一些元素需要更新，但更新的属性不会改变浏览器布局（位置）的操作，直接可以为该元素绘制新的样式，跳过了回流环节，这个过程就叫重绘。

      如何减少回流、重绘？
      减少回流、重绘就是减少对DOM的操作
      1.IE中避免使用javascript表达式
      2.如果动态改变样式，直接改变className，
      3. 使用 transform 替代 top，实现动画性能更好，因为使用transform页面没有回流了.
      4.让要操作的元素进行“离线处理”，处理完后一起更新
      当使用DocumentFragment进行缓存操作，引发一次回流和重绘
      使用display:none 技术，只引发两次回流和重绘
      使用cloneNode(true or false)和replaceChild技术，引发一次回流和重绘
      5.不要经常访问会引起浏览器flush队列的属性，如果你确实要访问，利用缓存
      6.让元素脱离动画流，减少render 树的规模
      7.牺牲平滑度换取速度
      8.避免使用table布局


      动画相关

      CSS3 中有三个关于动画的样式属性transform、transition和animation 
      （1）transform
      transform可以用来设置元素的形状改变。
      主要有以下几种变形：rotate（旋转）、scale（缩放）、skew（扭曲）、translate（移动）和matrix（矩阵变形）。

      （2）transition
      transition是用来设置样式的属性值是如何从从一种状态变平滑过渡到另外一种状态，它有四个属性：
      transition-property（变换的属性，即那种形式的变换：大小、位置、扭曲等）；
      transition-duration（变换延续的时间）；
      transition-timing-function（变换的速率）
      transition-delay（变换的延时）

      （3）animation
      animation比较类似于 flash 中的逐帧动画，逐帧动画就像电影的播放一样，表现非常细腻并且有非常大的灵活性。然而transition只是指定了开始和结束态，整个动画的过程也是由特定的函数控制。学习过 flash 的同学知道，这种逐帧动画是由关键帧组成，很多个关键帧连续的播放就组成了动画，在 CSS3 中是由属性keyframes来完成逐帧动画的。
      animationName：动画名称，开发人员自己命名；
      percentage：为百分比值，可以添加多个百分比值；
      properties：样式属性名称，例如：color、left、width等等。


      高性能动画是什么？衡量它的标准是什么？

      动画帧率可以作为衡量标准，一般来说画面在 60fps 的帧率下效果比较好。


      flex布局

       flex-direction: row || column;
       
       justify-content:  控制 `flex` 项在主轴上的位置。
           center 
           flex-start 
           flex-end 
           space-around(沿着主轴均匀地分布,两端留下空间。)
           space-between(沿着主轴均匀地分布,两端不留空间。)

       align-items:控制 flex 项在交叉轴上的位置。
           center 
           flex-start 
           flex-end 


      精灵图

      所谓精灵图就是把很多的小图片合并到一张较大的图片里，所以在首次加载页面的时候，就不用加载过多的小图片，只需要加载出来将小图片合并起来的那一张大图片也就是精灵图即可，这样在一定程度上减少了页面的加载速度，也一定程度上缓解了服务器的压力。例如王者荣耀页面里的几个小logo。
      其实说白了就是将精灵图设为一个大背景，然后通过background-position来移动背景图，从而显示出我们想要显示出来的部分。
      精灵图虽然实现了缓解服务器压力以及用户体验等问题，但还是有一个很大的不足，那就是牵一发而动全身。这些图片的背景都是我们详细测量而得出来的，如果需要改动页面，将会是很麻烦的一项工作。。。


      伪类和伪元素

      用于向某些选择器添加特殊的效果。
      伪类：通过选择器找到那些不存在于DOM树中的信息以及不能被常规CSS选择器获取到的信息。
      伪元素：：创建了一些抽象元素，这些抽象元素是不存在于文档语言里的（可以理解为html源码）。（比如常见的::before,::after）。


      （3）js篇


      script放在head会造成什么问题？如何解决？

      但是放到head中没有任何效果。原因是因为文档还没加载，就读了js，js就不起作用了

      想在head里用的话，利用 window.onload = function(){} 代码包裹，文档加载之后再执行，建议把js代码放到body的最底部，因为浏览器生成Dom树的时候是一行一行读HTML代码的，script标签放在最后面就不会影响前面的页面的渲染。

      代码：window.onload() //在网页加载完毕后立刻执行的操作


      script 引入方式

      你可能感兴趣的:(面试高频,前端)

      • 前端实现页面截图 -- html2canvas 浮桥 前端
        方案：canvaspuppeteer（无头浏览器）html2canvas使用html2canvas实现：考虑：1.截图区域：全页面截图，局部截图、特定区域截图2.函数式、组件式实现代码：页面截图页面截图示例这是一个简单的页面截图示例。截图functionhtml2canvasToImage(dom){//使用html2canvas将页面转换为canvashtml2canvas(dom).then(
      • 软件开发面试题C#，.NET知识点（续） .房东的猫 c#.net
        1.C#中的封装是什么，以及它的重要性。封装（Encapsulation）是面向对象编程（OOP）的一个基本概念。它指的是将对象的状态（属性）和行为（方法）绑定在一起，并且将这些细节隐藏起来，只暴露必要的接口给外部使用。这样做的好处包括：提高代码的安全性：通过将数据隐藏在类内部，并通过公共方法（getters和setters）来访问和修改这些数据，可以防止外部代码直接修改类的内部状态，从而保护数据
      • 前端数据模拟利器 Mock.js 深度解析 2501_91133317 前端javascript开发语言
        写在前面：宝，我手里有个长期项目，考虑接私活的可以看看我GitHub！https://github.com/ccy-233/coder2retire前端数据模拟利器Mock.js深度解析一、Mock.js核心价值1.1为何需要数据模拟前后端并行开发加速接口文档驱动开发异常场景模拟测试演示环境数据构造1.2Mock.js核心能力//典型数据生成示例Mock.mock('/api/user',{"us
      • Java开发-面试题-0014-@Component, @Controller, @Repository,@Mapper,@Service有何区别 CodeZeng1998 面试题java开发语言springboot
        更多内容欢迎关注我（持续更新中，欢迎Star✨）Github：CodeZeng1998/Java-Developer-Work-Note技术公众号：CodeZeng1998（纯纯技术文）生活公众号：好锅（Lifeismorethancode）其他平台：CodeZeng1998、好锅@Component,@Controller,@Repository,@Mapper,@Service有何区别：@Co
      • VUE前端实现防抖节流 Lodash 2501_91133275 前端vue.jsjavascript
        写在前面：兄弟们，我手里有个长期项目，考虑接私活的可以看看我GitHub！https://github.com/ccy-233/coder2retire方法一：采用Lodash工具库Lodash是一个一致性、[模块化]、高性能的JavaScript实用工具库。（1）采用终端导入Lodash库$npmi-gnpm$npmi--savelodash（2）应用示例：搜索框输入防抖在这个示例中，我们希望用
      • 软件测试工程师面试题（含答案） 美团程序员 自动化测试软件测试软件测试面试软件测试软件测试面试面试职场和发展
        面试题列表1、自我介绍，涉及工作经历答：基本信息+擅长测试方向+个人突出亮点+以往工作经历等等。2、在公司中测试的流程是什么答：测试流程：需求评审>测试计划>测试计划>测试方案>编写用例>执行用例>回归测试>提交缺陷报告>提交测试报告3、举例一个项目，在项目中做了什么答：可以聊聊做了性能、自动化、工具开发，测试平台开发、功能等自己擅长的地方。4、如何提升测试效率，如何保障测试质量答：测试人员应该从
      • 从零开始学机器学习——构建一个推荐web应用 努力的小雨 机器学习机器学习前端人工智能
        首先给大家介绍一个很好用的学习地址：https://cloudstudio.net/columns今天，我们终于将分类器这一章节学习完活了，和回归一样，最后一章节用来构建web应用程序，我们会回顾之前所学的知识点，并新增一个web应用用来让模型和用户交互。所以今天的主题是美食推荐。美食推荐Web应用程序首先，请不要担心，本章节并不会涉及过多的前端知识点。我们此次的学习重点在于机器学习本身，因此我们
      • 云原生：K8s（Kubernetes）高频典型面试题汇总 老舅的火箭爱扫地 云原生kubernetes容器
        1.简述etcd及其特点？答：etcd是CoreOS团队发起的开源项目，是一个管理配置信息和服务发现（servicediscovery）的项目，它的目标是构建一个高可用的分布式键值（key-value）数据库，基于Go语言实现。特点：l简单：支持REST风格的HTTP+JSONAPIl安全：支持HTTPS方式的访问l快速：支持并发1k/s的写操作l可靠：支持分布式结构，基于Raft的一致性算法，R
      • 软件测试面试题 bobob_ Testing
        您所熟悉的测试用例设计方法都有哪些？请分别以具体的例子来说明这些方法在测试用例设计工作中的应用。答：有黑盒和白盒两种测试种类，黑盒有等价类划分法，边界分析法，因果图法和错误猜测法。白盒有逻辑覆盖法，循环测试路径选择，基本路径测试。例子：在一次输入多个条件的完整性查询中。利用等价类划分法则和边界分析法则，首先利用等价划分法，可以一个或多个结果是OK的测试用例，然后确认多个NG的测试用例，然后利用边界
      • 【前端入门】应该了解和知道的几个国内外前端开发资源网站 爱上大树的小猪 前端
        与大家分享一下几个国内外前端开发资源网站国际资源MDNWebDocs(MozillaDeveloperNetwork)用途：MDN是Web技术领域最全面的文档库之一，涵盖了HTML、CSS、JavaScript以及浏览器API等。链接:https://developer.mozilla.orgW3Schools用途：适合初学者学习Web技术，提供从基础到进阶的教程，同时还有在线练习环境。链接:ht
      • 【前端】如何依靠纯前端实现拍照获取/选择文件等文字识别OCR技术 爱上大树的小猪 前端ocr前端框架react.js
        本文仅介绍第三方依赖包Tesseract.js，Tesseract.js是一个基于网页的OCR（光学字符识别）引擎，可以识别图像中的文本并将其转换为可供计算机处理的文本数据。支持多框架编译，如Vue、React等，这里展示步骤为React开发。下面直接进入主题：附Tesseract.js官方（https://github.com/naptha/tesseract.js）下载安装依赖包npminst
      • 鸿蒙开发2024【面试题库】讲解，近期需要面试的可千万别错过！ 鸿蒙系统小能手Mr.Li 鸿蒙开发harmonyos面试鸿蒙OpenHarmony鸿蒙系统程序员移动开发
        1.请简述鸿蒙OS与AndroidOS的主要区别是什么？设备兼容性：鸿蒙OS是一款面向各种设备的分布式操作系统，支持手机、平板电脑、智能手表、智能家居、汽车等多种设备类型，并能在这些设备之间实现无缝切换和共享数据。而Android系统则主要用于移动设备，如手机和平板电脑。系统架构：鸿蒙OS采用分布式技术架构，通过分布式技术实现多设备间的协作和数据共享，更加灵活、安全、高效。而Android则采用单
      • 【面经】2025年软件测试面试题，精选100 道（附答案） 测试界的路飞 软件测试面试面试软件测试职场和发展软件测试面试
        测试技术面试题1、我现在有个程序，发现在Windows上运行得很慢，怎么判别是程序存在问题还是软硬件系统存在问题？2、什么是兼容性测试？兼容性测试侧重哪些方面？3、测试的策略有哪些？4、正交表测试用例设计方法的特点是什么？5、描述使用bugzilla缺陷管理工具对软件缺陷（BUG）跟踪的管理的流程？6、描述测试用例设计的完整过程？7、你觉得bugzilla在使用的过程中，有什么问题？8、单元测试的
      • 前端 - js - - 防抖和节流 cv高级工程师YKY vue.js前端javascript
        1、防抖短时间内重复执行相同操作时只执行最后一次常见场景：浏览器输入文字后下面会有模糊提示实现思路：延时器控制事件在几秒后执行每次触发事件时都会重置延时器constfn=()=>{//先定义timeout避免第一次触发时clearTimeout报错lettimeout;//每次触发事件重置延时器clearTimeout(timeout)//规定一秒后再执行timeout=setTimeout(()
      • 数据库核心技术面试题深度剖析：主从同步、二级索引与Change Buffer 后端数据库mysql
        在数据库相关岗位的面试中，主从同步、二级索引、ChangeBuffer是高频考察点。本文将从面试题角度拆解这三个技术点，覆盖底层原理、性能优化、设计思想，并结合实际场景与高频追问，助你构建系统性回答框架。一、主从同步：高可用架构的灵魂1.基础问题：主从同步的基本流程是什么？答：核心流程：主库将事务写入Binlog（二进制日志）从库的IO线程拉取Binlog到本地RelayLog从库的SQL线程重放
      • 嵌入式SDIO 总线面试题及参考答案 大模型大数据攻城狮 fpga开发嵌入式面经SPIUSB接口SD总线SDIO总线牛客网
        目录SDIO总线与SD总线的核心区别是什么？(附框架图）简述SDIO总线物理接口的组成及其功能（CLK、CMD、DAT0-DAT3）。SDIO总线支持的最大数据传输位宽是多少？如何配置？解释SDIO总线中的主从模式架构及通信流程。SDIO卡的功能类型有哪些（如Wi-Fi、蓝牙、GPS）？SDIO总线时钟信号（CLK）的作用及典型频率范围SDIO协议中的OCR寄存器作用是什么？如何通过CMD5获取卡
      • 前端存储后端响应数据方式详解 z2637305611 前端
        在前端存储后端响应数据是常见需求，可以优化性能（减少重复请求）、支持离线访问或提升用户体验。以下是超详细的实现方式和注意事项：一、前端存储后端数据的核心步骤1.获取后端数据使用fetch或axios发送请求：//使用fetchfetch('https://api.example.com/data').then(response=>response.json()).then(data=>saveDa
      • 计算机毕业设计springboot教务管理系统 0k1c1源码+系统+程序+lw文档+部署 呦呦网络 springbootjavamysql
        计算机毕业设计springboot教务管理系统0k1c1源码+系统+程序+lw文档+部署计算机毕业设计springboot教务管理系统0k1c1源码+系统+程序+lw文档+部署本源码技术栈：项目架构：B/S架构开发语言：Java语言开发软件：ideaeclipse前端技术：Layui、HTML、CSS、JS、JQuery等技术后端技术：JAVA运行环境：Win10、JDK1.8数据库：MySQL5
      • 【大模型开发】大模型转换为 NCNN 格式并在 微信小程序 中进行调用 云博士的AI课堂 大模型技术开发与实践哈佛博后带你玩转机器学习深度学习微信小程序小程序NCNN小程序调用大模型大模型部署大模型优化部署微信小程序
        以下内容将介绍如何将大模型转换为NCNN格式并在微信小程序中进行调用。我们会从整体流程、模型转换工具、NCNNWebAssembly（WASM）编译与集成、小程序前端代码示例等方面进行详细讲解，并在最后给出优化方向与未来建议。目录背景与整体流程概述准备工作2.1常见模型格式与转换思路2.2环境与工具安装模型转换为NCNN格式3.1以ONNX模型为例3.2使用onnx2ncnn工具NCNN在微信小程
      • 面试视角深度解析：索引冗余 vs 覆盖索引 vs 全表扫描的终极抉择 dblens 数据库管理和开发工具 mysql面试java数据库
        一、核心概念解析（面试破题关键）1.索引冗余（IndexRedundancy）本质：同一字段存在多个重复或包含关系的索引典型场景重复索引：INDEX(a)和INDEX(a)前缀冗余：已有INDEX(a,b,c)时再建INDEX(a,b)隐式覆盖：主键索引与唯一索引的列重叠面试考点如何通过SHOWINDEX识别冗余索引冗余索引对写性能的影响公式：写入耗时=基础耗时×(索引数+1)存储成本计算：单个索
      • 02、数据结构与算法 - 基础：数组 - 吊打面试官 星星学霸 数据结构与算法-吊打面试官python开发语言java算法数据结构
        更多系列教程，每天更新更多教程关注：xxxueba.com星星学霸本篇博客我们介绍数据结构的鼻祖------数组，可以说数组几乎能表示一切的数据结构，在每一门编程语言中，数组都是重要的数据结构，当然每种语言对数组的实现和处理也不相同，但是本质是都是用来存放数据的的结构，这里我们以Java语言为例，来详细介绍Java语言中数组的用法。Java中数组的介绍在Java中，数组是用来存放同一种数据类型的集
      • 面试求助：接口测试用例设计主要考虑哪些方面？ 海姐软件测试 lua开发语言
        一、基础功能验证1.正常场景覆盖关键点：验证接口在合法输入下的正确响应（状态码、数据结构、业务逻辑）。案例：json复制//用户登录接口输入：{"username":"合法用户","password":"正确密码"}预期：200OK+token返回+数据库登录记录更新2.异常场景覆盖关键点：触发错误码（4xx/5xx）的边界条件。测试维度：参数缺失/类型错误（如整型传字符串）非法参数值（如手机号格
      • Vue 3 vs Vue 2：深入解析从性能优化到源码层面的进化 银之夏雪 vue.js性能优化前端
        Vue.js是当今前端开发中最受欢迎的框架之一。随着Vue3的发布，它在性能优化、开发体验、响应式系统、构建工具和热更新等多个方面都带来了巨大提升。本文将深入剖析Vue3的进化，包括其源码实现方面的优化，如diff算法、静态标记、编译优化，以及Vue3在热更新、构建工具上的改进。1.性能提升：底层优化的革命1.1响应式系统的改进：从Object.defineProperty到ProxyVue2的响
      • 电机控制常见面试问题（十三） 小雀丝 电机控制电机嵌入式硬件
        文章目录一、直流电机与交流电机的基本工作原理二、永磁同步电机和异步电机区别三.PID控制器的原理及其在电机速度控制中的应用四.电机驱动电路设计的关键因素五.电机发热过高的有效原因以及处理办法六.常见电机过载保护方法及其工作原理七.电机振动的原因以及处理八.电机电流波形分析判断电机故障–一、直流电机与交流电机的基本工作原理直流电机中，直流发电机是电枢在原动机拖动下旋转，其导体切割主磁极固定磁场产生感
      • 如何减少跨团队交付摩擦？——基于 DevOps 与敏捷的最佳实践 网罗开发 实战实战源码devops运维
        网罗开发（小红书、快手、视频号同名）  大家好，我是展菲，目前在上市企业从事人工智能项目研发管理工作，平时热衷于分享各种编程领域的软硬技能知识以及前沿技术，包括iOS、前端、HarmonyOS、Java、Python等方向。在移动端开发、鸿蒙开发、物联网、嵌入式、云原生、开源等领域有深厚造诣。图书作者：《ESP32-C3物联网工程开发实战》图书作者：《SwiftUI入门，进阶与实战》超级个体：CO
      • AWS DevOps 面试问题及答案 m0_65697474 1024程序员节
        常规AWSDevOps问题什么是DevOps？DevOps是一套集成软件开发(Dev)和IT运营(Ops)的实践，旨在缩短开发生命周期并根据业务目标频繁提供功能、修复和更新。使用AWS进行DevOps有哪些好处？AWS提供弹性计算云(EC2)、弹性容器服务(ECS)和ElasticBeanstalk等灵活服务，可帮助自动化和扩展开发和部署管道。功能包括可扩展性、自动化、CI/CD、基础设施即代码(
      • 深度解析前端面试八股文：核心知识点与高效应对策略 赵大仁 前端面试职场和发展
        深度解析前端面试八股文：核心知识点与高效应对策略1.引言前端面试是每位开发者迈向职业进阶的重要环节，涉及HTML、CSS、JavaScript、性能优化、浏览器原理、网络、安全、框架（Vue/React）等核心知识点。本文不仅会覆盖前端面试的高频八股文，还会结合生动的案例，让你在面试时能够脱离死记硬背，从理解中突破！2.HTML&CSS高频考点2.1HTML语义化问题：什么是HTML语义化？为什么
      • AJAX PHP：深入理解与实际应用 wjs2024 开发语言
        AJAXPHP：深入理解与实际应用引言随着互联网技术的不断发展，前端与后端交互变得更加频繁。AJAX（AsynchronousJavaScriptandXML）和PHP（HypertextPreprocessor）作为两种流行的技术，在实现动态网页和应用程序方面扮演着重要角色。本文将深入探讨AJAXPHP的工作原理、应用场景以及实际开发中的注意事项。AJAXPHP概述AJAXAJAX是一种基于Ja
      • 构建我们的Python代码库依赖图 openwin_top python编程示例系列二python开发语言
        构建我们的Python代码库依赖图作者：GeorgeFarcasiu,NoahKim,JaconBrugh,JiahaoLi,HudsonRiverTrading引言与我们在高频交易的根基保持一致，HudsonRiverTrading（HRT）行动迅速。与任何工程指标一样，速度有其权衡。在过去的五年中，由于一种通常更重视“足够好”而非“完美”的工程文化，一个鼓励团队间代码共享的协作工作环境，以及一
      • 【从零开始学习计算机科学】设计模式（五）MVC模式、业务代表模式、组合实体模式、数据访问对象模式、前端控制器模式、拦截过滤器模式、服务定位器模式、传输对象模式 贫苦游商 学习设计模式mvc业务代理模式组合实体模式数据访问对象模式传输对象模式
        【从零开始学习计算机科学】设计模式（五）MVC模式、业务代表模式、组合实体模式、数据访问对象模式、前端控制器模式、拦截过滤器模式、服务定位器模式、传输对象模式MVC模式主要组件工作原理优点缺点适用场景总结业务代表模式主要特点组成部分工作原理优点缺点适用场景总结组合实体模式主要特点组成部分工作原理适用场景优点缺点总结数据访问对象模式主要特点组成部分工作原理适用场景优点缺点总结前端控制器模式主要特点组
      • github中多个平台共存 jackyrong github
        在个人电脑上，如何分别链接比如oschina,github等库呢，一般教程之列的，默认 ssh链接一个托管的而已，下面讲解如何放两个文件 1） 设置用户名和邮件地址 $ git config --global user.name "xx" $ git config --global user.email "[email protected]"
      • ip地址与整数的相互转换(javascript) alxw4616 JavaScript
        //IP转成整型 function ip2int(ip){ var num = 0; ip = ip.split("."); num = Number(ip[0]) * 256 * 256 * 256 + Number(ip[1]) * 256 * 256 + Number(ip[2]) * 256 + Number(ip[3]); n
      • 读书笔记-jquey+数据库+css chengxuyuancsdn htmljqueryoracle
        1、grouping ,group by rollup, GROUP BY GROUPING SETS区别 2、$("#totalTable tbody>tr td:nth-child(" + i + ")").css({"width":tdWidth, "margin":"0px", &q
      • javaSE javaEE javaME == API下载 Array_06 java
        oracle下载各种API文档： http://www.oracle.com/technetwork/java/embedded/javame/embed-me/documentation/javame-embedded-apis-2181154.html JavaSE文档： http://docs.oracle.com/javase/8/docs/api/ JavaEE文档： ht
      • shiro入门学习 cugfy javaWeb框架
        声明本文只适合初学者，本人也是刚接触而已，经过一段时间的研究小有收获，特来分享下希望和大家互相交流学习。 首先配置我们的web.xml代码如下，固定格式，记死就成 <filter>         <filter-name>shiroFilter</filter-name> &nbs
      • Array添加删除方法 357029540 js
             刚才做项目前台删除数组的固定下标值时，删除得不是很完整，所以在网上查了下，发现一个不错的方法，也提供给需要的同学。 //给数组添加删除             Array.prototype.del = function(n){
      • navigation bar 更改颜色 张亚雄 IO
        今天郁闷了一下午，就因为objective-c默认语言是英文，我写的中文全是一些乱七八糟的样子，到不是乱码，但是，前两个自字是粗体，后两个字正常体，这可郁闷死我了，问了问大牛，人家告诉我说更改一下字体就好啦，比如改成黑体，哇塞，茅塞顿开。       翻书看，发现，书上有介绍怎么更改表格中文字字体的，代码如下    
      • unicode转换成中文 adminjun unicode编码转换
          在Java程序中总会出现\u6b22\u8fce\u63d0\u4ea4\u5fae\u535a\u641c\u7d22\u4f7f\u7528\u53cd\u9988\uff0c\u8bf7\u76f4\u63a5这个的字符，这是unicode编码，使用时有时候不会自动转换成中文就需要自己转换了使用下面的方法转换一下即可。 /** * unicode 转换成 中文
      • 一站式 Java Web 框架 firefly aijuans Java Web
        Firefly是一个高性能一站式Web框架。 涵盖了web开发的主要技术栈。 包含Template engine、IOC、MVC framework、HTTP Server、Common tools、Log、Json parser等模块。 firefly-2.0_07修复了模版压缩对javascript单行注释的影响，并新增了自定义错误页面功能。 更新日志： 增加自定义系统错误页面功能
      • 设计模式——单例模式 ayaoxinchao 设计模式
        定义          Java中单例模式定义：“一个类有且仅有一个实例，并且自行实例化向整个系统提供。”   分析          从定义中可以看出单例的要点有三个：一是某个类只能有一个实例；二是必须自行创建这个实例；三是必须自行向系统提供这个实例。   &nb
      • Javascript 多浏览器兼容性问题及解决方案 BigBird2012 JavaScript
        不论是网站应用还是学习js,大家很注重ie与firefox等浏览器的兼容性问题，毕竟这两中浏览器是占了绝大多数。 一、document.formName.item(”itemName”) 问题 问题说明：IE下，可以使用 document.formName.item(”itemName”) 或 document.formName.elements ["elementName&quo
      • JUnit-4.11使用报java.lang.NoClassDefFoundError: org/hamcrest/SelfDescribing错误 bijian1013 junit4.11单元测试
                下载了最新的JUnit版本，是4.11，结果尝试使用发现总是报java.lang.NoClassDefFoundError: org/hamcrest/SelfDescribing这样的错误，上网查了一下，一般的解决方案是，换一个低一点的版本就好了。还有人说，是缺少hamcrest的包。去官网看了一下，如下发现：    
      • [Zookeeper学习笔记之二]Zookeeper部署脚本 bit1129 zookeeper
        Zookeeper伪分布式安装脚本(此脚本在一台机器上创建Zookeeper三个进程，即创建具有三个节点的Zookeeper集群。这个脚本和zookeeper的tar包放在同一个目录下，脚本中指定的名字是zookeeper的3.4.6版本，需要根据实际情况修改)：   #!/bin/bash #!!!Change the name!!! #The zookeepe
      • 【Spark八十】Spark RDD API二 bit1129 spark
        coGroup package spark.examples.rddapi import org.apache.spark.{SparkConf, SparkContext} import org.apache.spark.SparkContext._ object CoGroupTest_05 { def main(args: Array[String]) { v
      • Linux中编译apache服务器modules文件夹缺少模块(.so)的问题 ronin47 modules
        在modules目录中只有httpd.exp，那些so文件呢？ 我尝试在fedora core 3中安装apache 2. 当我解压了apache 2.0.54后使用configure工具并且加入了 --enable-so 或者 --enable-modules=so (两个我都试过了) 去make并且make install了。我希望在/apache2/modules/目录里有各种模块，
      • Java基础-克隆 BrokenDreams java基础
                Java中怎么拷贝一个对象呢？可以通过调用这个对象类型的构造器构造一个新对象，然后将要拷贝对象的属性设置到新对象里面。Java中也有另一种不通过构造器来拷贝对象的方式，这种方式称为 克隆。         Java提供了java.lang.
      • 读《研磨设计模式》-代码笔记-适配器模式-Adapter bylijinnan java设计模式
        声明： 本文只为方便我个人查阅和理解，详细的分析以及源代码请移步 原作者的博客http://chjavach.iteye.com/ package design.pattern; /* * 适配器模式解决的主要问题是，现有的方法接口与客户要求的方法接口不一致 * 可以这样想，我们要写这样一个类（Adapter）: * 1.这个类要符合客户的要求 ---> 那显然要
      • HDR图像PS教程集锦&心得 cherishLC PS
        HDR是指高动态范围的图像，主要原理为提高图像的局部对比度。 软件有photomatix和nik hdr efex。 一、教程 叶明在知乎上的回答： http://www.zhihu.com/question/27418267/answer/37317792 大意是修完后直方图最好是等值直方图，方法是HDR软件调一遍，再结合不透明度和蒙版细调。 二、心得 1、去除阴影部分的
      • maven-3.3.3 mvn archetype 列表 crabdave ArcheType
        maven-3.3.3 mvn archetype 列表 可以参考最新的：http://repo1.maven.org/maven2/archetype-catalog.xml   [INFO] Scanning for projects... [INFO]                
      • linux shell 中文件编码查看及转换方法 daizj shell中文乱码vim文件编码
        一、查看文件编码。     在打开文件的时候输入:set fileencoding     即可显示文件编码格式。 二、文件编码转换     1、在Vim中直接进行转换文件编码,比如将一个文件转换成utf-8格式       &
      • MySQL--binlog日志恢复数据 dcj3sjt126com binlog
        恢复数据的重要命令如下 mysql> flush logs; 默认的日志是mysql-bin.000001，现在刷新了重新开启一个就多了一个mysql-bin.000002                  
      • 数据库中数据表数据迁移方法 dcj3sjt126com sql
        刚开始想想好像挺麻烦的，后来找到一种方法了，就SQL中的 INSERT 语句，不过内容是现从另外的表中查出来的，其实就是 MySQL中INSERT INTO SELECT的使用   下面看看如何使用   语法：MySQL中INSERT INTO SELECT的使用 1. 语法介绍       有三张表a、b、c，现在需要从表b
      • Java反转字符串 dyy_gusi java反转字符串
               前几天看见一篇文章，说使用Java能用几种方式反转一个字符串。首先要明白什么叫反转字符串，就是将一个字符串到过来啦，比如"倒过来念的是小狗"反转过来就是”狗小是的念来过倒“。接下来就把自己能想到的所有方式记录下来了。 1、第一个念头就是直接使用String类的反转方法，对不起，这样是不行的，因为Stri
      • UI设计中我们为什么需要设计动效 gcq511120594 UIlinux
        随着国际大品牌苹果和谷歌的引领，最近越来越多的国内公司开始关注动效设计了，越来越多的团队已经意识到动效在产品用户体验中的重要性了，更多的UI设计师们也开始投身动效设计领域。 但是说到底，我们到底为什么需要动效设计？或者说我们到底需要什么样的动效？做动效设计也有段时间了，于是尝试用一些案例，从产品本身出发来说说我所思考的动效设计。 一、加强体验舒适度 嗯，就是让用户更加爽更加爽的用
      • JBOSS服务部署端口冲突问题 HogwartsRow java应用服务器jbossserverEJB3
        服务端口冲突问题的解决方法，一般修改如下三个文件中的部分端口就可以了。   1、jboss5/server/default/conf/bindingservice.beans/META-INF/bindings-jboss-beans.xml   2、./server/default/deploy/jbossweb.sar/server.xml   3、.
      • 第三章 Redis/SSDB+Twemproxy安装与使用 jinnianshilongnian ssdbreidstwemproxy
        目前对于互联网公司不使用Redis的很少，Redis不仅仅可以作为key-value缓存，而且提供了丰富的数据结果如set、list、map等，可以实现很多复杂的功能；但是Redis本身主要用作内存缓存，不适合做持久化存储，因此目前有如SSDB、ARDB等，还有如京东的JIMDB，它们都支持Redis协议，可以支持Redis客户端直接访问；而这些持久化存储大多数使用了如LevelDB、RocksD
      • ZooKeeper原理及使用 liyonghui160com
                   ZooKeeper是Hadoop Ecosystem中非常重要的组件，它的主要功能是为分布式系统提供一致性协调(Coordination)服务，与之对应的Google的类似服务叫Chubby。今天这篇文章分为三个部分来介绍ZooKeeper，第一部分介绍ZooKeeper的基本原理，第二部分介绍ZooKeeper
      • 程序员解决问题的60个策略 pda158 框架工作单元测试
        根本的指导方针 1. 首先写代码的时候最好不要有缺陷。最好的修复方法就是让 bug 胎死腹中。 良好的单元测试 强制数据库约束 使用输入验证框架 避免未实现的“else”条件 在应用到主程序之前知道如何在孤立的情况下使用   日志 2. print 语句。往往额外输出个一两行将有助于隔离问题。 3. 切换至详细的日志记录。详细的日
      • Create the Google Play Account sillycat Google
        Create the Google Play Account Having a Google account, pay 25$, then you get your google developer account. References: http://developer.android.com/distribute/googleplay/start.html https://p
      • JSP三大指令 vikingwei jsp
        JSP三大指令   一个jsp页面中，可以有0~N个指令的定义！ 1. page --> 最复杂：<%@page language="java" info="xxx"...%>   * pageEncoding和contentType：     > pageEncoding：它