前端常见面试题整理第二版

重点面试题目

1.BFC 的形成条件

  1. 简称块级格式化上下文。
  2. 如何形成的 bfc?当元素是浮动元素、绝对定位的元素,以及是非块级盒子的块级元素如*(inline-block、table-cells、table-captions)*最后还有 overflow 的属性不是 visible(他是 overfllow 的默认属性)的块级盒子 ,在这些元素的内部都会创建出一个 BFC。

2. 有这样一个 URL:http://item.taobao.com/item.htm?a=1&b=2&c=&d=xxx&e,请写一段 JS 程序提取 URL 中的各个 GET 参数(参数名和参数个数不确定),将其按 key-value 形式返回到一个 json 结构中,如{a:’1′,b:’2′,c:”,d:’xxx’,e:undefined}。

let url = 'http://item.taobao.com/item.htm?a=1&b=2&c=&d=xxx&e,'

function geturl(url) {
     
  //在外面定义一个空变量用来输出最后的对象
  var obj = {
     }

  //判断这个url里面存不存在参数
  // console.log(url.match(/\?/g));
  if (/\?/g.test(url)) {
     
    //取出?号后面的字符串 这个用的是substring方法 找到?后面的哪一位的索引
    var urlstring = url.substring(url.indexOf('?') + 1)
    console.log(urlstring)
    //之后按 &符号拆分成数组
    var urlarry = urlstring.split('&')
    console.log(urlarry)
    //遍历拆分的数组 之后再把数组按 “=”号拆分
    urlarry.forEach(function (v, i) {
     
      console.log(v, i)
      let z = v.split('=')
      console.log(z)
      //之后拼接起来 把obj返回出去
      obj[z[0]] = z[1]
    })
    // console.log(obj);
    return obj
  }
}
console.log(geturl(url))

3.以下内容输出的结果是什么?

for (vari = 1; i <= 3; i++) {
     
  setTimeout(function () {
     
    console.log(i)
  }, 0)
}
// 输出 4 4 4 因为settiomeout是异步的所以是for循环先执行。
// 如何让上述代码输出 1 2 3呢?
for (var i = 1; i <= 3; i++) {
     
  setTimeout(
    ((function (a) {
     
      console.log(a)
    })(i),
    0)
  )
}
// 只需要让setTimeout里面的函数变成 自执行,或者立即执行函数,然后就可以输出结果 1 2 3 了。 或者改成let 。
// 只有一个作用:创建一个独立的作用域。
//立即执行函数的作用:这个作用域里面的变量,外面访问不到(即避免「变量污染」)

4. 前端查询 UA 信息的方式

  1. navigator.userAgent 可以查询 UA 信息

5. 什么是闭包?闭包的优缺点?

  1. 闭包是一种现象,现象的表现是,当一个存在于另一个函数内部的函数可以访问其外部函数的变量的这种现象被称为闭包。在本质上,闭包就是将函数内部和函数外部连接起来的一座桥梁。
  2. 闭包的优点是,局部变量不会污染全局变量,在全局情况下可以访问其函数内部的变量。可以让变量私有化。
  3. 缺点是,因为形成闭包之后,外部函数中的变量会被内部函数所绑定,所以在函数执行完毕之后,其外部函数内部的作用域不会被销毁,所以变量会一直存在会造成内存泄露的问题。还有影响其系统性能的问题。

6. 什么是原型,原型链?

  1. 每个函数中都存在一个 prototype(原型)这个属性,这个属性是一个指针,指向了一个对象,这个对象拥有所有的原型对象的方法,这个原型对象就是用来给所有的实例共享属性跟方法的。每个实例内部都又存在着一个指向该原型对象的指针(proto),我们可以在实例上调用这个指针来查找到与之对应的原型对象。在其每一个原型对象上又拥有一个 constructor 属性,这个属性值指向这个原型对象的所与之关联的构造函数。每个实例中的 prototype 都指向这个构造函数的原型对象。
  2. proto 与 prototype 的区别?在每一个函数对象里面都拥有着一个函数指针,在实例上找不到 prototype 这个函数指针在标准浏览器之中有着proto指针,这个指针也是指向这个实例的与之相关构造函数的原型对象。也能够找到与之对象的该函数的原型。
  3. 什么是原型链?? 原型链顾名思义是一个链条,因为刚才说过每一个函数中都存在有一个 prototype 属性,这个属性指向与之对应的原型对象,当然原型对象上他也有这个 prototype 属性,他会指向他原型对象的原型对象,当自身实例在自己身上找不到属性的时候,他就会一级一级向自身的原型上去寻找直到找到 object 这个原型对象为止,如果找不到才会停止寻找,这个 object 对象是所有的函数的根原型,一般系统内置的函数中的方法都存在于改对象之中。
  4. 原型、构造函数、于实例的关系?
    他们三者的关系可以这样理解,原型中存在一个 constructor 这个属性指向与他相关的构造函数,构造函数中又存在一个 prototype 属性指向该原型的原型对象,在实例中并不存在 prototype 这个属性只有 proto 这个指针,他跟 prototype 同理,也指向改实例的原型对象。所以三者的关系是实例跟构造函数的指向原型对象。

7. 什么是作用域,作用域链?

  1. 作用域就是指代码执行的时候所处在的环境,而全局执行环境就是指全局作用域,函数执行的环境就被成为局部作用域,他们都在栈内存中开辟新的空间。
  2. 执行环境决定了处在环境中的函数变量是否有权限访问其他的数据,每一个环境都有一个与之相关的变量对象,环境中的定义的变量跟函数都保存在这个对象中。
  3. 全局执行的环境是处在最外部的一个执行环境,根据 ES 实现所处的环境不同,表示执行环境的对象不同:可以有两个对象,在 web 浏览器中,全局环境是指 window 对象,因为所有的全局变量跟函数都是为了 window 所准备的。在 node 环境中,全局环境是指 global 对象。
  4. 在某个环境中,函数执行完毕之后,他所在的环境跟变量会被销毁,但是全局环境的作用域跟变量只会在你关闭页面或者浏览器的时候才会被销毁。所以在 js 中有四个概念:
    私有作用域–>在函数执行的时候形成的一个私有环境,就叫私有作用域。
    全局作用域–>在一个浏览器或者页面一打开的时候就形成的环境,就被成为全局作用域。
    私有变量–>在函数中形成或者定义的变量就是私有变量。
    全局变量–>处在全局作用域或者环境中的变量被成为全局变量。
  5. 什么是作用域链?
    在代码所执行的环境中会给创建变量的对象创造一个作用域链。
    作用域链的前端就是指当前执行代码所处的环境对象。
    作用域的下一级就是来自于改作用域对象的外部环境的下一个对象。一只到最终全局的环境对象。
    作用域链的顶端就是全局作用域环境对象。
    内部环境的变量可以访问其外部环境的变量,反之则不可以。在一个函数访问变量的过程中,首先会在自身查找这个变量,如果自身差找不到则会按照作用域链查找上一级的环境对象。一层层向上寻找直到找到作用域的顶端,全局作用域对象,这种变量寻找机制也就被称为作用域链。
    这样也就说明了为什么在访问变量的时候局部变量的执行速度会被全局变量的执行速度要快的原因。

8. vue 的生命周期?


vue 的生命周期一共有八种状态,创建前/后、载入前/后、更新前/后、销毁前/后。

  1. beforeCreate(创建前)

  在实例完全被创建出来之前,当前只有 watch 对象,el 跟 data 都没有挂载完毕的时候,触发的钩子。

  1. Created(创建后)

  这个时候,实例已经被创建了出来,这时候如果想要触发 method 的函数以及获取到请求数据进行修改数据的时候可以在这个钩子里面进行,这个时候 data 数据已经更新$el 属性目前还没有被挂载。

  1. beforeMount(挂载前)

  在这个阶段 el 以及 data 元素都已经完全准备完毕,虚拟 dom 也准备完毕,但是还没有渲染到页面之中,所以页面中的元素还没有进行更改此时。此时可以拿到 vm.$el,但是是没有更新的旧模板。

  1. Mounted(挂载后)

  这个阶段是实例以及虚拟 dom 都被挂载完毕的阶段,data 以及 el 中的东西都已经被更新渲染到页面上了,也就是用户看到的页面,在这个函数执行完毕之后就代表整个初始渲染都加载完毕了,在这个函数是实例创建期间最后一个生命周期函数。如果想要在这个期间获取到 dom 元素的话,在上面的钩子函数中可以加 vm.$nextTick()函数表示 dom 渲染完毕之后的回调 ,这个回调函数也是发生在 mounted 挂载后前所调用的回调函数。

  1. beforeUpdate(更新前)

msp; 这个期间的钩子表示,数据发生改变的但是 dom 元素还没有改变的期间,这个期间 data 已经被改变了,但是 dom 元素还没有被更新。

  1. Update(更新后)

  这个顾名思义就是发生在虚拟 dom 已经替换掉页面中元素后执行的钩子,表明虚拟 dom 以及数据都已经更新完毕。

  1. beforedestroy(销毁前)

  这个表明在实例销毁前仍然可以使用整个 vue 实例对象,在这个阶段可以销毁定时器等一些操作在销毁后前想要做的最终操作。

  1. destroy(销毁后)

  组件以及整个实例被销毁后触发,这时整个 vue 生命周期结束,vue 实例解除对 dom 的观察以及对数据的绑定,这时候改变数据跟 dom 都没有效果,但是被最终操作后的 dom 结构树依旧存在在页面中。

9. window 常见的三个弹窗的类型以及他们的作用?

  1. alert()弹出一个带有确定按钮的确定框。
  2. comfirm()弹出一个带有确定以及取消按钮的弹出框。
  3. prompt() 弹出一个带有输入框的弹出窗口。

10. $.ajax 请求中常用的一些参数以及参数作用?

  1. data: 请求的数据。
  2. datatype : 期望的服务器返回的数据类型。
  3. type : 请求类型。
  4. contentType : 发送数据的数据类型。
  5. success : 成功的回调。
  6. erro : 失败的回调。
  7. url : 请求的地址。
  8. async : 请求的方式是否是异步。

