MaterialCoder

前端常见笔面试题总结

HTML&CSS

Doctype的作用？严格模式和混杂模式有什么区别？它们有何意义
Doctype文档声明，放在文档中的最前面，处于html标签之前。它用于告知浏览器的解析器，用什么文档类型规范来解析这个文档；
严格模式下的排版和js运作模式是以该浏览器支持的最高标准运行的，而混杂模式中，页面以宽松的向后兼容的方式显示，模拟老式浏览器的行为以防止站点无法工作；
Doctype不存在或格式不正确将会导致文档以混杂模式呈现。
HTML5有哪些新特性？如何处理HTML5新标签的浏览器兼容问题？如何区分HTML和HTML5？
HTML5不基于SGML，主要是关于图像、位置、存储、多任务等功能的添加。
1. 绘画canvas；
2. 用于媒体回放的video和audio元素；
3. 本地离线存储localStorage和sessionStorage，localStorage长期存储数据，浏览器关闭后数据不会丢失；sessionStorage的数据在浏览器关闭后会自动删除；
4. 语义化更好的内容元素，如header，footer，nav，section，article，menu，aside等；
5. 更丰富的表单控件，如calender，date，time，range，email，url，search，color，tel，number等；
6. 新的技术，webworker，websocket，Geolocation
IE8/IE7/IE6支持通过document.createElement方法创建新标签，可以利用这一特性让这些浏览器支持HTML5标签，浏览器支持新标签后，还需要添加默认标签样式。当然也可以直接使用成熟的框架，比如html5shim。
你所知道的浏览器内核都有哪些？
1. trident内核：IE浏览器
2. gecko内核：Firefox浏览器
3. webkit内核：Chrome浏览器、Safari浏览器
4. presto内核：Opera浏览器
cookie，sessionStorage，LocalStorage的区别？
sessionStorage和localStorage都是HTML5 Web Storage API提供的，可以方便地在web请求之间保存数据。有了本地数据，就可以避免数据在浏览器和服务器间不必要地来回传递。
它们三者都是在浏览器段存储数据。sessionStorage是在同源的窗口中始终存在的数据，也就是只要这个浏览器窗口没有关闭，及时刷新页面或进入另一个同源页面，数据仍然存在。关闭窗口后，sessionStorage即被销毁。同时“独立”打开的不同窗口，即使是在同一页面，sessionStorage对象也是不同的。
1. cookie
  每个域名存储量比较小（各浏览器不同，大致4K）；
  所有域名的存储量有限制（各浏览器不同，大致4K）；
  有个数限制（各浏览器不同）；
  会随请求发送到服务器。
2. sessionStorage
  只在session内有效；
  存储量大（推荐没有限制，但是实际上各浏览器也不同）。
3. localStorage
  永久存储；
  单个域名存储量比较大（推荐5MB，各浏览器不同）；
  总体数量无限制。
cookie和session分别用来做什么？有什么关系？
1. cookie用来在客户端存储用户信息，session用来在服务器端存储用户数据，均可用于跟踪用户状态。
2. 由于存放在服务器端，session较存放在客户端的cookie来说更安全，用户验证等重要信息一般存放在session，但cookie也可以加密来提高安全性。
3. cookie在使用脚本或用户手动删除前永久保存，最大一般为4KB，session会在会话期间保存，当访问增多会家中服务器负担。
4. session的实现需要cookie的支持：session依赖session ID实现，而session ID存放与cookie，因此，禁用cookie之后session也会失效。但可使用其他方法实现，比如在URL中传递session ID。
5. session在服务器端可存放于文件（默认）、数据库或内存。
6. session支持各种数据类型对象，cookie只保存字符串。
CSS选择器有哪些？它们的优先级是怎样的？
CSS选择器有ID选择器，class选择器，伪类选择器，标签选择器，通配符选择器，属性选择器。它们的优先级为：
!important > 行内样式（1000）> ID选择器（100）> class选择器/伪类选择器（10）> 标签选择器/伪元素选择器/属性选择器（1）> 通配符选择器（0）。
更多CSS权重的相关内容见这里。
px、em、rem、vh、vw之间的区别？
link和@import的区别？
两者都是永不外部引用CSS的方式，它们的区别是：
1. link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事物，@import属于CSS范畴，只能加载CSS；
2. link引用CSS时，在页面载入时同时加载，@import需要页面网页完全嵌入以后加载；
3. link是XHTML标签，无兼容性问题，@import是在CSS2.1提出的，低版本的浏览器不支持；
4. link支持使用JavaScript控制DOM去改变样式，而@import不支持。
HTML中的列表有哪些？它们的结构是怎样的。
HTML中的列表包括有序列表ol（order list）、无序列表ul（unorder list）和定义列表dl（definite list）。它们的结构分别如下：

<ol><li>li>ol>
<ul><li>li>ul>
<dl>
    <dt>dt> 
    <dd>dd> 
dl>

