卷心菜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 引入方式

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

      • 家长们的福音：教师对书面作业全批全改，学校不得考试选拔学生 丝雨润春风
        年前年后教育部门公布了不少措施，来减轻学生负担，维护学生的身心健康成长，随后各地教育局也陆陆续续颁布了各种新政策，这不最近山东教育厅也起草了《山东普通中小学规范办学十五条规定》。在这15条规定内容之中包括了：教师对书面作业全批全改，不给家长布置作业或要求家长评改作业；义务教育学校不得以考试、面试、评测等名义选拔学生；保障学生每天睡眠时间，高中生不少于8个小时。毋庸置疑这个规定的初衷非常得好，是对学
      • 大前端-postcss安装使用指南 黑夜照亮前行的路 postcss
        PostCSS是一款强大的CSS处理工具，可以用来自动添加浏览器前缀、代码合并、代码压缩等，提升代码的可读性，并支持使用最新的CSS语法。以下是一份简化的PostCSS安装使用指南：一、安装PostCSS在你的项目目录中，通过npm（NodePackageManager）来安装PostCSS。打开命令行窗口，输入以下命令：bash复制代码npminstallpostcss--save-dev这将把
      • 谷歌浏览器驱动Chromedriver（114-120版本）文件以及驱动下载教程 pigerr杨 Pythonpythonchromedrivers
        ChromeDriver官方网站GitHub||GoogleChromeLabs/chrome-for-testingChromeDriver113-125_JSONChromeforTestingavailability123-125zip白月黑羽Python基础|进阶|Qt图形界面|Django|自动化测试|性能测试|JS语言|JS前端|原理与安装
      • 虚拟 DOM 的优缺点有哪些 咕噜签名分发 前端javascript开发语言
        虚拟DOM（VirtualDOM）技术作为现代前端开发中的重要组成部分，已经成为了众多流行前端框架的核心特性。它的引入为前端开发带来了诸多优势，同时也需要我们认真思考其潜在的考量。下面简单的介绍一下虚拟DOM技术的优势与缺点，深入探讨其在实际应用中的影响。提升性能虚拟DOM的最大优势之一是提升页面性能。通过比较前后两次虚拟DOM树的差异，最小化实际DOM操作，从而减少页面重渲染时的性能消耗。这种优
      • 3、JavaWeb-Ajax/Axios-前端工程化-Element 所谓远行Misnearch #JavaWeb前端ajaxelementuijava前端框架
        P34Ajax介绍Ajax:AsynchroousJavaScriptAndXML，异步的JS和XMLJS网页动作，XML一种标记语言，存储数据，作用：数据交换：通过Ajax给服务器发送请求，并获取服务器响应的数据异步交互：在不重新加载整个页面的情况下，与服务器交换数据并实现更新部分网页的技术，例如：搜索联想、用户名是否可用的校验等等。同步与异步：同步：服务器在处理中客户端要处于等待状态，输入域名
      • 2.5 项目讲解流程 王守谦26 项目资料数据库
        一、项目讲解1、自我介绍2、项目流程-===============================二、自我介绍（一）、学员自我介绍，讲解存在的问题比如：讲解年份、卡顿、重点学历、忘记（二）自我规则内容1、开场白：礼貌用语2、时间：自我介绍1-2分钟以内3、内容：姓名、籍贯、毕业院校、（拉进面试官距离）4、技能：功能测试、接口测试、自动化测试、app测试、性能测试、安全测试黑盒测试、白盒测试、灰盒
      • MyBatis高级面试题-2024 my_styles mybatisjava开发语言面试题
        MyBatis的核心组件有哪些？首先第一个是，SqlSessionFactory，它就像是一个会话工厂。它的任务是创建SqlSession对象，这个对象是我们与数据库交互的主要途径。SqlSessionFactory的作用很重要，因为它可以帮我们配置数据库连接信息和事务管理等。一旦这个工厂被建立起来，它就会加载一些必要的配置和映射文件，为后续的数据库操作提供一个可靠的基础。第二个是SqlSessi
      • 排序算法太多？常用排序都在这了，一篇文章总结和实现所有面试会考的排序算法（基于Python实现） 宇宙之一粟 不归路之Python#IT面试题收集与总结数据结构与算法算法数据结构排序算法pythonjava
        文章目录排序算法1.常见的排序算法1.1选择排序1.1.1思想1.1.2实现**1.1.3选择排序分析**1.2冒泡排序**1.2.1思想****1.2.2实现****1.2.3冒泡排序分析**1.3插入排序**1.3.1思想****1.3.2实现****1.3.3插入排序分析**1.4归并排序☆☆★**1.4.1思想****1.4.2实现****1.4.3归并排序分析**1.5快速排序☆★★**
      • 15：00面试，15：06就出来了，问的问题有点变态。。。 爱学习的执念 面试软件测试软件测试面试面试职场和发展
        从小厂出来，没想到在另一家公司又寄了。到这家公司开始上班，加班是每天必不可少的，看在钱给的比较多的份上，就不太计较了。没想到9月一纸通知，所有人不准加班，加班费不仅没有了，薪资还要降40%,这下搞的饭都吃不起了。还在有个朋友内推我去了一家互联网公司，兴冲冲见面试官，没想到一道题把我给问死了：如果模块请求http改为了https,测试方案应该如何制定，修改?感觉好简单的题，硬是没有答出来，早知道好好
      • java实体中返回前端的double类型四舍五入（格式化） 婲落ヽ紅顏誶 java
        根据业务，需要通过后端给前端返回部分double类型的数值，一般需要保留两位小数，使用jackson转换对象packagecom.ruoyi.common.core.config;importcom.fasterxml.jackson.core.JsonGenerator;importcom.fasterxml.jackson.databind.JsonSerializer;importcom.f
      • Django forms组件 在飞行-米龙 Djangodjangopython后端
        【一】引入【1】实现登陆验证功能（1）需求分析登陆验证需要前后端交互，采用form表单提交数据对数据进行校验用户名必须以英文大写字母开头密码必须大于三位数反馈给用户错误的信息除了反馈错误的信息还有保留原始输入内容（2）后端代码使用user_info_dict字典每次刷新存储存储前端发送的信息存储后端进行验证的信息defhome(request):#每次后刷新这个信息字典user_info_dict
      • 工资高压力大工资低休息多你怎么选择 绿蘋果
        人总是面临很多选择，不久前自己刚刚放弃一份薪水还不错的工作，为了能多点时间陪陪孩子，也适当的让自己放松放松，运气好，离职后赶上疫情，对于没有人依赖的我，瞬间压力好大，本来是准备休息陪陪孩子出去走走的，这门还没出呢，就不能出门了。我承认自己有些心慌了，需要赶紧找工作了，在家休息一个月不到，我又开始赶急赶忙的找工作，一年已经过半，开始找只能网上投投简历，一直也没回复，后边终于收到面试电话了，对于来之不
      • Vue 常见面试题(一) 安生生申 面试题vue.js前端javascript
        目录1、Vue的最大的优势是什么？（必会）2、Vue和jQuery两者之间的区别是什么？（必会）3、MVVM和MVC区别是什么？哪些场景适合？（必会）1、基本定义2、使用场景3、两者之间的区别4、Vue数据双向绑定的原理是什么?（必会）5、Object.defineProperty和Proxy的区别（必会）6、Vue生命周期总共分为几个阶段？（必会）7、第一次加载页面会触发哪几个钩子函数？（必会）
      • Java回溯知识点（含面试大厂题和源码） 一成码农 java面试开发语言
        回溯算法是一种通过遍历所有可能的候选解来寻找所有解的算法，如果候选解被确认不是一个解（或至少不是最后一个解），回溯算法会通过在上一步进行一些变化来丢弃这个解，即“回溯”并尝试另一个候选解。回溯法通常用递归方法来实现，在解决排列、组合、选择问题时非常有效。回溯算法的核心要点：路径：也就是已经做出的选择。选择列表：也就是你当前可以做的选择。结束条件：也就是到达决策树底层，无法再做出选择的条件。回溯算法
      • java基础相关面试题详细总结 。。。。。96 java开发语言
        1.Java中的数据类型有哪些？答：Java中的数据类型包括基本数据类型（如整数、浮点数、字符等）和引用数据类型（如类、接口、数组等）。2.什么是面向对象编程（OOP）？答：面向对象编程是一种编程范式，它将数据和对数据的操作封装在一起，形成对象。通过对象之间的交互来实现程序的功能。3.解释类和对象的关系。答：类是对象的抽象描述，而对象是类的具体实例。一个类可以创建多个对象，每个对象都具有类中定义的
      • Web前端Html的表单 任家伟 前端html
        表单的关键字：form标签表示一个表单区域action=“后端地址”method=“提交数据方式:get/post”input单行输入框type=“text”文本name=“定义名称名字自定义”向后端提交的键readonly=“readonly”只读，不可修改，但是可以提交disabled=“disabled”禁用组件不可修改，不能提交type=“password”密码框type=“radio”单
      • Thinkphp - 详细实现网站系统登录功能，附带 Mysql 数据库设置、Web 前端展示界面、信息校验等（详细代码，即设计过程） 王佳斌 +Thinkphpmysql前端数据库
        前言登录功能，是我们几乎开发每个系统都必须的模块。登录功能设计思路，主要包括几个方面。用户输入网址展示登录页面用户输入用户名，密码等点击登录进行信息校验校验通过之后，记录用户登录信息，跳转指定页面用户校验失败，提示失败信息页面目录具体功能实现为了快速搭建可用、美观的页面，我们采用一个比较成熟的前端框架Bootstrap。下面我们到Bootstrap的官网Bootsrap官网下载bootstrap。
      • Java面试题：解释JVM的内存结构，并描述堆、栈、方法区在内存结构中的角色和作用，Java中的多线程是如何实现的，Java垃圾回收机制的基本原理，并讨论常见的垃圾回收算法 杰哥在此 Java系列javajvm算法面试
        Java内存模型与多线程的深入探讨在Java的世界里，内存模型和多线程是开发者必须掌握的核心知识点。它们不仅关系到程序的性能和稳定性，还直接影响到系统的可扩展性和可靠性。下面，我将通过三个面试题，带领大家深入理解Java内存模型、多线程以及并发编程的相关原理和实践。面试题一：请解释JVM的内存结构，并描述堆、栈、方法区在内存结构中的角色和作用。关注点：JVM内存结构的基本组成堆、栈、方法区的功能和
      • 程序员开发技术整理 laizhixue 学习前端框架
        前端技术：vue-前端框架element-前端框架bootstrap-前端框架echarts-图标组件C#后端技术：webservice：soap架构：简单的通信协议，用于服务通信ORM框架：对象关系映射，如EF：对象实体模型，是ado.net中的应用技术soap服务通讯：xml通讯ado.net：OAuth2:登录授权认证：Token认证：JWT：jsonwebtokenJava后端技术：便捷工
      • 【前端学习——js篇】7.函数缓存 笔下无竹墨下有鱼 前端学习前端学习javascript
        具体见：https://github.com/febobo/web-interview7.函数缓存函数缓存，就是将函数运算过的结果进行缓存本质上就是用空间（缓存存储）换时间（计算过程）常用于缓存数据计算结果和缓存对象。其实现主要通过闭包、柯里化和高阶函数。下面主要介绍下柯里化：①柯里化柯里化（currying)是一种函数式编程的概念，指的是将一个带有多个参数的函数转换成一系列只接受一个参数的函数的
      • Websocket服务监听收发消息 beiback Java服务器问题websocket网络协议网络
        目录1.pom依赖坐标2.项目配置端口和项目包名2.创建处理器3.注册处理器4.前端页面1.pom依赖坐标org.springframework.bootspring-boot-starter-websocket2.项目配置端口和项目包名application.propertiesserver.port=8088//路径规范：为应用的所有servlet提供一个统一的前缀，使URL结构更加清晰和一致
      • Netty服务器结合WebSocke协议监听和接收数据 beiback 服务器问题Java服务器运维netty
        目录1.pom依赖2.配置属性3.创建netty服务器4.建立监听和响应5.创建启动器6.前端static下页面7.前端js8.注意异常问题9.创建netty服务器--使用守护线程1.pom依赖io.nettynetty-all4.1.86.Final2.配置属性application.properties#启动端口server.port=8088server.servlet.context-pa
      • C++面试题 虾仁A 面试c++
        目录一、堆和栈的区别二、C++中new、delte和malloc的区别三、什么是源对象四、C++有哪些设计模式五，你使用过C++哪些类型的指针一、堆和栈的区别特性堆栈申请方式由程序员显式申请和释放由系统自动分配和释放分配方式动态分配自动分配分配效率相对较慢，需要遍历内存链表寻找合适空间相对较快，系统直接分配内存地址不连续的内存区域连续的内存区域大小限制大小灵活，上限取决于虚拟内存大小固定，通常较小
      • 基于SSM+Vue企业销售培训系统 企业人才培训系统 企业课程培训管理系统 企业文化培训班系统Java 计算机程序老哥
        作者主页：计算机毕业设计老哥有问题可以主页问我一、开发介绍1.1开发环境开发语言：Java数据库：MySQL系统架构：B/S后端：SSM(Spring+SpringMVC+Mybatis)前端：Vue工具：IDEA或者Eclipse，JDK1.8，Maven二、系统介绍2.1图片展示注册登录页面：登陆.png前端页面功能：首页、培训班、在线学习、企业文化、交流论坛、试卷列表、系统公告、留言反馈、个
      • javascript实现SM2加密解密 人生在勤，不索何获 javascript前端jquery
        前提JavaWeb环境前端代码window.sm2=function(t){functioni(e){if(r[e])returnr[e].exports;varn=r[e]={i:e,l:!1,exports:{}};returnt[e].call(n.exports,n,n.exports,i),n.l=!0,n.exports}varr={};returni.m=t,i.c=r,i.d=fu
      • 15：00面试，15：06就出来了，问的问题有点变态。。。 程序员油条 自动化测试软件测试面试面试职场和发展
        从小厂出来，没想到在另一家公司又寄了。到这家公司开始上班，加班是每天必不可少的，看在钱给的比较多的份上，就不太计较了。没想到9月一纸通知，所有人不准加班，加班费不仅没有了，薪资还要降40%,这下搞的饭都吃不起了。还在有个朋友内推我去了一家互联网公司，兴冲冲见面试官，没想到一道题把我给问死了：如果模块请求http改为了https,测试方案应该如何制定，修改?感觉好简单的题，硬是没有答出来，早知道好好
      • 16：00面试，16：06就出来了，问的问题有点变态。。。 咖啡加剁椒⑨ 软件测试自动化测试软件测试功能测试程序人生职场和发展面试
        从小厂出来，没想到在另一家公司又寄了。到这家公司开始上班，加班是每天必不可少的，看在钱给的比较多的份上，就不太计较了。没想到8月一纸通知，所有人不准加班，加班费不仅没有了，薪资还要降40%,这下搞的饭都吃不起了。还在有个朋友内推我去了一家互联网公司，兴冲冲见面试官，没想到一道题把我给问死了：如果模块请求http改为了https,测试方案应该如何制定，修改?感觉好简单的题，硬是没有答出来，早知道好好
      • 9：00面试，9：06就出来了，问的问题有点变态。。。 咖啡加剁椒⑦ 软件测试面试职场和发展功能测试软件测试自动化测试程序人生
        从小厂出来，没想到在另一家公司又寄了。到这家公司开始上班，加班是每天必不可少的，看在钱给的比较多的份上，就不太计较了。没想到8月一纸通知，所有人不准加班，加班费不仅没有了，薪资还要降40%,这下搞的饭都吃不起了。还在有个朋友内推我去了一家互联网公司，兴冲冲见面试官，没想到一道题把我给问死了：如果模块请求http改为了https,测试方案应该如何制定，修改?感觉好简单的题，硬是没有答出来，早知道好好
      • 前端埋点解决方案 zhu_zhu_xia 前端
        一、前言：基于神策数据的前端埋点解决方案JavaScript快速使用·神策分析使用手册[预览版]二、sdkgitlab下载地址https://github.com/sensorsdata/sa-sdk-javascript/releases或者npm安装npmisa-sdk-javascript三、入门3.1接入sdk以及配置(version1.17.2)，入口文件接入sdk以及添加配置(func
      • 关于HDP的20道高级运维面试题 编织幻境的妖 运维
        1.描述HDP的主要组件及其作用。HDP（HortonworksDataPlatform）的主要组件包括Hadoop框架、HDFS、MapReduce、YARN以及Hadoop生态系统中的其他关键工具，如Spark、Flink、Hive、HBase等。以下是对这些组件及其作用的具体描述：Hadoop框架:Hadoop是一个开源的分布式计算框架，用Java语言编写，用于存储和处理大规模数据集。它广义
      • 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：它