11. 前置守卫,路由独享守卫,组件内守卫的以及生命周期函数的执行顺序有啥区别?(或者守卫导航解析流程)

  1. 导航被触发。
  2. 在失活的组件里面调用 beforeRouteleave 守卫。(也就相当于是,在一个路由中离开去另一个路由前,调用离开前守卫的那个组件离开守卫)。
  3. 调用全局的 beforeEach 守卫。
  4. 之后调用重用组件的 beforeUpdate 守卫。ps:也就是调用完全局守卫之后,如果存在组件 beforeUpdate 守卫就会首先调用这个守卫。
  5. 之后调用路由独享守卫 beforeEnter。
  6. 之后解析异步路由组件。
  7. 解析完成之后,如果存在组件内守卫,这时才会调用第一个 beforeRouteEnter 守卫。
  8. 调用全局的 beforeResolve 守卫(又称:解析守卫)。ps:他的作用类似于 beforeEach 全局守卫,区别是它是发生在导航被确认之前的,这个是发生在异步路由以及组件守卫都已经被解析确认完毕之后才会触发。
  9. 导航被确认。
  10. 调用全局的 afterEach 钩子。
  11. 触发 Dom 更新。
  12. 调用组件 beforeRouteEnter 守卫中传给 next 的回调函数,创建好的组件实例会作为回调函数的参数传入进去。

追问: 如果加上生命周期,他们与守卫之间的执行顺序是什么样的?

首先:如果是存在上个 url 跳转到另一个 url 的情况,前面会先触发 beforeRouteLeave 守卫。

  1. 导航前置守卫: beforeEach
  2. 如果存在组件复用会先触发组件 beforeUpdate 守卫。
  3. 路由独享守卫:befroeEnter
  4. 组件内部守卫: beforeRouteEnter
  5. 导航解析守卫: beforeResolve
  6. 导航后置守卫: afterEach
  7. 组件钩子: beforeCreate
  8. 组件钩子: created
  9. 组件钩子: beforeMount
  10. deactivated: 离开缓存组件 a,或者触发 a 的 beforeDestroy 和 destroyed 组件销毁钩子。
  11. 组件钩子: mounted 访问跟操作 DOM
  12. 执行 beforeRouteEnter 回调的函数 next()。

12. computed 支持异步,watch 不支持异步。mutition 与 action 区别 也是一个不支持异步 一个支持异步。


13. OSI 模型有那些层? TCP/UDP/HTTP 分别在那些层?

自底向上有:
物理层······· 二进制在物理媒体上传输数据 (ISO2110、IEEE802、IEEE802.2)
数据链路层······· 传输有地址的帧跟错误检测(SLIP、CSLP、PPP、ARP、RARP、MTU)
网络层······· 为数据包选择路由(IP、ICMP、RIP、OSPF、BGP、IGMP)
传输层······· 提供端对端的接口(TCP、UDP)
会话层······· 解除或建立与别的节点的联系(没有协议)
表示层······· 数据格式化,代码转换,数据加密(没有协议)
应用层·······文件传输、电子邮件、文件服务、虚拟终端(TFTP、HTTP、SNMP、FTP、SMTP、DNS、Telhet)


14. 正向代理,与反向代理的区别?


15. 深拷贝与浅拷贝的区别,如何实现深拷贝与浅拷贝?

浅拷贝与深拷贝都是对于引用类型来说的,浅拷贝就是复制对象的引用,浅拷贝如果改变了复制对象的值,那么其源对象的值也会发生改变。,深拷贝就是对象的彻底拷贝,不值拷贝你用类型,也复制了值。只要进行深拷贝就是代表两个对象之间没有了联系。


深拷贝,递归的拷贝:
function deepClone(source) {
     
  const targetObj = source.constructor === Array ? [] : {
     } // 判断复制的目标是数组还是对象
  for (let keys in source) {
     
    // 遍历目标
    if (source.hasOwnProperty(keys)) {
     
      //如果是继承的属性 就返回false 就相当于判断这个属性keys属不属于自身
      if (source[keys] && typeof source[keys] === 'object') {
     
        // 如果值是对象,就递归一下
        targetObj[keys] = source[keys].constructor === Array ? [] : {
     }
        targetObj[keys] = deepClone(source[keys])
      } else {
     
        // 如果不是,就直接赋值
        targetObj[keys] = source[keys]
      }
    }
  }
  return targetObj
}

简单的深克隆 JSON 方式:
let Newtarget = JSON.parser(JSON.stringify(target))
// 这种是简单的深拷贝 但是不能拷贝,function 跟 undefined 类型的值。

16. 用 json 深拷贝有什么问题

json 进行深拷贝,不能拷贝 function,跟 undefined。


17. promise

  1. 主要用于异步计算
  2. 可以将异步操作队列化,按照期望的顺序执行,返回符合预期的结果
  3. 可以在对象之间传递和操作 promise,帮助我们处理队列

18. 内存泄漏

1. 什么是内存泄漏?

  1. 内存泄漏是指程序中分配的内存由于某种原因没有释放成功或者无法释放,导致程序的运行速度减慢等造成严重的卡死效果,内存泄漏是很常见的现象。

2. 内存泄漏的原因

  1. 一种是闭包造成的内存泄漏,其内部变量如果访问外部函数的变量,就会导致闭包的产生,会导致该变量在引用上一直是 1,会导致永远无法被垃圾回收,垃圾回收的机制是:标记计数法,跟引用计数法,在浏览器中一般是使用引用计数法。
  2. 意料之外的全局变量, 比如在非严格模式下在函数中不进行 var 变量,直接写一个变量名赋值,那么该变量就会被变量声明,也会造成内存泄露的问题。
  3. 脱离 DOM 的引用,同样如果 dom 元素存在树这种,另一个在字典中。将来你决定删除这些行的时候,需要把两个引用都同时清除。

19. 查看页面中内存泄漏的方法

1、使用工具 Heap Profiling
①、Heap Profiling 可以记录当前的堆内存(heap)的快照,并生成对象的描述文件,该描述文件给出了当时 JS 运行所用的所有对象,以及这些对象所占用的内存大小、引用的层级关系等等。

②、JS 运行的时候,会有栈内存(stack)和堆内存(heap),当我们 new 一个类的时候,这个 new 出来的对象就保存在 heap 里,而这个对象的引用则存储在 stack 里。程序通过 stack 的引用找到这个对象。例如:var a = [1,2,3],a 是存储在 stack 中的引用,heap 里存储着内容为[1,2,3]的 Array 对象。

③、打开调试工具,点击 Memory 中的 Profiles 标签,选中“Take Heap Snapshot”,点击“start”按钮,就可以拍在当前 JS 的 heap 快照了。
将上图框框切换到 comparison(对照)选项,该视图列出了当前视图与上一个视图的对象差异

New:新建了多少对象
Deleted:回收了多少对象
Delta:新建的对象个数减去回收的对象个数
重点看 closure(闭包),如果#Delta 为正数,则表示创建了闭包函数,如果多个快照中都没有变负数,则表示没有销毁闭包


20. react 生命周期


21. react 销毁的钩子函数有哪些?


22. 性能优化 react


23. react 减少请求次数,实现方式?


24. react 组件传参


25. 解决浏览器缓存

因为浏览器存在缓存机制,而且浏览器的缓存机制是为了防止用户想服务器多次发送相同的请求,机制原理是,当浏览器在第一次访问网站之后会生成一份缓存文件,如果下次访问的时候,文件的路径跟缓存中路径存在重复的情况他就不会重复想服务器发送请求,会从缓存中读取请求。这种机制有优缺点,优点:可以减轻服务器压力 ,提升下次打开网站的时候用户体验。缺点:比如在做验证码功能的时候你需要穿一个参数不停的去改变路径才可以使验证码每次点击都会被刷新。或者在引用 js
等 css 脚本的时候。添加一个版本号。


26. 前端做后台管理遇到问题?

  1. 配置权限的配置问题。
  2. 配置跨域代理,解决遇到跨域请求的问题。

27. vue 和 jquery 区别

  1. vue 是一个框架,jq 是一个类库。
  2. vue 是数据驱动,jq 一般要操作 dom 元素
  3. vue 能使前端项目变得更工程化,具有跨平台的特性。

28. 单页面应用

  1. 单页面应用就是只有一个总的 html 文件,在页面加载的时候只会向服务器发送一次请求。
  2. 单页面应用的特点,通过把整个项目进行模块化拆分,把一个个的模块中所包含的 js,css 跟 html 一起拆分成小模块进行开发,利于项目的维护,跟模块的重新利用,可以减轻代码负担优化项目流程。
  3. 拆分后加载次数比较少,而且通过路由进行跳转的时候性能比较高,不会重复的向服务器端多次发送请求。减轻服务器的压力。

29. 前端插件有哪些?

  1. cookie.js
  2. axios.js
  3. lodashi
  4. swiper
  5. jquey
  6. npm
  7. webpack
  8. gulp
  9. git
  10. sass
  11. less
  12. prerrtic
  13. eslint
  14. bable

30. 数组采用的方法

1. Array.from //把伪数组变成真数组
2. Set() //去除重复数组
3. forEach //数组循环
4. map // 也是遍历,只不过是有返回值
5. filter //数组过滤 return 过滤条件 返回值也是一个数组
6. every // 当所有的元素都满足条件的时候返回一个true 在每次判断的时候都是返回一个布尔值,也是也是一个判断性数组
7. some // 当循环遍历的时候 有一个 为true 直接返回数组
8. indexof //寻找 数组中存在的元素的下标 如果存在返回一 否则返回 -1
9. sort //数组的排序方法 a-b是升序  b-a 是降序 返回值为负数放在前面 正数放在后面 引出冒泡排序的原理
10.

31. 普通函数箭头函数

  1. 普通函数有 this 指向,在非严格模式下。
  2. 箭头函数在任何情况下没有 this 指向。

32. 正则把字符串中的空格替换?


33. for each for of


34. 手动写倒计时


35. 动态引入 js 文件


36. 前端缓存机制?


37. computed watch


37. 手动封装一个 promiseAll 方法