li里面放标题的话用什么标签？
li里面只能放
~
标签
img和input标签是属于块级还是行内元素？是行内的话为什么可以设置宽高？
img和input都是属于行内替换元素（inline replaced elements），属于inline element类。height/width/padding/margin均可用，效果等同于块级元素。
行内非替换元素（inline non-replaced elements），height/width/padding-top、bottom/margin-top、bottom均无效果，只能用padding-left/right和margin-left/right。
（X）HTML中的、、</code>、<code><select></code>、<code><object></code> 都是替换元素，这些元素往往没有实际的内容，即是一个空元素。替换元素一般有内在尺寸，所有具有width和height，可以设定。例如不指定img的width和height时，就按其内在尺寸显示，也就是图片被保存时的宽度和高度。</li> <li>什么是浮动？会产生哪些问题？如何解决？ 浮动：通过设置元素的float属性不为none，使元素按照特定的方向脱离文档流，浮动元素碰到包含它的边框或者浮动元素的边框停留。 产生的问题：最常见的问题是父元素高度塌陷；同时浮动元素后面的非浮动元素会被提高，可能会被互动元素遮挡；对于浮动元素前面的同级行内非浮动元素会紧随其后，导致布局混乱。 解决办法：对于同级的元素，不需要浮动的直接将其clear:both即可。对于父元素高度塌陷的解决方法大概可以分为一下三种： <ol> <li>给父元素直接设置高度 这种方法比较死板，必须要精确计算出父元素的高度，否则布局还是会很混乱。</li> <li>加一个没有脱离文档流的具有高度的元素，触发父元素的高度 父元素高度之所以会塌陷，是由于子元素浮动脱离了文档流，没有东西来把它给撑起来。那么在父元素所有子元素的最后加一个没有脱离文档流的元素，同时不允许它左右出现浮动，那么该元素必须通过增加外边距(css 2 以下)/增加空白(css 2.1 以上)来向下移动，直到换行。为了能让该元素换行，父元素必须包含浮动元素来提供足够的空间。从而父元素的高度也就撑起来了。为了不显示额外的东西，因此我们添加的是一个空标签。通常是通过添加<code><div></code>、<code> </code>标签，并为其设置<code>clear:both;</code>属性来清除浮动。添加空标签的方法会导致在html结构复杂，因此建议在简单页面中使用。 另外通过<code>:after</code>伪元素清除浮动也是同样的原理，它是在父元素中添加一个不可见的标签。这种方法比较常用，但是代码有点偏多，而且会有浏览器的兼容问题。 <pre class="prettyprint"><code class=" hljs css">.clearfix:after { content: ""; display:block; width: 0; heigth: 0; clear: both; } .clearfix { /*兼容IE*/ zoom: 1; }</code></pre></li> <li>触发父元素BFC，根据BFC的“计算BFC的高度时，浮动元素也要参与计算”的规则强制父元素具有高度 BFC就是一个隔离的独立容器，容器里面的元素不会影响到外面的元素。在计算BFC的高度时，浮动元素也要参与计算，因此让父元素成为一个BFC，就可以解决它的高度塌陷问题。常用方法是设置父元素的<code>overflow</code>属性为<code>hidden</code>或者<code>auto</code>。这种方法代码简单，但是可能会隐藏掉溢出的内容或者产生滚动条。 </li> </ol></li> <li>如何区分伪类和伪元素？ 伪类，类，就是class，表示一些既有元素的状态，如a链接的各个状态（link，hover，visited，active）； 伪元素，就是一个元素，逻辑上存在，但实际上并不存在在文档树中，如after和before。 在CSS3中为避免这两个混淆，特意用冒号来加以区分，伪元素前面是两个冒号（::after），伪类前面是一个冒号（:hover）。 常用的伪类有： <code>:hover</code>,<code>:link</code>,<code>:active</code>,<code>:visited</code>,<code>:first-child</code>,<code>:nth-child</code>,<code>:focus</code> 常用的伪元素： <code>::after</code>,<code>::before</code>,<code>::first-line</code>,<code>::first-letter</code></li> <li>position有哪些值？分别在什么情况下使用？ position的值包括： static：默认值，没有定位，元素出现在正常流中； relative：生成相对定位的元素，相对于其在普通文档流中的位置进行定位，不会脱离文档流； absolute：生成绝对定位的元素，相对于最近一级的定位不是static的父元素进行定位； fixed：生成绝对定位的元素，相对于浏览器窗口进行定位。</li> <li>如何实现多行文字的垂直居中？ 单行文字垂直居中使用的是<code>line-heigt: height;</code>对于多行文字的垂直居中，可以将文字包括在一个容器内，将该容器进行垂直居中即可。</li> </ul> <h3 id="javascript">JavaScript</h3> <ul> <li>在父元素的第一个子元素之前插入一个节点，原生JS如何实现？ 原生JS中插入元素的方法是<code>insertBefore()</code>,语法为<code>node.insertBefore(newnode[,existingnode])</code>,如果没有传入第二个参数，则默认在结尾处插入，与<code>appendChild()</code>相同。 <pre class="prettyprint"><code class=" hljs xml"><body> <ul id="myList"><li>Coffee</li><li>Tea</li></ul> <script> var newNode = document.createElement('li'); var nodeText = document.createTextNode('Water'); newNode.append(nodeText); var node = document.getElementById('myList'); var existingNode = node.childNodes[0]; node.insertBefore(newNode, existingNode); </script> </body></code></pre> 插入之前： <a href="http://img.e-com-net.com/image/info8/629b3c1ec7c44a6197c5f38a49622b69.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/629b3c1ec7c44a6197c5f38a49622b69.png" alt="插入之前" title="" width="82" height="70"></a> 插入之后： <a href="http://img.e-com-net.com/image/info8/d635b4b760b2409e9d10059eb66515dd.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/d635b4b760b2409e9d10059eb66515dd.jpg" alt="插入之后" title="" width="84" height="76"></a> 也可以使用<code>insertBefore()</code>插入/移除以后元素或移动已有元素的位置。 把一个列表中的元素移动到另一个列表： <pre class="prettyprint"><code class=" hljs xml"><body> <ul id="myList1"><li>Coffee</li><li>Tea</li><li>Milk</li><li>Water</li></ul> <ul id="myList2"><li>Coffee</li><li>Tea</li><li>Milk</li><li>Water</li></ul> <script> var list1=document.getElementById("myList1"); var list2=document.getElementById("myList2"); list1.insertBefore(list2.lastChild,list1.childNodes[0]); </script> </body></code></pre> 插入之前： <a href="http://img.e-com-net.com/image/info8/b8f89c41fa714334bf8527c5ddd4d791.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/b8f89c41fa714334bf8527c5ddd4d791.png" alt="前端常见笔面试题总结_第1张图片" title="" width="112" height="202" style="border:1px solid black;"></a> 插入之后： <a href="http://img.e-com-net.com/image/info8/d731a037a5a54dd1a6ea0236cdad3f07.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/d731a037a5a54dd1a6ea0236cdad3f07.png" alt="前端常见笔面试题总结_第2张图片" title="" width="107" height="198" style="border:1px solid black;"></a> 移动列表中的某一项： <pre class="prettyprint"><code class=" hljs avrasm">var node=document.getElementById("myList1").lastChild; var list=document.getElementById("myList") list.insertBefore(node, list1.childNodes[0]);</code></pre> 插入之前： <a href="http://img.e-com-net.com/image/info8/d297fc077e17440e86589357af0c7853.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/d297fc077e17440e86589357af0c7853.png" alt="前端常见笔面试题总结_第3张图片" title="" width="103" height="110" style="border:1px solid black;"></a> 插入之后： <a href="http://img.e-com-net.com/image/info8/6b687480e38a467fa757870d6bb1ea85.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/6b687480e38a467fa757870d6bb1ea85.png" alt="插入之后" title="" width="95" height="104"></a></li> <li>用原生JS实现jQuery中的append和prepend方法？ append: 在被选元素的最后面插入指定内容 <pre class="prettyprint"><code class=" hljs javascript">//jQuery: $('#p').append('hello world!'); //JavaScript: var p = document.getElmentById("p"); p.appendChild('hello world!');</code></pre> prepend: 在被选元素的开头插入指定内容 <pre class="prettyprint"><code class=" hljs javascript">//jQuery: $('#p').prepend('hello world!'); //JavaScript: var p = document.getElmentById("p"); p.insertBefore('hello world!', p.childNodes[0]);</code></pre></li> <li>用原生JS实现一个方法，将传入的所有数组进行合并并返回，传入数组的个数不限，可以不考虑去重 方法一：直接对arguments进行遍历 <pre class="prettyprint"><code class=" hljs matlab">function concat() { var res = []; for(var i=0;i<arguments.length;i++) { res = res.concat(arguments[i]); } return res; }</code></pre> 方法二：使用arguments+apply <pre class="prettyprint"><code class=" hljs javascript">function concat() { return Array.prototype.concat.apply([], arguments); }</code></pre></li> <li>从一段字符串中截取其中的一小段，怎么实现？ 用字符串的<code>slice()</code>、<code>substr()</code>和<code>substring()</code>方法。但是它们三个都是需要传入两个参数，但是是有区别的。<code>slice(start,end)</code>和<code>substring(start,end)</code>中传入的参数都是指截取字符串的开始位置和结束位置（不包括），<code>substr(start,len)</code>中的第一个参数是开始位置，第二个参数是指截取的子字符串长度。如果不传第二个参数，则都是默认到字符串的结尾。 <pre class="prettyprint"><code class=" hljs rust">var str = "hello world!"; str.slice(4,7); //'o w' str.substring(4,7); //'o w' str.substr(4,7); //'o world'</code></pre> 需要注意的是：<code>substring()</code>始终以两个参数中的最小值为开始位置，大值为结束位置。 <pre class="prettyprint"><code class=" hljs ruby">str.slice(7,4); //'' str.substring(7,4); //'o w' str.substr(7,4); //'orld'</code></pre> 当传入的参数是负数时，<code>slice()</code>会将字符串的长度与相应的负数相加，结果作为参数，<code>substring()</code>则会将所有的负数都转化为0；<code>substr()</code>会将第一个参数与字符串长度相加后的结果作为参数传入。 <pre class="prettyprint"><code class=" hljs ruby">str.slice(-4); //'rld!' str.substring(-4); //'hello world!' str.substr(-4); //'hello world!' str.slice(3, -4); //'lo wo' str.substring(3, -4); //'hel' str.substr(3, -4); //''</code></pre></li> <li>你对JSONP的理解？JSONP用原生JS怎么来写？它是怎样来实现跨域的？ JSONP（JSON with padding），填充式JSON。JSONP主要是利用<code><script></code>标签的src属性没有同源限制，通过动态创建<code><script></code>标签来实现跨域请求数据。 JSONP的原生JS写法： <pre class="prettyprint"><code class=" hljs javascript">//http://a.com/index.html function callbackHandler(data) { //处理接收到的数据 } var script = document.createElement('script'); script.src = 'http://b.com/index.html?callback=callbackHandler'; document.getElementByTagName('head')[0].appendChild(script');</code></pre> 在后台中通过获取要查询的数据请求，在数据库中查找相应的数据，并将查找到的json格式的数据作为callback带过来的回调函数的参数传入（这个过程是在后台按照JS的语法进行拼接），返回拼接后的结果（callbackHandler(json)），动态插入脚本，即相当于一个函数调用，通过执行该函数对接收到的数据进行处理。JSONP方法只能发起GET请求，而没有POST方法。同时JSONP无法对错误进行调试，如果正确接收到了数据，就进行正常处理，如果没有接收到的话，就静默失败，不会有任何的报错。 在jQuery中调用JSONP： <pre class="prettyprint"><code class=" hljs javascript">$.ajax({ type: 'GET', url: 'http://b.com/index.html', dataType: 'jsonp', jsonp: callbackHandler, success: function(data) {}, erro: function() {} })</code></pre></li> <li>img标签可以实现跨域吗？ <code><img></code>标签也可以用来发起跨域请求，它的原理和JSONP类似，都是利用src属性没有同源限制的特点。同时可以利用onload和onerror事件来进行监听。 <pre class="prettyprint"><code class=" hljs javascript">var img = new Image(); img.onload = function() { //请求成功 } img.onerror = function() { //请求失败 } img.src = 'http://a.b.com/a.gif';</code></pre> 它只能发起get请求，并且不能访问响应文本，只能用来监听是否响应而已。 更多关于<code><img></code>标签的特性请看这里。</li> <li>跨域的方法有哪些？分别有什么样的使用条件？ 跨域方法除了上面说的JSONP，还有以下几种： document.domain + iframe : 这种方法只能在主域相同的时候才能使用，也就是用a.example.com与example.com之间是可以使用的，但是a.example.com与a.b.com之间是不能够实用该方法的。 window.name : 它是利用iframe跳转到其他地址时，window.name值是不变的，同时window.name可以支持非常长的name值（2MB）。但是iframe的window.name值是不能够跨域读取的，因此通常需要一个代理页面，该页面与我们的主页面是同源的，使要跨域获取数据的页面跳转到该页面，再在主页面中读取代理页面的window.name的值。页面结构通常如下： http://a.com/index.html 应用页面 http://a.com/other.html 代理页面 http://b.com/index.html 数据页面 cors策略：通过在服务器端设置Access-Control-Allow-Origin，就可以在客户端像平常使用ajax一样使用来跨域获取数据。该方法需要客户端和服务器端同时支持，目前主流浏览器基本都支持，但是IE要在IE10以上才支持。 window.postMessage方法：它是HTML5中提供的一个API。通过<code>window.postMessage(msg, targetOrigin)</code>向目标窗口发送数据，目标窗口则通过message事件来进行监听是否有数据发送过来。 <pre class="prettyprint"><code class=" hljs cs">//目标窗口 window.addEventListener('message',function(event){ var data = event.data; //发送过来的消息 var origin = event.origin; //消息的来源 },false);</code></pre></li> <li>JS继承有哪些方法？ <ol> <li>构造函数继承 通过apply或call方法，将父对象的构造函数绑定在子对象上。 <pre class="prettyprint"><code class=" hljs javascript">function Animal() { this.species = '猫科动物'; } function Cat(name,color) { Animal.apply(this, arguments); this.name = name; this.color = color; } var cat = new Cat('huahua', 'white'); alert(cat.species); //'猫科动物' </code></pre></li> <li>原型继承 利用prototype属性 <pre class="prettyprint"><code class=" hljs javascript">function Animal() { this.species = "猫科"; } function Cat(name,color) { this.name = name; this.color = color; } Cat.prototype = new Animal(); //重写了Cat的原型对象，并将Cat.prototype.constructor指向了Animal Cat.prototype.constructor = Cat; //重新将Cat的constructor指向它自己原来的构造函数 var cat = new Cat('huahua','white'); alert(cat.species); //猫科</code></pre></li> <li>直接继承prototype 就是对第二种方法的改造。由于Animal对象中，不变的属性可以直接写入Animal.prototype中，因此我们可以对Animal对象进行一个改造，让Cat直接继承Animal的prototype。该方法的优点是效率高，比较省内存。缺点也很明显，Cat.prototype和Animal.prototype指向了同一个对象，任何对Cat.prototype的修改也会直接显示到Animal.prototype上，比如此时Animal.prototype.constructor也是Cat。 <pre class="prettyprint"><code class=" hljs javascript">function Animal() {} Animal.prototype.species = '猫科'; function Cat(name,color) { this.name = name; this.color = color; } Cat.prototype = Animal.prototype; Cat.prototype.constructor = Cat; var cat = new Cat('huahua', 'white'); alert(cat.species); //'猫科'</code></pre></li> <li>利用一个空对象作为中介 采用“直接继承prototype”方法具有上述的缺点，因此可以采用一个空对象作为中介。F是一个空对象，几乎不占用内存。 <pre class="prettyprint"><code class=" hljs javascript">function Animal() {} Animal.prototype.species = '猫科'; function Cat(name, color) { this.name = name; this.color = color; } var F = function () {}; F.prototype = Animal.prototype; Cat.prototype = new F(); Cat.prototype.constructor = Cat; var cat = new Cat('huahua','white'); alert(cat.species);</code></pre></li> <li>拷贝（浅拷贝）继承 直接把父对象的所有属性和方法复制给子对象。 <pre class="prettyprint"><code class=" hljs javascript">function Animal() {} Animal.prototype.species = '猫科'; function Cat(name, color) { this.name = name; this.color = color; } //把父对象prototype上的属性和方法一一拷贝给子对象 function extend(child, parent) { var c = child.prototype; var p = parent.prototype; for(var i in p) { c[i] = p[i]; } } extend(Cat, Animal); var cat = new Cat('huahua','white'); alert(cat.species);</code></pre></li> <li>深拷贝 上面的是一种浅拷贝方法，它存在着一些缺点，例如当父对象的属性为一个数组或另一个对象时，实际上拷贝给子对象的是一个引用地址，而不是真正的拷贝，当改变子元素上的属性值时，父元素上的也会被篡改。因此又有了一种深拷贝方法。 <pre class="prettyprint"><code class=" hljs coffeescript">function deepCopy(p, c) { var c = c || {}; for(var i in p) { if(typeof p[i]==='object') { //如果父元素的属性是数组或对象，则在进行一次浅拷贝 c[i] = (p[i].constructor === Array ) ? [] : {}; deepCopy(p[i],c[i]); } else { c[i] = p[i]; } } return c; } var Chinese = { nation: '中国', birthPlace: ['上海', '北京', '杭州'] } var Doctor = deepCopy(Chinese); Doctor.birthPlace.push('成都'); alert(Doctor.birthPlace); //'上海', '北京', '杭州'， '成都' alert(Chinese.birthPlace); //'上海', '北京', '杭州'</code></pre></li> <li>object()方法 上面的两种方法都是没有通过构造函数实现的继承。还有一种方法也可以不通过构造函数实现继承，那就是Douglas Crockford提出的object()方法。 <pre class="prettyprint"><code class=" hljs javascript">function object(o) { function F() {} F.prototype = o; return new F(); } var Chinese = { nation: '中国' } var Doctor = object(Chinese); Doctor.career = '医生'; alert(Doctor.nation); //'中国'</code></pre></li> </ol></li> <li>script标签的defer和async属性有啥区别？ defer是在HTML解析完之后才会执行，如果是多个，按照加载顺序依次执行； async是在加载完成后立即执行，如果是多个，执行顺序和加载顺序无关。</li> <li>setTimeout中第一个参数除了使用匿名函数包裹，还可以怎么调用一个含参函数？ <code>setTimeout</code>函数用来指定某个函数或某段代码在多少毫秒后执行，它返回一个参数，表示定时器的编号，可以用这个编号来取消定时器。 <pre class="prettyprint"><code class=" hljs go">var timer = setTimeout(func | code, delay);</code></pre> <code>setTimeout</code>函数的第一个参数我们通常是传入一个函数名或者一个匿名函数。 <pre class="prettyprint"><code class=" hljs javascript">setTimeout(func, 1000); function func() { //code } setTimeout(function() { //code }, 1000);</code></pre> 但是如果我们要在一定时间后执行一个带有参数的函数时，该怎么办呢？起始最容易想到的就是在匿名函数里面直接执行这个函数，并把参数传进去就行了。 <pre class="prettyprint"><code class=" hljs javascript">function add(a,b) { console.log(a+b); } setTimeout(function() { add(2, 3); },1000); //5</code></pre> 其实<code>setTimeout</code>里面不止可以传入两个参数，它还可以传入更多的参数，第三个以及后面的参数会作为第一个函数参数的参数传入，也就是说我们如果要调用一个含参函数，不仅可以使用匿名函数包括，还可以直接把要传入的参数写在<code>setTimeout</code>函数的第二个参数后面就可以了。 <pre class="prettyprint"><code class=" hljs livecodeserver">setTimout(add, 1000, 2, 3); //5</code></pre> setTimeout函数还有更多的功能，详见这里。</li> <li>DOM的onload和domContentLoaded事件有什么区别？ onload事件是在页面中所有的元素，包括图片、样式和脚本等全部都加载完毕后才开始执行；而domContentLoaded事件是在页面中的HTML文档完全被加载和解析（即所有的DOM完全解析）时触发，而不需要等待图片和脚本等加载。</li> <li>写一个方法，从cookie里面读取数据。 <pre class="prettyprint"><code class=" hljs scilab">function getCookie(name) { var cookies = document.cookie; var pos = cookies.indexOf(name); if(pos !== -1) { var start = pos + name.length + 1; var end = cookies.indexOf(';', start); if(end == -1){ end = cookies.length; } var value = decondeURIComponent(cookies.substring(start,end); } return value; }</code></pre> 扩展： cookie有哪些属性？ cookie中除了name和value之外，还包括expires（过期时间）、domain（域名）、path（路径）、secure（安全性）、size（大小）。 既然有了cookie为什么还需要localStorage？ localStorage和cookie相比，它的存储量更大，可以用在浏览器段缓存更多数据，同时它仅保存在客户端中，不参与服务器端通信，但cookie会每次都随着请求发送到服务器端。同时，localStorage存储和读取数据的操作更简单： <pre class="prettyprint"><code class=" hljs mel">window.localStorage.setItem(key, value); //存储数据 window.localStorage.getItem(key); //获取数据 window.localStorage.removeItem(key); //删除某一项数据 window.localStorage.clear(); //删除所有数据</code></pre> 但是，localStorage是没法取代cookie的，为了防止XSS攻击，浏览器支持通过设置httpOnly来阻止js读取cookie，但是localStorage中并没有针对XSS的防御措施。</li> <li>js是单线程还是多线程？为什么？ JavaScript是单线程的，作为浏览器脚本语言，JavaScript的作用主要是与用户互动，以及操作DOM。这决定了它只能是单线程的，否则会造成混乱。比如，假定JavaScript同时有两个线程，一个线程在某个节点上添加内容，而另一个线程删除了这个节点，这时浏览器就会陷入矛盾了。 单线程就意味着所有任务都需要排队，前一个任务结束了，才会执行后一个任务。如果前一个任务耗时很长的话，后一个任务就不得不一直等待。为了解决这个问题，又提出了“任务队列”的概念。将所有的任务分成了两种，同步任务和异步任务。同步任务是在主线程上排队执行的任务，只有前一个任务执行完毕，才能执行后一个任务；异步任务是不进入主线程，而进入任务队列的任务，所有的同步任务执行完成之后，再来依次判断当前这个异步任务是否可以执行了，如果可以，则该任务进入主线程执行。 在HTML5中提出了Web Worker标准，它允许JavaScript脚本创建多个线程，但是子线程完全受主线程控制，并且不得操作DOM。web Worker是运行在后台的JavaScript，独立于其他脚本，不会影响页面的性能，一般用它来处理一些耗时和消耗CPU的任务。 更多详细内容请看这里</li> <li>不使用临时变量，交换a、b两个数 主要是利用+ -去进行运算，例如a = a+(b-a)；最终得到的是a = b; <pre class="prettyprint"><code class=" hljs autohotkey">function swap(a,b) { b = b - a; a = a + b; b = a - b; return [a,b]; }</code></pre></li> <li>js垃圾回收机制是怎样的？ JavaScript中的垃圾回收机制主要有两种，标记清除和引用计数。 标记清除：这是JavaScript中最常见的垃圾回收方式，当变量进入执行环境的时候，比如函数中声明一个变量，垃圾回收器将其标记为“进入环境”，当变量离开环境的时候（函数执行结束）将其标记为“离开环境”； 引用计数：它的策略是跟踪记录每个值被使用的次数，当声明了一个变量并将一个引用类型赋值给该变量的时候这个值的引用次数就加1，如果该变量的值变成了另外一个，则这个值的引用次数就减1，当这个值的引用次数变为0时，说明没有变量在使用，这个值没法被访问了，因此可以将其占用的空间回收，这样垃圾回收器会在运行的时候清理掉引用次数为0的值的占用空间。</li> <li>用原生js实现ES6 中的Map方法。 （暂时没有想出来。）</li> <li>let和var的区别？ <code>let</code>和<code>var</code>都是用来声明变量的，对于声明后未赋值的变量都会输出<code>undefined</code>，它们的区别包括： <ol> <li>对于先使用后声明的变量，var定义的会输出<code>undefined</code>，而let定义的会报错； <pre class="prettyprint"><code class=" hljs coffeescript">console.log(a); //undefined console.log(b); //Uncaught ReferenceError: b is not defined var a = 4; let b = 5;</code></pre></li> <li>重复定义同一个变量，<code>var</code>定义的后一个变量会覆盖前一个，而用let会报错，它只能定义一次； <pre class="prettyprint"><code class=" hljs lasso">var a = 4; let b = 5; var a = 6; let b = 7; //Uncaught SyntaxError: Identifier 'b' has already been declared console.log(a); //6</code></pre></li> <li><code>let</code>的作用域是块（也是就是大括号包裹的范围），而<code>var</code>的作用域是函数 <pre class="prettyprint"><code class=" hljs lasso">var a = 5; var b = 10; if(a === 5) { let a = 4; var b = 1; console.log(a); //4 console.log(b); //1 } console.log(a); //5 console.log(b); //1</code></pre></li> </ol></li> <li>你所知道的前端性能优化方法有哪些？</li> <li>对于CSS、JS文件进行压缩的原理是什么？ 压缩主要是通过删除注释、换行符和无用的空白符等，在js中还可能会替换掉变量名，将长的变量名替换成如<code>'a'</code>，<code>'b'</code>，<code>'c'</code>这种尽可能短的变量名，从而达到将文件压缩变小的目的。</li> <li>XHR.readyState的状态有哪些？ XHR的状态总共有5个，分别为： 0 — <code>UNSENT</code> 请求未初始化，<code>XHR</code>对象已经成功构造，但是<code>open()</code>方法还未被调用； 1 — <code>OPENED</code> 请求已建立但未发送。<code>open()</code>方法已成功调用，但<code>send()</code>方法还未被调用，注意：只有<code>xhr</code>处于<code>OPENED</code>状态，才可以调用<code>xhr.setRequestHeader()</code>和<code>xhr.send()</code>，否则会报错； 2 — <code>HEADERS_RECEIVED</code> 已获取响应头。<code>send()</code>方法已被调用，响应头和响应状态已经返回； 3 — <code>LOADING</code> 正在下载响应体。响应体正在下载中，此状态下通过<code>xhr.response</code>可能已经有了响应数据； 4 — <code>DONE</code> 整个数据传输过程结束，不管本次请求是成功还是失败。 <pre class="prettyprint"><code class=" hljs javascript">var xhr = new XMLHttpRequest(); xhr.open('GET/POST', 'http://a.com/index.html'); xhr.onreadyStateChange = function(){ if(xhr.readyState === 4) { if(xhr.status === 200) { //doSomething } } } xhr.send();</code></pre></li> <li>事件有哪几个阶段？ js事件分为三个阶段，分别是事件捕获、目标和事件冒泡阶段。</li> <li>什么是闭包？ 闭包（closure）是指有权访问另一个函数作用域中的变量的函数。创建闭包常见的形式是在函数内部创建一个函数，通过返回这个函数可以访问到包括它的函数的局部变量。 闭包有三个特性： <ol> <li>函数嵌套函数；</li> <li>函数内部可以引用函数外部的参数和变量；</li> <li>参数和变量不会被垃圾回收机制回收。</li> </ol> 使用闭包的好处： <ol> <li>希望一个变量长期保存在内存中；</li> <li>避免全局变量的污染；</li> <li>私有成员的存在。</li> </ol> 闭包带来的问题： 闭包的缺点是常驻内存，会增大内存使用量，使用不当可能会造成内存泄露。例如： <pre class="prettyprint"><code class=" hljs javascript">function closure() { var oDiv = document.getElementById('oDiv'); //oDiv用完之后一直保存在内存中 oDiv.onclick = function() { alert(oDiv.innerHTML); //造成内存泄露 } } //正确的做法 function closure(){ var oDiv = document.getElementById('oDiv'); var html = oDiv.innerHTML; oDiv.onclick = function() { alert(html); } oDiv = null; //解除引用 }</code></pre></li> <li>AMD、CMD、UMD和Commonjs的区别？ <code>Commonjs</code>是服务器端模块的规范，<code>Nodejs</code>采用的就是这个规范，它的加载是同步的，只有在加载完成后才能执行后面的操作； <code>AMD（Asynchronous Module Definition）</code>是<code>Requirejs</code>在推广过程中对模块定义的规范化产出，它是浏览器第一原则发展，异步加载模块，使用<code>define</code>方法来定义模块； <code>CMD(Common Module Definition)</code>是<code>Seajs</code>在推广过程中对模块定义的规范化产出。对于依赖的模块，<code>AMD</code>是提前执行，而<code>CMD</code>是延迟执行；<code>CMD</code>是依赖就近，按需加载，而<code>AMD</code>是依赖前置； <code>UMD</code>是<code>AMD</code>和<code>Commonjs</code>的糅合，<code>UMD</code>会先判断是否支持<code>Nodejs</code>的模块（<code>exports</code>是否存在），如果存在则使用<code>Nodejs</code>模块模式，否则，再判断是否支持<code>AMD</code>（<code>define</code>是否存在），如果存在，则使用<code>AMD</code>模式加载模块。 详见这里和这里</li> <li>从输入URL到页面完全呈现，经历了哪些过程？ </li> <li>处理异步的方法有哪些？</li> <li>数组方法中的<code>map</code>、<code>every</code>、<code>some</code>、<code>forEach</code>、<code>filter</code>、<code>reduce</code>的区别？ <code>every</code>和<code>some</code>返回的是布尔值，其中<code>every</code>是数组中的每一项都符合函数中的条件时返回<code>true</code>，<code>some</code>是只要数组中有一项满足函数中的条件就返回true； <code>map</code>返回一个新数组，新数组每一项为调用函数后的结果； <code>filter</code>返回数组中符合函数条件的数组，一般用于对数组进行过滤操作； <code>forEach</code>没有返回值，对数组中的每一项运行传入的函数； <code>reduce</code>迭代数组的每一项，然后构建一个返回的值。接收一个<code>callBack</code>函数，该函数接收四个参数： <ul> <li><code>prev</code> : 上一次调用回调返回的值，或者是提供的初始值（<code>initialValue</code>，作为<code>reduce</code>的第二个参数传入，如果不传，第一次的<code>prev</code>为数组的第一项，即迭代从第二项开始）；</li> <li><code>cur</code> : 数组中当前被处理的数组项；</li> <li><code>index</code> : 当前被处理项在数组中的索引；</li> <li><code>array</code> : 调用<code>reduce()</code>方法的数组。 <pre class="prettyprint"><code class=" hljs delphi">//数组中所有项的求和 var values = [1, 2, 3, 4, 5]; var sum1 = values.reduce(function(prev, cur, index, array) { return prev + cur; }); console.log(sum1); //15 var sum2 = values.reduce(function(prev, cur, index, array) { return prev + cur; }, 10); console.log(sum2); //25</code></pre></li> </ul> 与<code>reduce</code>相对应的还有一个<code>reduceRight</code>方法，顾名思义，它是从数组的最后一项开始往前迭代数组的每一项。</li> <li>call、apply、bind的区别？ 三者都是用来改变函数的this对象的指向的，第一个参数都是<code>this</code>要指向的对象，即想要指定的上下文。区别在于： <code>call</code>传入参数数量不固定，第二部分参数要一个一个传，用<code>,</code>隔开； <code>apply</code>接收两个参数，第二个参数为一个带下标的集合，可以为数组，也可以为类数组； <code>bind</code>只能传一个参数，它返回一个改变了上下文的函数副本，便于稍后调用，而call和apply都是立即调用。</li> <li>js设计模式有哪些？</li> </ul> <h3 id="http">HTTP</h3> <ul> <li>谈一谈对前端安全的理解，有什么？怎么防范？ 前端安全问题主要有XSS、CSRF。 XSS（Cross Site Scripting）：跨站脚本攻击 它可以简单地理解为一种JavaScript脚本注入。通过在目标页面恶意注入JavaScript脚本，盗取用户的cookie信息等。 例如，在前端get一个请求： <pre class="prettyprint"><code class=" hljs avrasm">www.a.com/xss.php?name=userA</code></pre> 后台处理： <pre class="prettyprint"><code class=" hljs xml"><?php echo 'hello'.$_GET['name']; </code></pre> 代码本意是通过queryString的name值来动态展示用户名，但是由于未对name值做编码校验，当链接为： <pre class="prettyprint"><code class=" hljs xml">www.a.com/xss.php?name=<script>alert(document.cookie);</script></code></pre> XSS的防护措施： <ol> <li>过滤转义输入输出</li> <li>尽量避免<code>eval</code>、<code>new Function</code>等执行字符串的方法，除非确定字符串与用户输入无关</li> <li>使用cookie的httpOnly属性，让js无法读取cookie</li> <li>使用innerHTML、document.write的时候，如果数据是用户输入的，那么需要对关键字符进行过滤与转义</li> </ol> CSRF（Cross-site Request Forgery）：跨站请求伪造 网站的一些提交行为，被黑客利用，在你访问黑客的网站的时候进行操作，会被操作到其他网站上。 CSRF防御措施： <ol> <li>检测http referer是否是同域名；</li> <li>避免登录的session长时间存储在客户端</li> <li>关键请求使用验证码或token机制。 </li> </ol> 延伸： 什么是token机制？它保存在哪儿？ token机制的执行逻辑如下图所示： 浅谈CSRF攻击</li> <li>HTTP和HTTPS 的区别？HTTPS是如何进行加密的？ HTTPS协议是有SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议，要比HTTP协议安全。它们的主要区别包括： <ol> <li>https协议需要到ca申请认证，一般免费证书较少，因而需要一定的费用；</li> <li>http是超文本传输协议，信息是明文传输，https是具有安全性的SSL加密传输协议；</li> <li>http和https使用的是完全不同的连接方式，用的端口号也不同，前者是80，后者是443；</li> <li>http的连接很简单，是无状态的；https协议是SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议，比https协议安全。</li> </ol> https加密、解密及验证过程，如下图所示： <a href="http://img.e-com-net.com/image/info8/c7df2b0c5a6a409380cecb23c4d9c51e.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/c7df2b0c5a6a409380cecb23c4d9c51e.jpg" alt="前端常见笔面试题总结_第4张图片" title="" width="520" height="456" style="border:1px solid black;"></a> <ol> <li>客户端发起https请求；</li> <li>服务器端接收到请求后产生一对公匙和私匙；</li> <li>服务器端将公匙（证书）传送给客户端；</li> <li>客户端解析证书，如果证书无效，则弹出警告框，如果证书没有问题，则产生一个随机值，并将这个随机值用证书（公匙）进行加密；</li> <li>客户端将机密后的随机值发送给服务器端；</li> <li>服务器端用私匙进行解密，得到客户端传过来的随机值，并用这个随机值对要传输的内容进行加密处理；</li> <li>服务器端将机密后的信息传输给客户端；</li> <li>客户端用之前生成的随机值解密传过来的信息，至此完成了整个的加密传输过程。</li> </ol> 扩展 http与https的区别 【上】安全HTTPS-全面详解对称加密，非对称加密，数字签名，数字证书和HTTPS 【下】安全HTTPS-全面详解对称加密，非对称加密，数字签名，数字证书和HTTPS</li> <li>TCP和UDP的区别？ TCP和UDP都是OSI模型中的运输层协议。它们的主要区别包括： <ol> <li>TCP面向连接（如打电话要先拨号建立连接）；UDP是无连接的，即发送数据之前不需要建立连接</li> <li>TCP提供可靠的服务，也就是说通过TCP连接传输的数据，无差错，不丢失，不重复，且按序到达；UDP尽最大努力交付，即不保证可靠交付，有可能会丢包</li> <li>TCP面向字节流，实际上是TCP把数据看成一连串无结构的字节流；UDP是面向报文的，UDP没有阻塞控制，因此网络出现拥塞不会使源主机的发送效率降低（对实时应用很有用，如IP电话，实时视频会议等）</li> <li>每一条TCP连接只能是点到点的；UDP支持一对一，一对多，多对一和多对多的交互通信</li> <li>TCP首部开销20字节；UDP首部开销小，只有8个字节</li> <li>TCP的逻辑通信信道是全双工的可靠信道；UDP则是不可靠信道</li> </ol> TCP和UDP的最完整的区别</li> <li>http状态码知道哪些？301和302的区别？200和304的区别？</li> <li>如何强制使用浏览器缓存？</li> <li>你对CDN有哪些了解？</li> </ul> <h3 id="一些小的知识点">一些小的知识点</h3> </div> </div> </div> </div> </div>  <div id="SOHUCS" sid="1175065402003238912"></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">  <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>  <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>  <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">你可能感兴趣的:(web前端面试题)</h4> <div id="paradigm-article-related"> <div class="recommend-post mb30"> <ul class="widget-links"> <li><a href="/article/1890793818513534976.htm" title="Web前端面试题(持续更新中)" target="_blank">Web前端面试题(持续更新中)</a> Bearin <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/web/1.htm">web</a> <div>一、闭包是什么JS中内层函数可以访问外层函数的变量，使内部私有变量不受外界干扰，起到保护和保存的作用，我们把这个特性称作闭包。好处：1.隔离作用域，保护私有变量；有了闭包才有局部变量，要不然都是全局变量了。2.让我们可以使用回调，操作其他函数内部；3.变量长期驻扎在内存中，不会被内存回收机制回收，即延长变量的生命周期；坏处：内层函数引用外层函数变量，内层函数占用内存。如果不释放内存，过多时，易引起</div> </li> <li><a href="/article/1831717080584515584.htm" title="Web前端最新2024 跳槽涨薪必不可少面试通关宝典 —— css 篇(1)，Web前端面试题初级" target="_blank">Web前端最新2024 跳槽涨薪必不可少面试通关宝典 —— css 篇(1)，Web前端面试题初级</a> 2401_84433769 <a class="tag" taget="_blank" href="/search/%E7%A8%8B%E5%BA%8F%E5%91%98/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/%E5%AD%A6%E4%B9%A0/1.htm">学习</a> <div>结尾正式学习前端大概3年多了，很早就想整理这个书单了，因为常常会有朋友问，前端该如何学习，学习前端该看哪些书，我就讲讲我学习的道路中看的一些书，虽然整理的书不多，但是每一本都是那种看一本就秒不绝口的感觉。以下大部分是我看过的，或者说身边的人推荐的书籍，每一本我都有些相关的推荐语，如果你有看到更好的书欢迎推荐呀。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】取消盒子的</div> </li> <li><a href="/article/1829250106055028736.htm" title="【面试题】JavaScript 中 try" target="_blank">【面试题】JavaScript 中 try</a> 2401_84438488 <a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/ecmascript/1.htm">ecmascript</a> <div>地址：前端面试题库web前端面试题库VSjava后端面试题库大全作为一位Web前端工程师，JavaScript中的try...catch是我们常用的特性之一。try...catch可以捕获代码中的异常并防止应用程序崩溃。但是try...catch不仅仅是简单地捕获异常。本文我将分享10个有用的try...catch使用技巧，让你在处理异常时更加得心应手。1.捕获所有异常如果你想捕获代码中所有可能的</div> </li> <li><a href="/article/1826846473006968832.htm" title="应届生web前端面试题_史上最全前端面试题(含答案)" target="_blank">应届生web前端面试题_史上最全前端面试题(含答案)</a> 秦天生 <a class="tag" taget="_blank" href="/search/%E5%BA%94%E5%B1%8A%E7%94%9Fweb%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95%E9%A2%98/1.htm">应届生web前端面试题</a> <div>2015-10-3006:30:03阅读(385)HTML+CSS1.对WEB标准以及W3C的理解与认识标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外链css和js脚本、结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更广泛的设备所访问、更少的代码和组件，容易维护、改版方便，不需要变动页面内容、提供打印版本而不需要复制内容、提高网站易用性；2.xhtml</div> </li> <li><a href="/article/1826842440653434880.htm" title="搜集来的web前端面试题" target="_blank">搜集来的web前端面试题</a> Mirana_77 <a class="tag" taget="_blank" href="/search/web%E5%89%8D%E7%AB%AF/1.htm">web前端</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95%E9%A2%98/1.htm">面试题</a> <div>周五要面试web前端orz搜集下面试题1、什么是盒子模型？在网页中，一个元素占有空间的大小由几个部分构成，其中包括元素的内容（content），元素的内边距（padding），元素的边框（border），元素的外边距（margin）四个部分。这四个部分占有的空间中，有的部分可以显示相应的内容，而有的部分只用来分隔相邻的区域或区域。4个部分一起构成了css中元素的盒模型。2、行内元素有哪些？块级元素</div> </li> <li><a href="/article/1826841179342336000.htm" title="Web前端面试题总结" target="_blank">Web前端面试题总结</a> mikelkl <a class="tag" taget="_blank" href="/search/web%E5%89%8D%E7%AB%AF/1.htm">web前端</a><a class="tag" taget="_blank" href="/search/web%E5%89%8D%E7%AB%AF/1.htm">web前端</a> <div>HTML+CSS1.对WEB标准以及W3C的理解与认识标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外链css和js脚本、结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更广泛的设备所访问、更少的代码和组件，容易维护、改版方便，不需要变动页面内容、提供打印版本而不需要复制内容、提高网站易用性；2.xhtml和html有什么区别HTML是一种基本的WEB网页</div> </li> <li><a href="/article/1826425880184975360.htm" title="2024 web前端面试题（持续更新）" target="_blank">2024 web前端面试题（持续更新）</a> Max·米 <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/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a> <div>1.js有哪些基本数据类型Undefined、Null、Boolean、Number、String、Symbol(es6新增)、Bigint(谷歌67版本新增)2.js有哪些引用数据类型Object(对象)、Array(数组)、Function(函数)3.js有哪些内置对象？Object、Array、Boolean、Number，String，date，math，error，promise，reg</div> </li> <li><a href="/article/1754931717325471744.htm" title="前端常见面试题集合" target="_blank">前端常见面试题集合</a> 洪洪呀 <a class="tag" taget="_blank" href="/search/web%E5%89%8D%E7%AB%AF/1.htm">web前端</a><a class="tag" taget="_blank" href="/search/vue/1.htm">vue</a> <div>web前端面试题大厂小厂均适用盒模型盒模型的组成,有里向外content,padding,border,margin清除浮动的方式使用position:absolute/fixed使用display:inline-block/table使用float元素使用overflow!==visiblecss常用布局方式常见的有div布局css布局flex布局table布局流式布局响应式布局html5的新特</div> </li> <li><a href="/article/1753799740761325568.htm" title="Web前端面试题（更新中...）" target="_blank">Web前端面试题（更新中...）</a> 冷七七- <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/react.js/1.htm">react.js</a> <div>1、React生命周期中有哪些坑？如何避免？getDerivedStateFromProps容易编写反模式代码，使受控组件和非受控组件区分模糊componentWillMount在React中已被标记弃用，不推荐使用，主要的原因是因为新的异步架构会导致它被多次调用，所以网络请求以及事件绑定应该放到componentDidMount中componentWillReceiveProps同样也被标记弃用</div> </li> <li><a href="/article/1749998090888167424.htm" title="web前端面试题-移动开发篇（持续更新...）" target="_blank">web前端面试题-移动开发篇（持续更新...）</a> 终身成长人格 <div>继续分享我整理了5年的面试题html：https://www.jianshu.com/p/aa218e2b8fe1css：https://www.jianshu.com/p/0f5571b75fb5javascript：https://www.jianshu.com/p/fe1089a4ab1ajquery：https://www.jianshu.com/p/363fc2615cfe另外附上课程链</div> </li> <li><a href="/article/1748055971751542784.htm" title="web前端面试题-JavaScript 第一部分" target="_blank">web前端面试题-JavaScript 第一部分</a> 圣京都 <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95%E9%A2%98/1.htm">面试题</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a> <div>web前端面试题-JavaScript第一部分1JavaScript的组成2JS的基本数据类型和引用数据类型3检测浏览器版本版本有哪些方式？4介绍JS有哪些内置对象？5说几条写JavaScript的基本规范？6如何编写高性能的JavaScript？7DOM元素e的e.getAttribute(propName)和e.propName有什么区别和联系8offsetWidth/offsetHeight</div> </li> <li><a href="/article/1747447523649273856.htm" title="web前端面试题对答篇：HTTP fetch发送2次请求的原因？" target="_blank">web前端面试题对答篇：HTTP fetch发送2次请求的原因？</a> 张培跃 <div>HTTPfetch发送2次请求的原因？面对这道出现频率较高的面试题，我想说的是：发送两次请求的情况确实存在，但这与你所使用的是不是http协议，所采用的是不是fetch真的没有一毛钱关系！接下来，咱们可以通过代码一一去验证……一、准备工作1、创建一个文件夹zhangpeiyue2、在zhangpeiyue文件夹内创建两个文件：server.js与index.htmlserver.js：搭建一个ex</div> </li> <li><a href="/article/1746360136613511168.htm" title="Web前端面试题学习：实现数字千分位用逗号分割" target="_blank">Web前端面试题学习：实现数字千分位用逗号分割</a> WYF <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95%E5%AD%A6%E4%B9%A0/1.htm">前端面试学习</a><a class="tag" taget="_blank" href="/search/%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F/1.htm">正则表达式</a><a class="tag" taget="_blank" href="/search/%E5%AD%97%E7%AC%A6%E4%B8%B2/1.htm">字符串</a> <div>方法一：toLocaleString()vara=8462948.24;b.toLocaleString();//8,462,948.24方法二：使用正则表达式varnum=846294831;varreg=/\d{1,3}(?=(\d{3})+$)/g;(num+'').replace(reg,'$&,');匹配规则：正则表达式\d{1,3}(?=(\d{3})+$)表示前面有1~3个数字，后面</div> </li> <li><a href="/article/1740856953606782976.htm" title="web前端面试题@十三（浏览器渲染页面的原理及流程、call,apply和bind的区别及扩展）" target="_blank">web前端面试题@十三（浏览器渲染页面的原理及流程、call,apply和bind的区别及扩展）</a> 王芃皓 <div>一、浏览器渲染页面的原理及流程浏览器将域名通过网络通信从服务器拿到html文件后，如何渲染页面呢？1.根据html文件构建DOM树和CSSOM树。构建DOM树期间，如果遇到JS，阻塞DOM树及CSSOM树的构建，优先加载JS文件，加载完毕，再继续构建DOM树及CSSOM树。2.构建渲染树（RenderTree）。构建渲染树，根据渲染树计算每个可见元素的布局，并输出到绘制流程，将像素渲染到屏幕上。（</div> </li> <li><a href="/article/1738098879510929408.htm" title="web前端面试题目--css篇（2019年实战整理）" target="_blank">web前端面试题目--css篇（2019年实战整理）</a> 会飞的大白鲨 <div>css篇一、css3的新特性（不列全部，捡重点回答）1、CSS3选择器:last-child、nth-child(n)、nth-last-child(n)等。点此查看更多2、@Font-face（加载字体样式）3、Transition,Transform和Animation（动画相关）这三个特性是CSS3新增的和动画相关的特性。TransitionTransition可以在当元素从一种样式变换为另</div> </li> <li><a href="/article/1737889123739426816.htm" title="小猿圈web前端面试题汇总" target="_blank">小猿圈web前端面试题汇总</a> 小猿圈IT教育 <div>现如今开发语言从最早的iOS、Android发展到了java、python、linux、html5多种多样，学习的人群也是越来越多，程序员是高薪职业，所以很多年轻的大学生以及高中生都会选择自学，而学习web前端开发的朋友也是相对人群较多的群体，但是web前端开发工程师仍旧供不应求，那么为什么学习的人那么多，但是岗位还没有得到满足呢，是以为大部分程序员只是会写，面试的时候笔试就被poss了，下面小猿</div> </li> <li><a href="/article/1727504687457972224.htm" title="【面试题】for...in 和 for...of 的区别" target="_blank">【面试题】for...in 和 for...of 的区别</a> 前端技术栈 <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95%E9%A2%98/1.htm">前端面试题</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</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%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>给大家推荐一个实用面试题库1、前端面试题库（面试必备）推荐：★★★★★地址：web前端面试题库JavaScript是一门强大而灵活的编程语言，提供了多种迭代对象的方式。两个常见的迭代方式是for...in和for...of循环。这两种循环用于遍历对象和数组中的元素，但它们有许多重要的区别和适用场景。在本文中，我们将深入探讨for...in和for...of循环的区别，以及何时使用它们。1.for.</div> </li> <li><a href="/article/1725944379685810176.htm" title="小猿圈WEB前端面试题之AJAX面试题" target="_blank">小猿圈WEB前端面试题之AJAX面试题</a> 小猿圈IT教育 <div>金三银四已经过去了，你升值加薪了吗？你重新找工作了吗？你跳槽了吗？你面试的时候紧张了吗啊？你注意过面试管问你的问题了吗？小猿圈web前端讲师分享WEB前端面试题之AJAX面试题，希望对小伙伴们有所帮助。1，Ajax是什么?如何创建一个Ajax？ajax是一种创建交互式网页的计算，ajax的全称：AsynchronousJavascriptAndXML。异步传输+js+xml。所谓异步，在这里简单地</div> </li> <li><a href="/article/1725401749516267520.htm" title="高频CSS面试题" target="_blank">高频CSS面试题</a> 前端技术栈 <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95%E9%A2%98/1.htm">前端面试题</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>给大家推荐一个实用面试题库1、前端面试题库（面试必备）推荐：★★★★★地址：web前端面试题库BFC块级格式上下文(blockformatcontext)是页面一块独立的渲染区域，具有一套独立的渲染规则内部的盒子会在垂直的方向上一个接一个地放置同一个bfc内部相邻的盒子margin会发生重叠，与方向无关每个元素的左外边距和包含块的左边界相接触（从左到右），即使浮动元素也是如此（bfc的子元素不会超</div> </li> <li><a href="/article/1724390852454854656.htm" title="JavaScript中的原型和原型链" target="_blank">JavaScript中的原型和原型链</a> 前端技术栈 <a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%8E%9F%E5%9E%8B%E6%A8%A1%E5%BC%8F/1.htm">原型模式</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>给大家推荐一个实用面试题库1、前端面试题库（面试必备）推荐：★★★★★地址：web前端面试题库原型和原型链是JavaScript中一个重要且常常被误解的概念。它们在理解对象、继承和属性查找时扮演着关键的角色。1.原型：JavaScript对象的基础在JavaScript中，几乎所有的对象都是通过构造函数（constructor）创建的。每个构造函数都有一个特殊的属性称为原型（prototype），</div> </li> <li><a href="/article/1723571002371289088.htm" title="web前端面试题之肉（css）" target="_blank">web前端面试题之肉（css）</a> HerayChen <a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/css3/1.htm">css3</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>CSS复习HTML复习HTML版本HTML4/4.01(SGML)超级xml(可扩展标记语言)XHTML(XML)要求严格，所有的标签、属性小写，属性必须要有值HTML5HTML4XHTMLHTML5标签允许不结束标签必须结束标签允许不结束属性不用带引号属性必须带引号属性不用带引号标签属性可大写标签属性必须小写且有值标签属性可大写Boolean属性可省略值Boolean属性必须写值Boolean属</div> </li> <li><a href="/article/1721487261696077824.htm" title="提高你的JS技巧，让你的代码更简洁优！" target="_blank">提高你的JS技巧，让你的代码更简洁优！</a> 前端技术栈 <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E9%A2%86%E5%9F%9F/1.htm">前端领域</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/ecmascript/1.htm">ecmascript</a> <div>给大家推荐一个实用面试题库1、前端面试题库（面试必备）推荐：★★★★★地址：web前端面试题库JavaScript中有许多简写技巧可以缩减代码长度、减少冗余并提高代码的可读性和可维护性。以下是20个有效提升效率的JavaScript简写技巧，帮助你编写更优雅的代码！移除数组假值可以使用filter()结合Boolean来简化移除数组假值操作。假值指的是在条件判断中被视为false的值，例如null</div> </li> <li><a href="/article/1720755150420783104.htm" title="js 常用简写技巧（干货满满）" target="_blank">js 常用简写技巧（干货满满）</a> 前端技术栈 <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95%E9%A2%98/1.htm">前端面试题</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</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%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>给大家推荐一个实用面试题库1、前端面试题库（面试必备）推荐：★★★★★地址：web前端面试题库分享一些自己常用的js简写技巧，长期更新，会着重挑选一些实用的简写技巧，使自己的代码更简洁优雅~这里只会收集一些大多数人不知道的用法，但是确实能提高自己的编码技巧，像ES6那些基础的简写语法或者是三目运算符代替ifelse那些我觉得是基础，没必要写在这里浪费精力。注意本篇内容涉及到的语法从ES6到ES11</div> </li> <li><a href="/article/1720408354343432192.htm" title="web前端面试题必备" target="_blank">web前端面试题必备</a> 折海棠赠晩宁. <a class="tag" taget="_blank" href="/search/vue/1.htm">vue</a><a class="tag" taget="_blank" href="/search/js/1.htm">js</a><a class="tag" taget="_blank" href="/search/css3/1.htm">css3</a><a class="tag" taget="_blank" href="/search/vue/1.htm">vue</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a><a class="tag" taget="_blank" href="/search/js/1.htm">js</a> <div>1、vue数据双向绑定原理vue.js是采用数据劫持结合发布者-订阅者的模式的方法，通过Object.defineProperty()来劫持各个属性的Getter、setter，在数据变动时发送消息给订阅者。它实现的整个流程是先为每个vue属性用Object.defineProperty()实现数据劫持，为每个属性分配一个订阅者集合的管理数组dep；然后在编译的时候在该属性的数组dep中添加订阅者</div> </li> <li><a href="/article/1719196256766603264.htm" title="web前端面试题附答案002-说一下react组件间的数据传递" target="_blank">web前端面试题附答案002-说一下react组件间的数据传递</a> 小几米 <div>答：一：其实这个问题已经问了很多年了，但还是有很多人会挂在这道题上。网上的答案也是一搜一大把，如果你用过react做过一两个项目，不是特别小的项目的话，如果你平时认真总结，也能说的差不多。但很明显，前端发展到今天，很多回答是不能满足面试官的胃口的。面试官有的他可能对react也不熟，所以你要回答出你的气场，回答有条理，第一种，第二种等等；面试官可能只是想听一下你的简单回答，那么到目前为止，网上的答</div> </li> <li><a href="/article/1718880139552567296.htm" title="Web前端面试题目汇总" target="_blank">Web前端面试题目汇总</a> weixin_30412167 <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/%E7%BD%91%E7%BB%9C/1.htm">网络</a><a class="tag" taget="_blank" href="/search/ViewUI/1.htm">ViewUI</a> <div>【转载】Web前端面试题目汇总以下是收集一些面试中经常会遇到的经典面试题以及自己面试过程中有一些未解决的问题，通过对知识的整理以及经验的总结，重新巩固自身的前端基础知识，如有错误或更好的答案，欢迎指正，水平有限，望各位不吝指教。:）HTML/CSS部分1、什么是盒子模型？在网页中，一个元素占有空间的大小由几个部分构成，其中包括元素的内容（content），元素的内边距（padding），元素的边框</div> </li> <li><a href="/article/1718308970663325696.htm" title="JavaScript进阶知识汇总~" target="_blank">JavaScript进阶知识汇总~</a> 前端技术栈 <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95%E9%A2%98/1.htm">前端面试题</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%8E%9F%E5%9E%8B%E6%A8%A1%E5%BC%8F/1.htm">原型模式</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>JavaScript进阶给大家推荐一个实用面试题库1、前端面试题库（面试必备）推荐：★★★★★地址：web前端面试题库1.原型链入门1)构造函数当我们自定义一个函数时(箭头函数与生成器函数除外)，这个函数就默认为一个构造函数【虽然它可以当做普通函数来使用】。约定：构造函数通常约定首字母大写；函数对象约定首字母小写；构造函数调用的时候需要在前面加个new操作符；函数对象不需要。==*new一个函数的</div> </li> <li><a href="/article/1717900189139808256.htm" title="vue核心面试题汇总【查缺补漏】" target="_blank">vue核心面试题汇总【查缺补漏】</a> 前端技术栈 <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95%E9%A2%98/1.htm">前端面试题</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>给大家推荐一个实用面试题库1、前端面试题库（面试必备）推荐：★★★★★地址：web前端面试题库很喜欢‘万变不离其宗’这句话，希望在不断的思考和总结中找到Vue中的宗，来解答面试官抛出的各种Vue问题，一起加油~一、MVVM原理在Vue2官方文档中没有找到Vue是MVVM的直接证据，但文档有提到：虽然没有完全遵循MVVM模型，但是Vue的设计也受到了它的启发，因此在文档中经常会使用vm(ViewMo</div> </li> <li><a href="/article/1716477483991248896.htm" title="2023年Web前端面试题（持续更新中ing。。。）" target="_blank">2023年Web前端面试题（持续更新中ing。。。）</a> Dread_lxy <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/css3/1.htm">css3</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a> <div>html+css盒模型分为两种：W3C标准盒模型和IE怪异盒模型WC3:width+heightIE:width+height+padding+bordercontent-box和border-box区别content-box（默认）：宽度和高度之外绘制内边距和边框border-box：宽度和高度之内绘制设定元素的边框及内边距行元素、块级元素、行内块元素有哪些行元素：span、strong、inp</div> </li> <li><a href="/article/1716467854708125696.htm" title="web前端面试题@十八（前端优化★★★★★）" target="_blank">web前端面试题@十八（前端优化★★★★★）</a> 王芃皓 <div>前端优化汇总一、图片处理1、雪碧图CSS雪碧图是以前非常流行的技术，把网站上的一些图片整合到一张单独的图片中，可以减少网站的HTTP请求数量，但是当整合图片比较大时，一次加载比较慢。随着字体图片、SVG图片的流行，该技术渐渐退出了历史舞台2、Base64将图片的内容以Base64格式内嵌到HTML中，可以减少HTTP请求数量。但是，由于Base64编码用8位字符表示信息中的6个位，所以编码后大小大</div> </li> <li><a href="/article/111.htm" title="JAVA基础" target="_blank">JAVA基础</a> 灵静志远 <a class="tag" taget="_blank" href="/search/%E4%BD%8D%E8%BF%90%E7%AE%97/1.htm">位运算</a><a class="tag" taget="_blank" href="/search/%E5%8A%A0%E8%BD%BD/1.htm">加载</a><a class="tag" taget="_blank" href="/search/Date/1.htm">Date</a><a class="tag" taget="_blank" href="/search/%E5%AD%97%E7%AC%A6%E4%B8%B2%E6%B1%A0/1.htm">字符串池</a><a class="tag" taget="_blank" href="/search/%E8%A6%86%E7%9B%96/1.htm">覆盖</a> <div>一、类的初始化顺序 1 （静态变量，静态代码块）-->（变量，初始化块）--> 构造器同一括号里的，根据它们在程序中的顺序来决定。上面所述是同一类中。如果是继承的情况，那就在父类到子类交替初始化。二、String 1 String a = "abc"; JAVA虚拟机首先在字符串池中查找是否已经存在了值为"abc"的对象，根</div> </li> <li><a href="/article/238.htm" title="keepalived实现redis主从高可用" target="_blank">keepalived实现redis主从高可用</a> bylijinnan <a class="tag" taget="_blank" href="/search/redis/1.htm">redis</a> <div>方案说明两台机器（称为A和B），以统一的VIP对外提供服务 1.正常情况下，A和B都启动，B会把A的数据同步过来（B is slave of A） 2.当A挂了后，VIP漂移到B；B的keepalived 通知redis 执行：slaveof no one，由B提供服务 3.当A起来后，VIP不切换，仍在B上面；而A的keepalived 通知redis 执行slaveof B，开始</div> </li> <li><a href="/article/365.htm" title="java文件操作大全" target="_blank">java文件操作大全</a> 0624chenhong <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>最近在博客园看到一篇比较全面的文件操作文章，转过来留着。 http://www.cnblogs.com/zhuocheng/archive/2011/12/12/2285290.html 转自http://blog.sina.com.cn/s/blog_4a9f789a0100ik3p.html 一.获得控制台用户输入的信息 &nbs</div> </li> <li><a href="/article/492.htm" title="android学习任务" target="_blank">android学习任务</a> 不懂事的小屁孩 <a class="tag" taget="_blank" href="/search/%E5%B7%A5%E4%BD%9C/1.htm">工作</a> <div>任务完成情况搞清楚带箭头的pupupwindows和不带的使用已完成熟练使用pupupwindows和alertdialog，并搞清楚两者的区别已完成熟练使用android的线程handler,并敲示例代码进行中了解游戏2048的流程，并完成其代码工作进行中-差几个actionbar 研究一下android的动画效果，写一个实例已完成复习fragem</div> </li> <li><a href="/article/619.htm" title="zoom.js" target="_blank">zoom.js</a> 换个号韩国红果果 <a class="tag" taget="_blank" href="/search/oom/1.htm">oom</a> <div>它的基于bootstrap 的 https://raw.github.com/twbs/bootstrap/master/js/transition.js transition.js模块引用顺序 <link rel="stylesheet" href="style/zoom.css"> <script src=&q</div> </li> <li><a href="/article/746.htm" title="详解Oracle云操作系统Solaris 11.2" target="_blank">详解Oracle云操作系统Solaris 11.2</a> 蓝儿唯美 <a class="tag" taget="_blank" href="/search/Solaris/1.htm">Solaris</a> <div>当Oracle发布Solaris 11时，它将自己的操作系统称为第一个面向云的操作系统。Oracle在发布Solaris 11.2时继续它以云为中心的基调。但是，这些说法没有告诉我们为什么Solaris是配得上云的。幸好，我们不需要等太久。Solaris11.2有4个重要的技术可以在一个有效的云实现中发挥重要作用：OpenStack、内核域、统一存档（UA）和弹性虚拟交换（EVS）。 </div> </li> <li><a href="/article/873.htm" title="spring学习——springmvc（一）" target="_blank">spring学习——springmvc（一）</a> a-john <a class="tag" taget="_blank" href="/search/springMVC/1.htm">springMVC</a> <div>Spring MVC基于模型-视图-控制器（Model-View-Controller，MVC）实现，能够帮助我们构建像Spring框架那样灵活和松耦合的Web应用程序。 1，跟踪Spring MVC的请求请求的第一站是Spring的DispatcherServlet。与大多数基于Java的Web框架一样，Spring MVC所有的请求都会通过一个前端控制器Servlet。前</div> </li> <li><a href="/article/1000.htm" title="hdu4342 History repeat itself-------多校联合五" target="_blank">hdu4342 History repeat itself-------多校联合五</a> aijuans <a class="tag" taget="_blank" href="/search/%E6%95%B0%E8%AE%BA/1.htm">数论</a> <div>水题就不多说什么了。 #include<iostream>#include<cstdlib>#include<stdio.h>#define ll __int64using namespace std;int main(){ int t; ll n; scanf("%d",&t); while(t--) </div> </li> <li><a href="/article/1127.htm" title="EJB和javabean的区别" target="_blank">EJB和javabean的区别</a> asia007 <a class="tag" taget="_blank" href="/search/bean/1.htm">bean</a><a class="tag" taget="_blank" href="/search/ejb/1.htm">ejb</a> <div>EJB不是一般的JavaBean,EJB是企业级JavaBean,EJB一共分为3种,实体Bean,消息Bean,会话Bean,书写EJB是需要遵循一定的规范的,具体规范你可以参考相关的资料.另外,要运行EJB,你需要相应的EJB容器,比如Weblogic,Jboss等,而JavaBean不需要,只需要安装Tomcat就可以了 1.EJB用于服务端应用开发, 而JavaBeans</div> </li> <li><a href="/article/1254.htm" title="Struts的action和Result总结" target="_blank">Struts的action和Result总结</a> 百合不是茶 <a class="tag" taget="_blank" href="/search/struts/1.htm">struts</a><a class="tag" taget="_blank" href="/search/Action%E9%85%8D%E7%BD%AE/1.htm">Action配置</a><a class="tag" taget="_blank" href="/search/Result%E9%85%8D%E7%BD%AE/1.htm">Result配置</a> <div> 一:Action的配置详解: 下面是一个Struts中一个空的Struts.xml的配置文件 <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE struts PUBLIC &quo</div> </li> <li><a href="/article/1381.htm" title="如何带好自已的团队" target="_blank">如何带好自已的团队</a> bijian1013 <a class="tag" taget="_blank" href="/search/%E9%A1%B9%E7%9B%AE%E7%AE%A1%E7%90%86/1.htm">项目管理</a><a class="tag" taget="_blank" href="/search/%E5%9B%A2%E9%98%9F%E7%AE%A1%E7%90%86/1.htm">团队管理</a><a class="tag" taget="_blank" href="/search/%E5%9B%A2%E9%98%9F/1.htm">团队</a> <div>在网上看到博客" 怎么才能让团队成员好好干活"的评论，觉得写的比较好。原文如下：我做团队管理有几年了吧，我和你分享一下我认为带好团队的几点： 1.诚信对团队内成员，无论是技术研究、交流、问题探讨，要尽可能的保持一种诚信的态度，用心去做好，你的团队会感觉得到。 2.努力提</div> </li> <li><a href="/article/1508.htm" title="Java代码混淆工具" target="_blank">Java代码混淆工具</a> sunjing <a class="tag" taget="_blank" href="/search/ProGuard/1.htm">ProGuard</a> <div>Open Source Obfuscators ProGuard http://java-source.net/open-source/obfuscators/proguardProGuard is a free Java class file shrinker and obfuscator. It can detect and remove unused classes, fields, m</div> </li> <li><a href="/article/1635.htm" title="【Redis三】基于Redis sentinel的自动failover主从复制" target="_blank">【Redis三】基于Redis sentinel的自动failover主从复制</a> bit1129 <a class="tag" taget="_blank" href="/search/redis/1.htm">redis</a> <div>在第二篇中使用2.8.17搭建了主从复制，但是它存在Master单点问题，为了解决这个问题，Redis从2.6开始引入sentinel，用于监控和管理Redis的主从复制环境，进行自动failover，即Master挂了后，sentinel自动从从服务器选出一个Master使主从复制集群仍然可以工作，如果Master醒来再次加入集群，只能以从服务器的形式工作。什么是Sentine</div> </li> <li><a href="/article/1762.htm" title="使用代理实现Hibernate Dao层自动事务" target="_blank">使用代理实现Hibernate Dao层自动事务</a> 白糖_ <a class="tag" taget="_blank" href="/search/DAO/1.htm">DAO</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/AOP/1.htm">AOP</a><a class="tag" taget="_blank" href="/search/%E6%A1%86%E6%9E%B6/1.htm">框架</a><a class="tag" taget="_blank" href="/search/Hibernate/1.htm">Hibernate</a> <div>都说spring利用AOP实现自动事务处理机制非常好，但在只有hibernate这个框架情况下，我们开启session、管理事务就往往很麻烦。 public void save(Object obj){ Session session = this.getSession(); Transaction tran = session.beginTransaction(); try </div> </li> <li><a href="/article/1889.htm" title="maven3实战读书笔记" target="_blank">maven3实战读书笔记</a> braveCS <a class="tag" taget="_blank" href="/search/maven3/1.htm">maven3</a> <div>Maven简介是什么？ Is a software project management and comprehension tool.项目管理工具是基于POM概念(工程对象模型) [设计重复、编码重复、文档重复、构建重复，maven最大化消除了构建的重复] [与XP：简单、交流与反馈；测试驱动开发、十分钟构建、持续集成、富有信息的工作区] 功能： </div> </li> <li><a href="/article/2016.htm" title="编程之美-子数组的最大乘积" target="_blank">编程之美-子数组的最大乘积</a> bylijinnan <a class="tag" taget="_blank" href="/search/%E7%BC%96%E7%A8%8B%E4%B9%8B%E7%BE%8E/1.htm">编程之美</a> <div> public class MaxProduct { /** * 编程之美子数组的最大乘积 * 题目: 给定一个长度为N的整数数组，只允许使用乘法，不能用除法，计算任意N-1个数的组合中乘积中最大的一组，并写出算法的时间复杂度。 * 以下程序对应书上两种方法，求得“乘积中最大的一组”的乘积——都是有溢出的可能的。 * 但按题目的意思，是要求得这个子数组，而不</div> </li> <li><a href="/article/2143.htm" title="读书笔记-2" target="_blank">读书笔记-2</a> chengxuyuancsdn <a class="tag" taget="_blank" href="/search/%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0/1.htm">读书笔记</a> <div>1、反射 2、oracle年-月-日时-分-秒 3、oracle创建有参、无参函数 4、oracle行转列 5、Struts2拦截器 6、Filter过滤器(web.xml) 1、反射 (1)检查类的结构在java.lang.reflect包里有3个类Field,Method,Constructor分别用于描述类的域、方法和构造器。 2、oracle年月日时分秒 s</div> </li> <li><a href="/article/2270.htm" title="[求学与房地产]慎重选择IT培训学校" target="_blank">[求学与房地产]慎重选择IT培训学校</a> comsci <a class="tag" taget="_blank" href="/search/it/1.htm">it</a> <div> 关于培训学校的教学和教师的问题,我们就不讨论了,我主要关心的是这个问题培训学校的教学楼和宿舍的环境和稳定性问题我们大家都知道，房子是一个比较昂贵的东西，特别是那种能够当教室的房子... &nb</div> </li> <li><a href="/article/2397.htm" title="RMAN配置中通道(CHANNEL)相关参数 PARALLELISM 、FILESPERSET的关系" target="_blank">RMAN配置中通道(CHANNEL)相关参数 PARALLELISM 、FILESPERSET的关系</a> daizj <a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a><a class="tag" taget="_blank" href="/search/rman/1.htm">rman</a><a class="tag" taget="_blank" href="/search/filesperset/1.htm">filesperset</a><a class="tag" taget="_blank" href="/search/PARALLELISM/1.htm">PARALLELISM</a> <div>RMAN配置中通道(CHANNEL)相关参数 PARALLELISM 、FILESPERSET的关系转 PARALLELISM --- 我们还可以通过parallelism参数来指定同时"自动"创建多少个通道： RMAN > configure device type disk parallelism 3 ; 表示启动三个通道，可以加快备份恢复的速度。 </div> </li> <li><a href="/article/2524.htm" title="简单排序:冒泡排序" target="_blank">简单排序:冒泡排序</a> dieslrae <a class="tag" taget="_blank" href="/search/%E5%86%92%E6%B3%A1%E6%8E%92%E5%BA%8F/1.htm">冒泡排序</a> <div> public void bubbleSort(int[] array){ for(int i=1;i<array.length;i++){ for(int k=0;k<array.length-i;k++){ if(array[k] > array[k+1]){ </div> </li> <li><a href="/article/2651.htm" title="初二上学期难记单词三" target="_blank">初二上学期难记单词三</a> dcj3sjt126com <a class="tag" taget="_blank" href="/search/sciet/1.htm">sciet</a> <div>concert 音乐会 tonight 今晚 famous 有名的；著名的 song 歌曲 thousand 千 accident 事故；灾难 careless 粗心的，大意的 break 折断；断裂；破碎 heart 心（脏） happen 偶尔发生，碰巧 tourist 旅游者；观光者 science （自然）科学 marry 结婚 subject 题目；</div> </li> <li><a href="/article/2778.htm" title="I.安装Memcahce 1. 安装依赖包libevent Memcache需要安装libevent,所以安装前可能需要执行 Shell代码收藏代码" target="_blank">I.安装Memcahce 1. 安装依赖包libevent Memcache需要安装libevent,所以安装前可能需要执行 Shell代码收藏代码</a> dcj3sjt126com <a class="tag" taget="_blank" href="/search/redis/1.htm">redis</a> <div>wget http://download.redis.io/redis-stable.tar.gz tar xvzf redis-stable.tar.gz cd redis-stable make 前面3步应该没有问题，主要的问题是执行make的时候，出现了异常。异常一： make[2]: cc: Command not found 异常原因：没有安装g</div> </li> <li><a href="/article/2905.htm" title="并发容器" target="_blank">并发容器</a> shuizhaosi888 <a class="tag" taget="_blank" href="/search/%E5%B9%B6%E5%8F%91%E5%AE%B9%E5%99%A8/1.htm">并发容器</a> <div> 通过并发容器来改善同步容器的性能，同步容器将所有对容器状态的访问都串行化，来实现线程安全，这种方式严重降低并发性，当多个线程访问时，吞吐量严重降低。并发容器ConcurrentHashMap 替代同步基于散列的Map，通过Lock控制。 &nb</div> </li> <li><a href="/article/3032.htm" title="Spring Security（12）——Remember-Me功能" target="_blank">Spring Security（12）——Remember-Me功能</a> 234390216 <a class="tag" taget="_blank" href="/search/Spring+Security/1.htm">Spring Security</a><a class="tag" taget="_blank" href="/search/Remember+Me/1.htm">Remember Me</a><a class="tag" taget="_blank" href="/search/%E8%AE%B0%E4%BD%8F%E6%88%91/1.htm">记住我</a> <div>Remember-Me功能目录 1.1 概述 1.2 基于简单加密token的方法 1.3 基于持久化token的方法 1.4 Remember-Me相关接口和实现</div> </li> <li><a href="/article/3159.htm" title="位运算" target="_blank">位运算</a> 焦志广 <a class="tag" taget="_blank" href="/search/%E4%BD%8D%E8%BF%90%E7%AE%97/1.htm">位运算</a> <div> 一、位运算符Ｃ语言提供了六种位运算符： & 按位与 | 按位或 ^ 按位异或 ~ 取反 << 左移 >> 右移 1. 按位与运算按位与运算符"&"是双目运算符。其功能是参与运算的两数各对应的二进位相与。只有对应的两个二进位均为1时，结果位才为1 ，否则为0。参与运算的数以补码方式出现。例如：9&am</div> </li> <li><a href="/article/3286.htm" title="nodejs 数据库连接 mongodb mysql" target="_blank">nodejs 数据库连接 mongodb mysql</a> liguangsong <a class="tag" taget="_blank" href="/search/mongodb/1.htm">mongodb</a><a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a><a class="tag" taget="_blank" href="/search/node/1.htm">node</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93%E8%BF%9E%E6%8E%A5/1.htm">数据库连接</a> <div>1.mysql 连接 package.json中dependencies加入 "mysql":"~2.7.0" 执行 npm install 在config 下创建文件 database.js </div> </li> <li><a href="/article/3413.htm" title="java动态编译" target="_blank">java动态编译</a> olive6615 <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/HotSpot/1.htm">HotSpot</a><a class="tag" taget="_blank" href="/search/jvm/1.htm">jvm</a><a class="tag" taget="_blank" href="/search/%E5%8A%A8%E6%80%81%E7%BC%96%E8%AF%91/1.htm">动态编译</a> <div> 在HotSpot虚拟机中，有两个技术是至关重要的，即动态编译(Dynamic compilation)和Profiling。 HotSpot是如何动态编译Javad的bytecode呢？Java bytecode是以解释方式被load到虚拟机的。HotSpot里有一个运行监视器，即Profile Monitor,专门监视</div> </li> <li><a href="/article/3540.htm" title="Storm0.9.5的集群部署配置优化" target="_blank">Storm0.9.5的集群部署配置优化</a> roadrunners <a class="tag" taget="_blank" href="/search/%E4%BC%98%E5%8C%96/1.htm">优化</a><a class="tag" taget="_blank" href="/search/storm.yaml/1.htm">storm.yaml</a> <div>nimbus结点配置（storm.yaml）信息： # Licensed to the Apache Software Foundation (ASF) under one # or more contributor license agreements. See the NOTICE file # distributed with this work for additional inf</div> </li> <li><a href="/article/3667.htm" title="101个MySQL 的调节和优化的提示" target="_blank">101个MySQL 的调节和优化的提示</a> tomcat_oracle <a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a> <div>　1. 拥有足够的物理内存来把整个InnoDB文件加载到内存中——在内存中访问文件时的速度要比在硬盘中访问时快的多。　　2. 不惜一切代价避免使用Swap交换分区 – 交换时是从硬盘读取的，它的速度很慢。　　3. 使用电池供电的RAM（注：RAM即随机存储器）。　　4. 使用高级的RAID（注：Redundant Arrays of Inexpensive Disks，即磁盘阵列</div> </li> <li><a href="/article/3794.htm" title="zoj 3829 Known Notation(贪心)" target="_blank">zoj 3829 Known Notation(贪心)</a> 阿尔萨斯 <a class="tag" taget="_blank" href="/search/ZOJ/1.htm">ZOJ</a> <div> 题目链接：zoj 3829 Known Notation 题目大意：给定一个不完整的后缀表达式，要求有2种不同操作，用尽量少的操作使得表达式完整。解题思路：贪心，数字的个数要要保证比∗的个数多1，不够的话优先补在开头是最优的。然后遍历一遍字符串，碰到数字+1，碰到∗-1,保证数字的个数大于等1，如果不够减的话，可以和最后面的一个数字交换位置（用栈维护十分方便），因为添加和交换代价都是1</div> </li> </ul> </div> </div> </div> <div> <div class="container"> <div class="indexes"> 按字母分类： <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.  </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>

前端常见笔面试题总结

HTML&CSS

~标签

标签

~
标签