// 定义一个 promise函数
function promiseAll(promises) {
     
  // 在这里直接return 一个promise对象 是为了执行 里面promise函数的
  return new Promise((resolve, reject) => {
     
    // 把两个promise数组对象扔进去 在这里设定一个计时器 来计算promise函数 执行了几个了
    let resultCount = 0
    //这里严格意义要用new array来创建一个 有多少个参数长度的空数组 在后面放值的时候要使用
    let result = new Array(promises.length)
    // new一个空数组是为了 把传进来的promise函数的结果 放在数组中 最后用promise函数 resolve参数接受到 并在最后then出去
    // let result = [];
    for (let i = 0; i < promises.length; i++) {
     
      //循环所有的promise 如果.then执行了 就代表 这个promise对象执行了 用计数器进行计数 并把结果返回到一个新的数组中
      //这里用 对应执行的 promise函数都有着对应的返回值 把他存到数组中
      promises[i].then((res) => {
     
        resultCount++
        // result.push(res);
        // 这里用result[i]来接受 返回值是为了
        result[i] = res
        //这里判断 计数器执行的次数是否跟传进的参数相等,如果相等 就表示 所有的promise执行完毕了 就可以吧结果反悔了
        if (resultCount === promises.length) {
     
          return resolve(result)
        }
        //这里是错误的捕捉 如果发生错误 就返回错误信息
      }),
        (error) => {
     
          reject(error)
        }
    }
  })
}

//测试 测试 测试
let p2 = new Promise((resolve) => resolve('p2'))
let p1 = new Promise((resolve) => resolve('p1'))
// let p3 = Promise.reject('p3 error')

promiseAll([p2, p1])
  .then((results) => {
     
    console.log(results) // ['p1', 'p2']
  })
  .catch((error) => {
     
    console.log(error)
  })

/* promiseAll([p1, p2, p3]).then(results => {
        console.log(results)
        }).catch(error => {
        console.log(error) // 'p3 error'
        }) */

38. 如何把伪数组变成真数组?

arr.form() 把伪数组变成真数组。


39. 怎么取到数组的最小值?

sort 排序 a-b 取第一位 。升序是 b-a 取最后一位


40.JavaScript 是一个弱类型语言他的特点?

优点:弱类型使用简单,更灵活多变。
缺点:在代码的上线稳重,可能会进行隐式类型转换,会稍微损耗性能,可能不符合程序的本意。


41. 如何把伪数组变成真数组?

arr.from() 把伪数组变成真数组并进行浅拷贝类的实例。


42. C++跟 js 有什么区别?

  1. C++是静态语言,js 是动态语言。
  2. C++是编译型语言,js 是解释型语言。
  3. C++有指针,js 无指针。
  4. js 是函数式编程语言,C++不是
  5. C++的继承是基于类的,js 的继承基于原型
  6. js 的一个重要特性是闭包(当前作用域可以访问并保存外部作用域的变量)
  7. js 可以显示的设置上下文

43. 事件传播流程,传播流程的那几个阶段?

• 捕获阶段:事件对象从目标的祖先节点 Window 开始传播直至目标。
• 目标阶段:事件对象传递到事件目标。如果事件的 type 属性表明后面不会进行冒泡操作,那么事件到此就结束了。
• 冒泡阶段:事件对象以一个相反的方向进行传递,从目标开始,到 Window 对象结束。


44. jquery 的事件都有什么,然后 onclick 跟 addeventlistener 的区别?


45. 数组随机取一个数。


46. 取随机十个不重复的数。


47. 什么是二分法?


48. display 的常见属性值?


49. display:none 跟 visbaty:hidden 的区别?


50. css 如何写一个半圆形?


51. 如何让背景图铺满整个屏幕?


52. 如何实现一个元素的旋转?


53. 常见的浏览器内核?


54. css 权重选择器的规则?


55. 图片圆角,border 0 跟 border:none 的区别?


56. es6 的新增语法?


57. 箭头函数,跟普通函数的区别?


58. 图片懒加载


59. 鼠标一上去有一个提示效果?


60. 加载完成之后会触发那个事件?资源文件加载完成之后触发的事件?


61. Set 对象去重,如何实现一个冒泡排序?


62. MVC,跟 MVVM 的区别?


63. http 跟 https 的区别?


64. js 进行编码的方法?


65. 如果有一个非常长的字符串,怎么过滤出某些字符串?


66. 删除对象属性?

使用 delete 删除对象属性。


67. localstroge 跟 seesion 跟 cookie 的区别?


68. Es6 怎么实现继承?promise 有何特点?


69. 预编译五个步骤?Es6 导入导出跟 Es5 导入导出不同?


70. 如何实现圣杯布局,跟双飞翼布局?


71. target 跟 current target 区别?


72. 怎么实现,实时获取服务端实现的数据?

  1. 轮询
  2. 服务器实现 socket 连接,通过控制台使用命令更新数据。
  3. 通过数据库服务器的 trigger 机制。得到变化的数据。然后定制检查数据库,看数据是否有变化。

73. 怎么判断两个对象属性跟属性值相等让他两个相等?

  1. 通过 json.stringify 转换成字符串然后在判断两个字符串是否相等。

74. 设计模式有哪些?以及他们的作用。


75. 常见的排序方式?以及排序算法?


76. 什么是 SEO 优化?

全称:Search English Optimization,搜索引擎优化。自从有了搜索引擎,SEO 便诞生了。

存在的意义:为了提升网页在搜索引擎自然搜索结果中的收录数量以及排序位置而做的优化行为。简言之,就是希望百度等搜索引擎能多多我们收录精心制作后的网站,并且在别人访问时网站能排在前面。

分类:白帽 SEO 和黑帽 SEO。白帽 SEO,起到了改良和规范网站设计的作用,使网站对搜索引擎和用户更加友好,并且网站也能从搜索引擎中获取合理的流量,这是搜索引擎鼓励和支持的。黑帽 SEO,利用和放大搜索引擎政策缺陷来获取更多用户的访问量,这类行为大多是欺骗搜索引擎,一般搜索引擎公司是不支持与鼓励的。本文针对白帽 SEO,那么白帽 SEO 能做什么呢?

  1. 对网站的标题、关键字、描述精心设置,反映网站的定位,让搜索引擎明白网站是做什么的;

  2. 网站内容优化:内容与关键字的对应,增加关键字的密度;

  3. 在网站上合理设置 Robot.txt 文件;

  4. 生成针对搜索引擎友好的网站地图;

  5. 增加外部链接,到各个网站上宣传;

通过网站的结构布局设计和网页代码优化,使前端页面既能让浏览器用户能够看懂,也能让“蜘蛛”看懂。

(1) 网站结构布局优化:尽量简单、开门见山,提倡扁平化结构。

一般而言,建立的网站结构层次越少,越容易被“蜘蛛”抓取,也就容易被收录。一般中小型网站目录结构超过三级,“蜘蛛”便不愿意往下爬,“万一天黑迷路了怎么办”。并且根据相关调查:访客如果经过跳转 3 次还没找到需要的信息,很可能离开。因此,三层目录结构也是体验的需要。为此我们需要做到:

  1. 控制首页链接数量

网站首页是权重最高的地方,如果首页链接太少,没有“桥”,“蜘蛛”不能继续往下爬到内页,直接影响网站收录数量。但是首页链接也不能太多,一旦太多,没有实质性的链接,很容易影响用户体验,也会降低网站首页的权重,收录效果也不好。

因此对于中小型企业网站,建议首页链接在 100 个以内,链接的性质可以包含页面导航、底部导航、锚文字链接等等,注意链接要建立在用户的良好体验和引导用户获取信息的基础之上。

2.扁平化的目录层次,尽量让“蜘蛛”只要跳转 3 次,就能到达网站内的任何一个内页。扁平化的目录结构,比如:“植物”–> “水果” –> “苹果”、“桔子”、“香蕉”,通过 3 级就能找到香蕉了。

3.导航优化

导航应该尽量采用文字方式,也可以搭配图片导航,但是图片代码一定要进行优化,

其次,在每一个网页上应该加上面包屑导航,好处:从用户体验方面来说,可以让用户了解当前所处的位置以及当前页面在整个网站中的位置,帮助用户很快了解网站组织形式,从而形成更好的位置感,同时提供了返回各个页面的接口,方便用户操作;对“蜘蛛”而言,能够清楚的了解网站结构,同时还增加了大量的内部链接,方便抓取,降低跳出率。

  1. 网站的结构布局–不可忽略的细节

1)页面头部:logo 及主导航,以及用户的信息。

2)页面主体:左边正文,包括面包屑导航及正文;右边放热门文章及相关文章,好处:留住访客,让访客多停留,对“蜘蛛”而言,这些文章属于相关链接,增强了页面相关性,也能增强页面的权重。

3)页面底部:版权信息和友情链接。

特别注意:分页导航写法,推荐写法:“首页 1 2 3 4 5 6 7 8 9 下拉框”,这样“蜘蛛”能够根据相应页码直接跳转,下拉框直接选择页面跳转。而下面的写法是不推荐的,“首页 下一页 尾页”,特别是当分页数量特别多时,“蜘蛛”需要经过很多次往下爬,才能抓取,会很累、会容易放弃。

5.控制页面的大小,减少 http 请求,提高网站的加载速度。

一个页面最好不要超过 100k,太大,页面加载速度慢。当速度很慢时,用户体验不好,留不住访客,并且一旦超时,“蜘蛛”也会离开。

(2) 网页代码优化

1.标题:只强调重点即可,尽量把重要的关键词放在前面,关键词不要重复出现,尽量做到每个页面的标题中不要设置相同的内容。</p> <p>2.标签:关键词,列举出几个页面的重要关键字即可,切记过分堆砌。</p> <p>3.标签:网页描述,需要高度概括网页内容,切记不能太长,过分堆砌关键词,每个页面也要有所不同。</p> <p>4.中的标签:尽量让代码语义化,在适当的位置使用适当的标签,用正确的标签做正确的事。让阅读源码者和“蜘蛛”都一目了然。比如:h1-h6 是用于标题类的,</p> <nav> 标签是用来设置页面主导航的等。 </nav> <p></p> <p>5.标签:页内链接,要加“title” 属性加以说明,让访客和 “蜘蛛” 知道。而外部链接,链接到其他网站的,则需要加上 el="nofollow"属性, 告诉 “蜘蛛” 不要爬,因为一旦“蜘蛛”爬了外部链接之后,就不会再回来了。</p> <p>6.正文标题要用</p> <h1>标签:“蜘蛛” 认为它最重要,若不喜欢</h1> <h1>的默认样式可以通过 CSS 设置。尽量做到正文标题用</h1> <h1>标签,副标题用</h1> <h2>标签, 而其它地方不应该随便乱用 h 标题标签。</h2> <p></p> <p>7.<br>标签:只用于文本内容的换行,比如:</p> <p>    第一行文字内容<br> 第二行文字内容<br> 第三行文字内容 </p> 8.表格应该使用表格标题标签 <p>9.应使用 “alt” 属性加以说明</p> <p>10.<strong>、<em>标签 : 需要强调时使用。<strong>标签在搜索引擎中能够得到高度的重视,它能突出关键词,表现重要的内容,<em>标签强调效果仅次于<strong>标签。</strong></em></strong></em></strong></p> <p><b>、<i>标签: 只是用于显示效果时使用,在 SEO 中不会起任何效果。</i></b></p> <p>11、文本缩进不要使用特殊符号  应当使用 CSS 进行设置。版权符号不要使用特殊符号 © 可以直接使用输入法,拼“banquan”,选择序号 5 就能打出版权符号 ©。</p> <p>12、巧妙利用 CSS 布局,将重要内容的 HTML 代码放在最前面,最前面的内容被认为是最重要的,优先让“蜘蛛”读取,进行内容关键词抓取。</p> <p>13.重要内容不要用 JS 输出,因为“蜘蛛”不认识</p> <p>14.尽量少使用 iframe 框架,因为“蜘蛛”一般不会读取其中的内容</p> <p>15.谨慎使用 display:none :对于不想显示的文字内容,应当设置 z-index 或设置到浏览器显示器之外。因为搜索引擎会过滤掉 display:none 其中的内容。</p> <ol start="16"> <li>不断精简代码</li> </ol> <p>17.js 代码如果是操作 DOM 操作,应尽量放在 body 结束标签之前,html 代码之后。</p> <hr> <h3>77. vue 中的 KEY 以及为何不用索引当 KEY。</h3> <hr> <h3>78.嵌套组件的生命周期执行顺序是如何的?</h3> <p>先执行父组件 beforecreate 在执行 created 之后执行 子组件的 beforecreate 一直到 mounted 之后再执行父组件的 beforemount 跟 mounted。</p> <hr> </div> </div> </div> </div> </div> <!--PC和WAP自适应版--> <div id="SOHUCS" sid="1395156443212075008"></div> <script type="text/javascript" src="/views/front/js/chanyan.js"></script> <!-- 文章页-底部 动态广告位 --> <div class="youdao-fixed-ad" id="detail_ad_bottom"></div> </div> <div class="col-md-3"> <div class="row" id="ad"> <!-- 文章页-右侧1 动态广告位 --> <div id="right-1" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_1"> </div> </div> <!-- 文章页-右侧2 动态广告位 --> <div id="right-2" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_2"></div> </div> <!-- 文章页-右侧3 动态广告位 --> <div id="right-3" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_3"></div> </div> </div> </div> </div> </div> </div> <div class="container"> <h4 class="pt20 mb15 mt0 border-top">你可能感兴趣的:(前端面试,html,html5,vue.js,css3,jquery)</h4> <div id="paradigm-article-related"> <div class="recommend-post mb30"> <ul class="widget-links"> <li><a href="/article/1901725639656927232.htm" title="elementui 组件基本颜色的修改" target="_blank">elementui 组件基本颜色的修改</a> <span class="text-muted">怡宝丶加冰</span> <a class="tag" taget="_blank" href="/search/vue%2Belementui/1.htm">vue+elementui</a><a class="tag" taget="_blank" href="/search/elementui/1.htm">elementui</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a> <div>再用elementui中的组件时根据项目的不同主题色也不一样,这里是对一些常用组件基础颜色的修改,可以直接用,根据主题色的不同直接替换--theme_color变量的值就行创建一个css文件/*全局样式*/html,body{--theme_color:#0C871B;}/*primary按钮样式*/.el-button--primary{background-color:var(--theme_</div> </li> <li><a href="/article/1901725638444773376.htm" title="dhtmlxGantt 甘特图 一行展示多条数据" target="_blank">dhtmlxGantt 甘特图 一行展示多条数据</a> <span class="text-muted">怡宝丶加冰</span> <a class="tag" taget="_blank" href="/search/%E7%94%98%E7%89%B9%E5%9B%BE/1.htm">甘特图</a> <div>效果如图:后台拿到数据处理之后如图:含义:如上图所示,如果一行需要展示多个需要给父数据的那条添加render:split属性,子数据的parent为父数据的Id即可切记父数据的id别为0为0时会出现错乱因为有些小伙伴提出分段展示的数据结构还是有点问题,下面展示一个完整的demoimport{gantt}from'dhtmlx-gantt';import"dhtmlx-gantt/codebase/</div> </li> <li><a href="/article/1901723873397764096.htm" title="CI持续集成环境搭建(2)--docker的安装与配置" target="_blank">CI持续集成环境搭建(2)--docker的安装与配置</a> <span class="text-muted">小辣椒1213</span> <a class="tag" taget="_blank" href="/search/CI/1.htm">CI</a><a class="tag" taget="_blank" href="/search/docker/1.htm">docker</a> <div>1.安装dockerhttps://www.runoob.com/docker/centos-docker-install.html1)设置yum源cd/etc/yum.repos.d/wgethttp://mirrors.aliyun.com/repo/Centos-7.repowgethttp://mirrors.aliyun.com/repo/epel-7.repoyum-yinstalle</div> </li> <li><a href="/article/1901723618577018880.htm" title="css3-学习" target="_blank">css3-学习</a> <span class="text-muted">江西谢霆锋</span> <a class="tag" taget="_blank" href="/search/css3/1.htm">css3</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>css特性选择器基础选择器标签选择器ID选择器类选择器CSS的优先级是什么?!important>内联样式(style=“”)>ID选择器>类选择器=属性选择器=伪类>标签选择器=伪元素选择器。层级选择器foobar后代选择器,元素的后代元素foo>bar子代选择器,元素的子代元素foo+bar相邻同胞选择器foo~bar通用同胞选择器foo,bar并集选择器foo.class交集选择器条件选择器</div> </li> <li><a href="/article/1901713150269517824.htm" title="Angular 17与PrimeNG复选框图标定制" target="_blank">Angular 17与PrimeNG复选框图标定制</a> <span class="text-muted">t0_54program</span> <a class="tag" taget="_blank" href="/search/%E7%BC%96%E7%A8%8B%E9%97%AE%E9%A2%98%E8%A7%A3%E5%86%B3%E6%89%8B%E5%86%8C/1.htm">编程问题解决手册</a><a class="tag" taget="_blank" href="/search/angular.js/1.htm">angular.js</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E4%B8%AA%E4%BA%BA%E5%BC%80%E5%8F%91/1.htm">个人开发</a> <div>在Angular和PrimeNG的开发过程中,经常需要对UI组件进行细致的定制以满足特定的设计需求。本文将详细介绍如何在不更改HTML模板的情况下,通过全局CSS文件来修改PrimeNG复选框的默认勾选图标。背景介绍随着Angular从15版本升级到17版本,很多开发者也需要更新其依赖库,包括PrimeNG。由于PrimeNG的更新,组件的样式和行为可能会发生变化,这就要求开发者了解如何适应这些变</div> </li> <li><a href="/article/1901691578431369216.htm" title="一篇文章让你实现前端JS 、 Golang 、 Python如何接入DeepSeek大模型实现自己的AI" target="_blank">一篇文章让你实现前端JS 、 Golang 、 Python如何接入DeepSeek大模型实现自己的AI</a> <span class="text-muted">一只理智恩</span> <a class="tag" taget="_blank" href="/search/AI/1.htm">AI</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%90%8E%E7%AB%AF/1.htm">后端</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/golang/1.htm">golang</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a> <div>本文将通过三种技术栈实现与DeepSeek大模型的对话交互,提供可直接运行的代码示例及详细注释。一、通用准备步骤1.获取API密钥登录DeepSeek开发者平台创建应用获取DEEPSEEK_API_KEY2.创建测试环境#项目结构deepseek-demo/├──frontend/#前端代码│└──index.html├──go-backend/#Golang后端│└──main.go├──py-</div> </li> <li><a href="/article/1901690445268840448.htm" title="python+MySQL+HTML实现自习室座位管理系统" target="_blank">python+MySQL+HTML实现自习室座位管理系统</a> <span class="text-muted">IT小本本</span> <a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a> <div>自习室座位管理系统项目介绍自习室座位管理系统是一个基于PythonFlask框架开发的Web应用,旨在提供高效、便捷的自习室座位预约和管理功能。该系统适用于学校图书馆、自习室等场所,帮助管理员有效管理座位资源,同时为学生提供便捷的座位预约服务。功能特点1、用户认证模块用户注册:学生可以注册账号,填写个人信息用户登录:支持学生和管理员登录找回密码:通过邮箱验证重置密码2、座位管理模块座位预约:学生可</div> </li> <li><a href="/article/1901679221919510528.htm" title="从剪枝到知识蒸馏:深度学习模型压缩与加速的多重策略" target="_blank">从剪枝到知识蒸馏:深度学习模型压缩与加速的多重策略</a> <span class="text-muted">一键难忘</span> <a class="tag" taget="_blank" href="/search/%E5%89%AA%E6%9E%9D/1.htm">剪枝</a><a class="tag" taget="_blank" href="/search/%E6%B7%B1%E5%BA%A6%E5%AD%A6%E4%B9%A0/1.htm">深度学习</a><a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a><a class="tag" taget="_blank" href="/search/%E7%9F%A5%E8%AF%86%E8%92%B8%E9%A6%8F/1.htm">知识蒸馏</a> <div>本文收录于专栏:精通AI实战千例专栏合集https://blog.csdn.net/weixin_52908342/category_11863492.html从基础到实践,深入学习。无论你是初学者还是经验丰富的老手,对于本专栏案例和项目实践都有参考学习意义。每一个案例都附带关键代码,详细讲解供大家学习,希望可以帮到大家。正在不断更新中文章目录从剪枝到知识蒸馏:深度学习模型压缩与加速的多重策略1.</div> </li> <li><a href="/article/1901669391649533952.htm" title="【 <二> 丹方改良:Spring 时代的 JavaWeb】之 Spring Boot 的自动配置:约定优于配置的设计美学" target="_blank">【 <二> 丹方改良:Spring 时代的 JavaWeb】之 Spring Boot 的自动配置:约定优于配置的设计美学</a> <span class="text-muted">Foyo Designer</span> <a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/boot/1.htm">boot</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/HikariCP/1.htm">HikariCP</a><a class="tag" taget="_blank" href="/search/Logback/1.htm">Logback</a> <div>点击此处查看合集https://blog.csdn.net/foyodesigner/category_12907601.html?fromshare=blogcolumn&sharetype=blogcolumn&sharerId=12907601&sharerefer=PC&sharesource=FoyoDesigner&sharefrom=from_link一、SpringBoot的自动配</div> </li> <li><a href="/article/1901650477267873792.htm" title="利用github部署项目" target="_blank">利用github部署项目</a> <span class="text-muted">浪裡遊</span> <a class="tag" taget="_blank" href="/search/github/1.htm">github</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E6%8C%81%E7%BB%AD%E9%83%A8%E7%BD%B2/1.htm">持续部署</a> <div>挂载GitHubPages的方法基本步骤创建仓库:在GitHub上创建一个新的仓库。如果使用自定义域名,则仓库名应为.github.io;否则可以是任意名称。启用GitHubPages:进入仓库的设置页面,在“Pages”部分选择要发布的分支(通常是main或master),然后保存更改。上传网站内容:将你的HTML、CSS、JavaScript等文件上传到仓库中指定的分支。什么是SSHSSH是一</div> </li> <li><a href="/article/1901645931145654272.htm" title="NET Markdown 解析神器--Markdig" target="_blank">NET Markdown 解析神器--Markdig</a> <span class="text-muted">dotNET跨平台</span> <div>Markdig是一款快速、强大、符合CommonMark标准、可扩展的.NETMarkdown处理器。Markdig是一个为.NET平台设计的快速、强大且易于扩展的Markdown处理器,它完全符合CommonMark标准。这个库以其卓越的性能和丰富的功能集而著称,包括一个无需正则表达式的快速解析器和HTML渲染器,以及对垃圾回收压力的最小化。核心特性Markdig的一些显著特性包括:1.极速性能</div> </li> <li><a href="/article/1901642022083686400.htm" title="Flexmark-Java: 高性能Markdown解析器全面指南" target="_blank">Flexmark-Java: 高性能Markdown解析器全面指南</a> <span class="text-muted">乌想炳Todd</span> <div>Flexmark-Java:高性能Markdown解析器全面指南flexmark-javaCommonMark/MarkdownJavaparserwithsourcelevelAST.CommonMark0.28,emulationof:pegdown,kramdown,markdown.pl,MultiMarkdown.WithHTMLtoMD,MDtoPDF,MDtoDOCXconversi</div> </li> <li><a href="/article/1901626135737856000.htm" title="Pytorch Dataloader入门" target="_blank">Pytorch Dataloader入门</a> <span class="text-muted">gy-7</span> <a class="tag" taget="_blank" href="/search/pytorch/1.htm">pytorch</a><a class="tag" taget="_blank" href="/search/%E6%B7%B1%E5%BA%A6%E5%AD%A6%E4%B9%A0/1.htm">深度学习</a><a class="tag" taget="_blank" href="/search/%E6%9C%BA%E5%99%A8%E5%AD%A6%E4%B9%A0/1.htm">机器学习</a> <div>PytorchDataloadercode:torch/utils/data/dataloader.py#L71PytorchDatasettutorial:tutorials/beginner/basics/data_tutorial.html理论:在训练模型时,我们通常希望:以“mini-batch”方式传递样本,能够加速训练。每个epoch都shuffle数据,能够减少模型过拟合。使用Pyt</div> </li> <li><a href="/article/1901622982850179072.htm" title="Hystrix 实现限流\降级\熔断" target="_blank">Hystrix 实现限流\降级\熔断</a> <span class="text-muted">杏花春雨江南</span> <a class="tag" taget="_blank" href="/search/java%E5%BC%80%E5%8F%91%E9%82%A3%E4%BA%9B%E4%BA%8B%E5%84%BF/1.htm">java开发那些事儿</a><a class="tag" taget="_blank" href="/search/hystrix/1.htm">hystrix</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>Hystrix是一个强大的库,用于处理分布式系统中的延迟和容错问题。它提供了限流、降级和熔断等功能。下面是一个完整的Java示例,展示如何使用Hystrix实现限流、降级和熔断。1.添加依赖在pom.xml中添加Hystrix的依赖:xml复制com.netflix.hystrixhystrix-core1.5.18运行HTML2.创建Hystrix命令创建一个继承自HystrixCommand的</div> </li> <li><a href="/article/1901621469188780032.htm" title="element-ui简介、安装和使用代码" target="_blank">element-ui简介、安装和使用代码</a> <span class="text-muted">alankuo</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>一、Element-UI简介Element-UI是一套基于Vue.js的桌面端组件库,由饿了么前端团队开源。它提供了丰富的组件,如按钮、表单、表格、菜单、对话框等,这些组件具有统一的视觉风格和交互设计,能够帮助开发者快速构建美观、易用的Web应用程序。Element-UI的特点包括:丰富的组件库涵盖了Web应用开发中常见的各种组件需求,无论是简单的UI元素还是复杂的交互组件都能找到,大大减少了开发</div> </li> <li><a href="/article/1901610254777511936.htm" title="linux启动db2的命令窗口_linux下如何启动db2数据库命令窗口" target="_blank">linux启动db2的命令窗口_linux下如何启动db2数据库命令窗口</a> <span class="text-muted">少学汉</span> <a class="tag" taget="_blank" href="/search/linux%E5%90%AF%E5%8A%A8db2%E7%9A%84%E5%91%BD%E4%BB%A4%E7%AA%97%E5%8F%A3/1.htm">linux启动db2的命令窗口</a> <div>在Linuxx86上安装Oracle数据库10g(来自ORACLE网)原文出处:http://www.oracle.com/technology/global/cn/pub/articles/smiley_10gdb_install.htmlDBA:Linux在Linuxx86上安装Oracle数据库10g作者:JohnSmiley学习...文章wangccsy2006-01-16562浏览量带你</div> </li> <li><a href="/article/1901590963550220288.htm" title="Vue 路由 (vue-router) 详细总结" target="_blank">Vue 路由 (vue-router) 详细总结</a> <span class="text-muted">遇见~未来</span> <a class="tag" taget="_blank" href="/search/Vue.js/1.htm">Vue.js</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a> <div>一、传统web应用与单页面web应用1.1传统web应用传统web应用由多个HTML页面组成,页面切换时会重新加载整个页面,导致用户体验不够流畅,对服务器压力较大。1.2单页面web应用(SPA)单页面应用只有一个HTML页面,通过JavaScript动态更新页面内容,实现局部刷新,具有以下特点:用户体验好:响应性强,类似桌面应用的即时性。服务器压力小:服务器只需提供数据,不负责页面渲染。前后端分</div> </li> <li><a href="/article/1901552506404663296.htm" title="Animate.css" target="_blank">Animate.css</a> <span class="text-muted">小华0000</span> <a class="tag" taget="_blank" href="/search/Animate/1.htm">Animate</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E5%8A%A8%E7%94%BB/1.htm">动画</a> <div>这个库提供了多种预定义的动画效果,比如平移、缩放、旋转、淡入淡出等,开发者可以通过简单的类名直接在HTML元素上应用这些动画,而无需自己编写复杂的CSS动画代码。以下是对Animate.css的详细介绍:1.Animate.css简介Animate.css是一个基于CSS的动画库,主要特点包括:简单易用:只需在HTML元素中添加指定的类名即可使用动画。丰富的动画效果:包括入场、出场、注意效果等数十</div> </li> <li><a href="/article/1901547841558474752.htm" title="前端学习网站大全" target="_blank">前端学习网站大全</a> <span class="text-muted">洪布斯</span> <div>CSDN-专业IT技术社区:https://www.csdn.net/GitHub:https://github.com/jQuery插件库-收集最全最新最好的jQuery插件:http://www.jq22.com/Iconfont-阿里巴巴矢量图标库:https://www.iconfont.cn/菜鸟教程-学的不仅是技术,更是梦想!:https://www.runoob.com/Animat</div> </li> <li><a href="/article/1901546832757059584.htm" title="前端面试技巧与实践" target="_blank">前端面试技巧与实践</a> <span class="text-muted">北辰alk</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a><a class="tag" taget="_blank" href="/search/%E8%81%8C%E5%9C%BA%E5%92%8C%E5%8F%91%E5%B1%95/1.htm">职场和发展</a> <div>在当今快速发展的互联网行业中,前端开发已经成为了一个至关重要的角色。随着技术的不断进步和用户需求的日益复杂,前端工程师的职责不再仅仅是实现页面的布局和交互,而是需要具备全方位的技术能力和工程思维。根据2023年StackOverflow的开发者调查报告,前端开发仍然是全球最受欢迎的技术岗位之一,竞争也愈发激烈。在这样的背景下,前端面试成为了每个开发者职业生涯中的重要关卡。无论是初入职场的新人,还是</div> </li> <li><a href="/article/1901546580452896768.htm" title="2025前端面试题超全面解析(附答案与深度扩展)" target="_blank">2025前端面试题超全面解析(附答案与深度扩展)</a> <span class="text-muted">北辰alk</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>文章目录一、HTML篇(扩展版)1.**HTML5语义化标签的实际应用场景**2.**WebComponents实战:如何封装一个自定义按钮组件?**3.**WebWorker的用途与限制**二、CSS篇(扩展版)1.**CSS盒模型详解:border-boxvscontent-box**2.**CSS动画性能优化技巧**3.**CSS预处理器(Sass/Less)核心功能对比**三、JavaSc</div> </li> <li><a href="/article/1901543677889671168.htm" title="前端初学者,该如何开始学习?" target="_blank">前端初学者,该如何开始学习?</a> <span class="text-muted">四六的六</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/%E4%B8%AA%E4%BA%BA%E5%BC%80%E5%8F%91/1.htm">个人开发</a> <div>前端初学者,该如何开始学习?嗨,作为一个曾经的前端小白,现在也算是入门了,我特别理解刚开始学习前端时的迷茫,所以很愿意和你分享一下我的学习经验。刚开始的时候,得先搞清楚前端技术到底是啥。简单来说,前端就是咱们平常在浏览器里看到的网页那些东西。它主要由HTML、CSS和JavaScript三个部分组成。HTML(超文本标记语言):作为构建网页内容的基石,HTML以其独特的标签体系定义了网页的基本架构</div> </li> <li><a href="/article/1901542292498477056.htm" title="推荐开源项目:vue-strap —— Bootstrap与Vue.js的完美结合" target="_blank">推荐开源项目:vue-strap —— Bootstrap与Vue.js的完美结合</a> <span class="text-muted">殷巧或</span> <div>推荐开源项目:vue-strap——Bootstrap与Vue.js的完美结合去发现同类优质开源项目:https://gitcode.com/项目介绍虽然该项目已被废弃,但它的两个替代方案,bootstrap-vue和uiv,仍然是构建基于Vue.js应用时,实现Bootstrap组件的强大选择。vue-strap原本是一个用Vue.js实现的Bootstrap组件库,无需依赖jQuery或Boo</div> </li> <li><a href="/article/1901541284309430272.htm" title="HTTP常见的请求头有哪些?都有什么作用?在 Web 应用中使用这些请求头?" target="_blank">HTTP常见的请求头有哪些?都有什么作用?在 Web 应用中使用这些请求头?</a> <span class="text-muted">brrdg_sefg</span> <a class="tag" taget="_blank" href="/search/http/1.htm">http</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C%E5%8D%8F%E8%AE%AE/1.htm">网络协议</a> <div>HTTP请求头(RequestHeaders)用于在HTTP请求中携带额外的信息,帮助服务器更好地处理请求。以下是一些常见的HTTP请求头及其作用:常见请求头及其作用1.Accept作用:告知服务器客户端可以接受的内容类型。示例:Accept:text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8说明:客户端可以接受多种内容类</div> </li> <li><a href="/article/1901534852117753856.htm" title="前端初学者,有哪些适合的学习网站?" target="_blank">前端初学者,有哪些适合的学习网站?</a> <span class="text-muted">四六的六</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/%E4%B8%AA%E4%BA%BA%E5%BC%80%E5%8F%91/1.htm">个人开发</a> <div>对于前端初学者而言,选择合适的学习网站至关重要,以下是一些我知道的优质学习平台,在这里分享给大家:菜鸟教程:该网站以其简洁明了的界面设计和通俗易懂的教程内容而受到广大初学者的欢迎。其前端教程体系涵盖了前端开发的大量入门知识,包括HTML、CSS、JavaScript等基础技术,以及当前主流的前端框架和工具的使用方法,如Vue.js、React、Webpack等。教程内容的讲解方式深入浅出,注重从基</div> </li> <li><a href="/article/1901533214237847552.htm" title="【APM】Loki日志多行显示" target="_blank">【APM】Loki日志多行显示</a> <span class="text-muted">运维归一</span> <a class="tag" taget="_blank" href="/search/DevOps/1.htm">DevOps</a><a class="tag" taget="_blank" href="/search/APM/1.htm">APM</a><a class="tag" taget="_blank" href="/search/loki/1.htm">loki</a><a class="tag" taget="_blank" href="/search/%E6%97%A5%E5%BF%97%E5%B9%B6%E8%A1%8C/1.htm">日志并行</a> <div>上一篇文章我们搭建了Alertmanager和Loki,接下来我们来实现日志并行显示专栏:https://blog.csdn.net/zhanremo3062/category_12552674.html我们只需要修改Promtail服务的配置文件即可multiline:#RE2正则表达式,如果匹配将开始一个新的多行日志块#这个表达式必须被提供firstline:#解析的最大等待时间(Godura</div> </li> <li><a href="/article/1901528802215915520.htm" title="css background动态图片,CSS3 background-position定位背景图片动画效果" target="_blank">css background动态图片,CSS3 background-position定位背景图片动画效果</a> <span class="text-muted">会咕咕咕的小夫爷</span> <a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/background%E5%8A%A8%E6%80%81%E5%9B%BE%E7%89%87/1.htm">background动态图片</a> <div>本章节分享一段代码实例,它实现了利用background-position属性控制背景图片实现动画效果。背景图片都集中在一张图片上,如下:蚂蚁部落*{padding:0px;margin:0px;}body,html{width:100%;height:100%;margin:0px;padding:0px;}body{position:relative;background-attachment</div> </li> <li><a href="/article/1901525901615624192.htm" title="CSS3学习教程,从入门到精通,CSS3 列表样式语法知识点及案例代码(8)" target="_blank">CSS3学习教程,从入门到精通,CSS3 列表样式语法知识点及案例代码(8)</a> <span class="text-muted">知识分享小能手</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91/1.htm">前端开发</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E9%A1%B5%E5%BC%80%E5%8F%91/1.htm">网页开发</a><a class="tag" taget="_blank" href="/search/%E7%BC%96%E7%A8%8B%E8%AF%AD%E8%A8%80%E5%A6%82%E9%97%A8/1.htm">编程语言如门</a><a class="tag" taget="_blank" href="/search/css3/1.htm">css3</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/Java%E5%BC%80%E5%8F%91/1.htm">Java开发</a> <div>CSS3列表样式语法知识点及案例代码一、列表样式类型1.list-style-type属性用于指定列表项标记的样式类型。语法格式:list-style-type:;取值说明:对于无序列表(),常见的取值有:disc:实心圆(默认值)。circle:空心圆。square:实心方块。none:无标记。对于有序列表(),常见的取值有:decimal:数字(默认值)。lower-roman:小写罗马数字。</div> </li> <li><a href="/article/1901525773823569920.htm" title="CSS3学习教程,从入门到精通,CSS3 选择器权重问题语法知识点及案例代码(5)" target="_blank">CSS3学习教程,从入门到精通,CSS3 选择器权重问题语法知识点及案例代码(5)</a> <span class="text-muted">知识分享小能手</span> <a class="tag" taget="_blank" href="/search/%E7%BD%91%E9%A1%B5%E5%BC%80%E5%8F%91/1.htm">网页开发</a><a class="tag" taget="_blank" href="/search/%E7%BC%96%E7%A8%8B%E8%AF%AD%E8%A8%80%E5%A6%82%E9%97%A8/1.htm">编程语言如门</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91/1.htm">前端开发</a><a class="tag" taget="_blank" href="/search/css3/1.htm">css3</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a> <div>CSS3选择器权重问题语法知识点及案例代码一、选择器权重概述在CSS中,当多个选择器同时匹配同一个元素时,浏览器会根据选择器的权重来决定哪个样式生效。权重高的选择器的样式会覆盖权重低的选择器的样式。二、选择器权重计算规则1.内联样式(InlineStyles)内联样式直接写在HTML元素的style属性中,权重为1000。2.ID选择器(IDSelectors)ID选择器以#开头,权重为100。3</div> </li> <li><a href="/article/1901525775350296576.htm" title="CSS3学习教程,从入门到精通,CSS3 常用文本属性语法知识点及案例代码(6)" target="_blank">CSS3学习教程,从入门到精通,CSS3 常用文本属性语法知识点及案例代码(6)</a> <span class="text-muted">知识分享小能手</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91/1.htm">前端开发</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E9%A1%B5%E5%BC%80%E5%8F%91/1.htm">网页开发</a><a class="tag" taget="_blank" href="/search/%E7%BC%96%E7%A8%8B%E8%AF%AD%E8%A8%80%E5%A6%82%E9%97%A8/1.htm">编程语言如门</a><a class="tag" taget="_blank" href="/search/css3/1.htm">css3</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/web%E5%BC%80%E5%8F%91/1.htm">web开发</a> <div>CSS3常用文本属性语法知识点及案例代码一、文本颜色(color)语法:color:;取值:颜色名称:例如red,blue,green等十六进制颜色值:例如#ff0000,#00ff00,#0000ff等RGB颜色值:例如rgb(255,0,0),rgb(0,255,0),rgb(0,0,255)等RGBA颜色值:例如rgba(255,0,0,0.5),rgba(0,255,0,0.5),rgba</div> </li> <li><a href="/article/32.htm" title="对于规范和实现,你会混淆吗?" target="_blank">对于规范和实现,你会混淆吗?</a> <span class="text-muted">yangshangchuan</span> <a class="tag" taget="_blank" href="/search/HotSpot/1.htm">HotSpot</a> <div>昨晚和朋友聊天,喝了点咖啡,由于我经常喝茶,很长时间没喝咖啡了,所以失眠了,于是起床读JVM规范,读完后在朋友圈发了一条信息: JVM Run-Time Data Areas:The Java Virtual Machine defines various run-time data areas that are used during execution of a program. So</div> </li> <li><a href="/article/159.htm" title="android 网络" target="_blank">android 网络</a> <span class="text-muted">百合不是茶</span> <a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C/1.htm">网络</a> <div>android的网络编程和java的一样没什么好分析的都是一些死的照着写就可以了,所以记录下来  方便查找   ,  服务器使用的是TomCat   服务器代码;  servlet的使用需要在xml中注册 package servlet; import java.io.IOException; import java.util.Arr</div> </li> <li><a href="/article/286.htm" title="[读书笔记]读法拉第传" target="_blank">[读书笔记]读法拉第传</a> <span class="text-muted">comsci</span> <a class="tag" taget="_blank" href="/search/%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0/1.htm">读书笔记</a> <div>       1831年的时候,一年可以赚到1000英镑的人..应该很少的...       要成为一个科学家,没有足够的资金支持,很多实验都无法完成       但是当钱赚够了以后....就不能够一直在商业和市场中徘徊......</div> </li> <li><a href="/article/413.htm" title="随机数的产生" target="_blank">随机数的产生</a> <span class="text-muted">沐刃青蛟</span> <a class="tag" taget="_blank" href="/search/%E9%9A%8F%E6%9C%BA%E6%95%B0/1.htm">随机数</a> <div>c++中阐述随机数的方法有两种:   一是产生假随机数(不管操作多少次,所产生的数都不会改变)          这类随机数是使用了默认的种子值产生的,所以每次都是一样的。   //默认种子 for (int i = 0; i < 5; i++) { cout<<</div> </li> <li><a href="/article/540.htm" title="PHP检测函数所在的文件名" target="_blank">PHP检测函数所在的文件名</a> <span class="text-muted">IT独行者</span> <a class="tag" taget="_blank" href="/search/PHP/1.htm">PHP</a><a class="tag" taget="_blank" href="/search/%E5%87%BD%E6%95%B0/1.htm">函数</a> <div>很简单的功能,用到PHP中的反射机制,具体使用的是ReflectionFunction类,可以获取指定函数所在PHP脚本中的具体位置。 创建引用脚本。 代码:   [php]   view plain copy // Filename: functions.php    <?php&nbs</div> </li> <li><a href="/article/667.htm" title="银行各系统功能简介" target="_blank">银行各系统功能简介</a> <span class="text-muted">文强chu</span> <a class="tag" taget="_blank" href="/search/%E9%87%91%E8%9E%8D/1.htm">金融</a> <div>银行各系统功能简介   业务系统 核心业务系统 业务功能包括:总账管理、卡系统管理、客户信息管理、额度控管、存款、贷款、资金业务、国际结算、支付结算、对外接口等 清分清算系统 以清算日期为准,将账务类交易、非账务类交易的手续费、代理费、网络服务费等相关费用,按费用类型计算应收、应付金额,经过清算人员确认后上送核心系统完成结算的过程 国际结算系</div> </li> <li><a href="/article/794.htm" title="Python学习1(pip django 安装以及第一个project)" target="_blank">Python学习1(pip django 安装以及第一个project)</a> <span class="text-muted">小桔子</span> <a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/django/1.htm">django</a><a class="tag" taget="_blank" href="/search/pip/1.htm">pip</a> <div>    最近开始学习python,要安装个pip的工具。听说这个工具很强大,安装了它,在安装第三方工具的话so easy!然后也下载了,按照别人给的教程开始安装,奶奶的怎么也安装不上! 第一步:官方下载pip-1.5.6.tar.gz, https://pypi.python.org/pypi/pip easy! 第二部:解压这个压缩文件,会看到一个setup.p</div> </li> <li><a href="/article/921.htm" title="php 数组" target="_blank">php 数组</a> <span class="text-muted">aichenglong</span> <a class="tag" taget="_blank" href="/search/PHP/1.htm">PHP</a><a class="tag" taget="_blank" href="/search/%E6%8E%92%E5%BA%8F/1.htm">排序</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E7%BB%84/1.htm">数组</a><a class="tag" taget="_blank" href="/search/%E5%BE%AA%E7%8E%AF/1.htm">循环</a><a class="tag" taget="_blank" href="/search/%E5%A4%9A%E7%BB%B4%E6%95%B0%E7%BB%84/1.htm">多维数组</a> <div>1 php中的创建数组 $product = array('tires','oil','spark');//array()实际上是语言结构而不  是函数 2 如果需要创建一个升序的排列的数字保存在一个数组中,可以使用range()函数来自动创建数组 $numbers=range(1,10)//1 2 3 4 5 6 7 8 9 10 $numbers=range(1,10,</div> </li> <li><a href="/article/1048.htm" title="安装python2.7" target="_blank">安装python2.7</a> <span class="text-muted">AILIKES</span> <a class="tag" taget="_blank" href="/search/python/1.htm">python</a> <div>安装python2.7 1、下载可从 http://www.python.org/进行下载#wget https://www.python.org/ftp/python/2.7.10/Python-2.7.10.tgz 2、复制解压 #mkdir -p /opt/usr/python #cp  /opt/soft/Python-2</div> </li> <li><a href="/article/1175.htm" title="java异常的处理探讨" target="_blank">java异常的处理探讨</a> <span class="text-muted">百合不是茶</span> <a class="tag" taget="_blank" href="/search/JAVA%E5%BC%82%E5%B8%B8/1.htm">JAVA异常</a> <div>//java异常  /* 1,了解java 中的异常处理机制,有三种操作 a,声明异常  b,抛出异常  c,捕获异常 2,学会使用try-catch-finally来处理异常 3,学会如何声明异常和抛出异常 4,学会创建自己的异常   */   //2,学会使用try-catch-finally来处理异常   </div> </li> <li><a href="/article/1302.htm" title="getElementsByName实例" target="_blank">getElementsByName实例</a> <span class="text-muted">bijian1013</span> <a class="tag" taget="_blank" href="/search/element/1.htm">element</a> <div>实例1: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/x</div> </li> <li><a href="/article/1429.htm" title="探索JUnit4扩展:Runner" target="_blank">探索JUnit4扩展:Runner</a> <span class="text-muted">bijian1013</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%8D%95%E5%85%83%E6%B5%8B%E8%AF%95/1.htm">单元测试</a><a class="tag" taget="_blank" href="/search/JUnit/1.htm">JUnit</a> <div>        参加敏捷培训时,教练提到Junit4的Runner和Rule,于是特上网查一下,发现很多都讲的太理论,或者是举的例子实在是太牵强。多搜索了几下,搜索到两篇我觉得写的非常好的文章。         文章地址:http://www.blogjava.net/jiangshachina/archive/20</div> </li> <li><a href="/article/1556.htm" title="[MongoDB学习笔记二]MongoDB副本集" target="_blank">[MongoDB学习笔记二]MongoDB副本集</a> <span class="text-muted">bit1129</span> <a class="tag" taget="_blank" href="/search/mongodb/1.htm">mongodb</a> <div>1. 副本集的特性   1)一台主服务器(Primary),多台从服务器(Secondary)   2)Primary挂了之后,从服务器自动完成从它们之中选举一台服务器作为主服务器,继续工作,这就解决了单点故障,因此,在这种情况下,MongoDB集群能够继续工作   3)挂了的主服务器恢复到集群中只能以Secondary服务器的角色加入进来   2</div> </li> <li><a href="/article/1683.htm" title="【Spark八十一】Hive in the spark assembly" target="_blank">【Spark八十一】Hive in the spark assembly</a> <span class="text-muted">bit1129</span> <a class="tag" taget="_blank" href="/search/assembly/1.htm">assembly</a> <div>Spark SQL supports most commonly used features of HiveQL. However, different HiveQL statements are executed in different manners: 1. DDL statements (e.g. CREATE TABLE, DROP TABLE, etc.)</div> </li> <li><a href="/article/1810.htm" title="Nginx问题定位之监控进程异常退出" target="_blank">Nginx问题定位之监控进程异常退出</a> <span class="text-muted">ronin47</span> <div>nginx在运行过程中是否稳定,是否有异常退出过?这里总结几项平时会用到的小技巧。 1. 在error.log中查看是否有signal项,如果有,看看signal是多少。 比如,这是一个异常退出的情况: $grep signal error.log 2012/12/24 16:39:56 [alert] 13661#0: worker process 13666 exited on s</div> </li> <li><a href="/article/1937.htm" title="No grammar constraints (DTD or XML schema).....两种解决方法" target="_blank">No grammar constraints (DTD or XML schema).....两种解决方法</a> <span class="text-muted">byalias</span> <a class="tag" taget="_blank" href="/search/xml/1.htm">xml</a> <div>方法一:常用方法   关闭XML验证 工具栏:windows => preferences => xml => xml files => validation => Indicate when no grammar is specified:选择Ignore即可。 方法二:(个人推荐) 添加 内容如下 <?xml version=</div> </li> <li><a href="/article/2064.htm" title="Netty源码学习-DefaultChannelPipeline" target="_blank">Netty源码学习-DefaultChannelPipeline</a> <span class="text-muted">bylijinnan</span> <a class="tag" taget="_blank" href="/search/netty/1.htm">netty</a> <div>package com.ljn.channel; /** * ChannelPipeline采用的是Intercepting Filter 模式 * 但由于用到两个双向链表和内部类,这个模式看起来不是那么明显,需要仔细查看调用过程才发现 * * 下面对ChannelPipeline作一个模拟,只模拟关键代码: */ public class Pipeline { </div> </li> <li><a href="/article/2191.htm" title="MYSQL数据库常用备份及恢复语句" target="_blank">MYSQL数据库常用备份及恢复语句</a> <span class="text-muted">chicony</span> <a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a> <div> 备份MySQL数据库的命令,可以加选不同的参数选项来实现不同格式的要求。 mysqldump -h主机 -u用户名 -p密码 数据库名 > 文件 备份MySQL数据库为带删除表的格式,能够让该备份覆盖已有数据库而不需要手动删除原有数据库。 mysqldump -–add-drop-table -uusername -ppassword databasename > ba</div> </li> <li><a href="/article/2318.htm" title="小白谈谈云计算--基于Google三大论文" target="_blank">小白谈谈云计算--基于Google三大论文</a> <span class="text-muted">CrazyMizzz</span> <a class="tag" taget="_blank" href="/search/Google/1.htm">Google</a><a class="tag" taget="_blank" href="/search/%E4%BA%91%E8%AE%A1%E7%AE%97/1.htm">云计算</a><a class="tag" taget="_blank" href="/search/GFS/1.htm">GFS</a> <div>    之前在没有接触到云计算之前,只是对云计算有一点点模糊的概念,觉得这是一个很高大上的东西,似乎离我们大一的还很远。后来有机会上了一节云计算的普及课程吧,并且在之前的一周里拜读了谷歌三大论文。不敢说理解,至少囫囵吞枣啃下了一大堆看不明白的理论。现在就简单聊聊我对于云计算的了解。     我先说说GFS   &n</div> </li> <li><a href="/article/2445.htm" title="hadoop 平衡空间设置方法" target="_blank">hadoop 平衡空间设置方法</a> <span class="text-muted">daizj</span> <a class="tag" taget="_blank" href="/search/hadoop/1.htm">hadoop</a><a class="tag" taget="_blank" href="/search/balancer/1.htm">balancer</a> <div>在hdfs-site.xml中增加设置balance的带宽,默认只有1M: <property>   <name>dfs.balance.bandwidthPerSec</name>     <value>10485760</value>     <description&g</div> </li> <li><a href="/article/2572.htm" title="Eclipse程序员要掌握的常用快捷键" target="_blank">Eclipse程序员要掌握的常用快捷键</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/%E7%BC%96%E7%A8%8B/1.htm">编程</a> <div>  判断一个人的编程水平,就看他用键盘多,还是鼠标多。用键盘一是为了输入代码(当然了,也包括注释),再有就是熟练使用快捷键。 曾有人在豆瓣评 《卓有成效的程序员》:“人有多大懒,才有多大闲”。之前我整理了一个 程序员图书列表,目的也就是通过读书,让程序员变懒。  程序员作为特殊的群体,有的人可以这么懒,懒到事情都交给机器去做,而有的人又可以那么勤奋,每天都孜孜不倦得</div> </li> <li><a href="/article/2699.htm" title="Android学习之路" target="_blank">Android学习之路</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/Android%E5%AD%A6%E4%B9%A0/1.htm">Android学习</a> <div>转自:http://blog.csdn.net/ryantang03/article/details/6901459 以前有J2EE基础,接触JAVA也有两三年的时间了,上手Android并不困难,思维上稍微转变一下就可以很快适应。以前做的都是WEB项目,现今体验移动终端项目,让我越来越觉得移动互联网应用是未来的主宰。 下面说说我学习Android的感受,我学Android首先是看MARS的视</div> </li> <li><a href="/article/2826.htm" title="java 遍历Map的四种方法" target="_blank">java 遍历Map的四种方法</a> <span class="text-muted">eksliang</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/HashMap/1.htm">HashMap</a><a class="tag" taget="_blank" href="/search/java+%E9%81%8D%E5%8E%86Map%E7%9A%84%E5%9B%9B%E7%A7%8D%E6%96%B9%E6%B3%95/1.htm">java 遍历Map的四种方法</a> <div>转载请出自出处: http://eksliang.iteye.com/blog/2059996 package com.ickes; import java.util.HashMap; import java.util.Iterator; import java.util.Map; import java.util.Map.Entry; /** * 遍历Map的四种方式 </div> </li> <li><a href="/article/2953.htm" title="【精典】数据库相关相关" target="_blank">【精典】数据库相关相关</a> <span class="text-muted">gengzg</span> <a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">数据库</a> <div>package C3P0; import java.sql.Connection; import java.sql.SQLException; import java.beans.PropertyVetoException; import com.mchange.v2.c3p0.ComboPooledDataSource; public class DBPool{ </div> </li> <li><a href="/article/3080.htm" title="自动补全" target="_blank">自动补全</a> <span class="text-muted">huyana_town</span> <a class="tag" taget="_blank" href="/search/%E8%87%AA%E5%8A%A8%E8%A1%A5%E5%85%A8/1.htm">自动补全</a> <div><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml&quo</div> </li> <li><a href="/article/3207.htm" title="jquery在线预览PDF文件,打开PDF文件" target="_blank">jquery在线预览PDF文件,打开PDF文件</a> <span class="text-muted">天梯梦</span> <a class="tag" taget="_blank" href="/search/jquery/1.htm">jquery</a> <div>最主要的是使用到了一个jquery的插件jquery.media.js,使用这个插件就很容易实现了。   核心代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.</div> </li> <li><a href="/article/3334.htm" title="ViewPager刷新单个页面的方法" target="_blank">ViewPager刷新单个页面的方法</a> <span class="text-muted">lovelease</span> <a class="tag" taget="_blank" href="/search/android/1.htm">android</a><a class="tag" taget="_blank" href="/search/viewpager/1.htm">viewpager</a><a class="tag" taget="_blank" href="/search/tag/1.htm">tag</a><a class="tag" taget="_blank" href="/search/%E5%88%B7%E6%96%B0/1.htm">刷新</a> <div>  使用ViewPager做滑动切换图片的效果时,如果图片是从网络下载的,那么再子线程中下载完图片时我们会使用handler通知UI线程,然后UI线程就可以调用mViewPager.getAdapter().notifyDataSetChanged()进行页面的刷新,但是viewpager不同于listview,你会发现单纯的调用notifyDataSetChanged()并不能刷新页面</div> </li> <li><a href="/article/3461.htm" title="利用按位取反(~)从复合枚举值里清除枚举值" target="_blank">利用按位取反(~)从复合枚举值里清除枚举值</a> <span class="text-muted">草料场</span> <a class="tag" taget="_blank" href="/search/enum/1.htm">enum</a> <div>以 C# 中的 System.Drawing.FontStyle 为例。   如果需要同时有多种效果, 如:“粗体”和“下划线”的效果,可以用按位或(|) FontStyle style = FontStyle.Bold | FontStyle.Underline;   如果需要去除 style 里的某一种效果, </div> </li> <li><a href="/article/3588.htm" title="Linux系统新手学习的11点建议" target="_blank">Linux系统新手学习的11点建议</a> <span class="text-muted">刘星宇</span> <a class="tag" taget="_blank" href="/search/%E7%BC%96%E7%A8%8B/1.htm">编程</a><a class="tag" taget="_blank" href="/search/%E5%B7%A5%E4%BD%9C/1.htm">工作</a><a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/%E8%84%9A%E6%9C%AC/1.htm">脚本</a> <div>  随着Linux应用的扩展许多朋友开始接触Linux,根据学习Windwos的经验往往有一些茫然的感觉:不知从何处开始学起。这里介绍学习Linux的一些建议。   一、从基础开始:常常有些朋友在Linux论坛问一些问题,不过,其中大多数的问题都是很基础的。例如:为什么我使用一个命令的时候,系统告诉我找不到该目录,我要如何限制使用者的权限等问题,这些问题其实都不是很难的,只要了解了 Linu</div> </li> <li><a href="/article/3715.htm" title="hibernate dao层应用之HibernateDaoSupport二次封装" target="_blank">hibernate dao层应用之HibernateDaoSupport二次封装</a> <span class="text-muted">wangzhezichuan</span> <a class="tag" taget="_blank" href="/search/DAO/1.htm">DAO</a><a class="tag" taget="_blank" href="/search/Hibernate/1.htm">Hibernate</a> <div>/** * <p>方法描述:sql语句查询 返回List<Class> </p> * <p>方法备注: Class 只能是自定义类 </p> * @param calzz * @param sql * @return * <p>创建人:王川</p> * <p>创建时间:Jul</div> </li> </ul> </div> </div> </div> <div> <div class="container"> <div class="indexes"> <strong>按字母分类:</strong> <a href="/tags/A/1.htm" target="_blank">A</a><a href="/tags/B/1.htm" target="_blank">B</a><a href="/tags/C/1.htm" target="_blank">C</a><a href="/tags/D/1.htm" target="_blank">D</a><a href="/tags/E/1.htm" target="_blank">E</a><a href="/tags/F/1.htm" target="_blank">F</a><a href="/tags/G/1.htm" target="_blank">G</a><a href="/tags/H/1.htm" target="_blank">H</a><a href="/tags/I/1.htm" target="_blank">I</a><a href="/tags/J/1.htm" target="_blank">J</a><a href="/tags/K/1.htm" target="_blank">K</a><a href="/tags/L/1.htm" target="_blank">L</a><a href="/tags/M/1.htm" target="_blank">M</a><a href="/tags/N/1.htm" target="_blank">N</a><a href="/tags/O/1.htm" target="_blank">O</a><a href="/tags/P/1.htm" target="_blank">P</a><a href="/tags/Q/1.htm" target="_blank">Q</a><a href="/tags/R/1.htm" target="_blank">R</a><a href="/tags/S/1.htm" target="_blank">S</a><a href="/tags/T/1.htm" target="_blank">T</a><a href="/tags/U/1.htm" target="_blank">U</a><a href="/tags/V/1.htm" target="_blank">V</a><a href="/tags/W/1.htm" target="_blank">W</a><a href="/tags/X/1.htm" target="_blank">X</a><a href="/tags/Y/1.htm" target="_blank">Y</a><a href="/tags/Z/1.htm" target="_blank">Z</a><a href="/tags/0/1.htm" target="_blank">其他</a> </div> </div> </div> <footer id="footer" class="mb30 mt30"> <div class="container"> <div class="footBglm"> <a target="_blank" href="/">首页</a> - <a target="_blank" href="/custom/about.htm">关于我们</a> - <a target="_blank" href="/search/Java/1.htm">站内搜索</a> - <a target="_blank" href="/sitemap.txt">Sitemap</a> - <a target="_blank" href="/custom/delete.htm">侵权投诉</a> </div> <div class="copyright">版权所有 IT知识库 CopyRight © 2000-2050 E-COM-NET.COM , All Rights Reserved. <!-- <a href="https://beian.miit.gov.cn/" rel="nofollow" target="_blank">京ICP备09083238号</a><br>--> </div> </div> </footer> <!-- 代码高亮 --> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shCore.js"></script> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shLegacy.js"></script> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shAutoloader.js"></script> <link type="text/css" rel="stylesheet" href="/static/syntaxhighlighter/styles/shCoreDefault.css"/> <script type="text/javascript" src="/static/syntaxhighlighter/src/my_start_1.js"></script> </body> </html>