前端面试总结一

1.页面的重构和回流
重构
改变每个元素的外观时所触发的浏览器的行为,如颜色、背景等样式发生改变而进行的重新构造新外观的行为。重构不会引发页面的重新布局,不一定伴随着回流。

重构时需要注意:
页面的健壮性:在页面排版时需要考虑数据极多或者极少的情况。
页面的扩展性:要考虑未来添加子模块或兄弟模块的状态,为将来留好css、html扩展的出入口。在将来添加模块的时候,尽可能少的去动原来的html结构,使html易于扩展,尽可能少的去修改css,使css能够继承可复用。一般的处理就是多套一层div,或其它解决办法。
页面的复用性:建议把表现形式的样式放在一个class中,物理属性放在一个class中。

页面重构通常包括:
(1)table布局改为div+css
(2)使网站前端兼容现代浏览器
(3)对移动平台的优化
(4)针对SEO进行优化
(5)减少代码间的耦合,让代码保持弹性
(6)严格按照规范编写代码
(7)设计可扩展的API
(8)替换旧的框架、语言
(9)增强用户体验
(10)针对速度进行优化
(11)压缩JS、css、image等前端资源(通常是由服务器来解决)
(12)采用CDN来加速资源加载
(13)对于JS DOM的优化
(14)HTTP服务器的文件缓存

回流
浏览器为了进行重新渲染页面而进行的重新计算元素几何大小和位置,回流可以理解为渲染树重新进行计算,一般最好触发元素的重构避免元素的回流。比如通过添加class来添加css样式,而不是直接在DOM上设置,当需要操作某一块元素的时候,最好使其脱离文档流,这样就不会引起回流了,比如设置position:absolute或者fixed,或者display:none,等操作结束后在显示。

2.移动端的优化
(此处参考浅谈前端性能优化(移动端))
网络加载类
(1)首屏数据请求提前,避免JavaScript文件加载后才请求渲染
为了进一步提示页面加载速度,可以考虑将页面的数据请求尽可能提前,避免在JavaScript文件加载完成后才去请求数据。通常数据请求是页面内容渲染中关键路径最长的部分,而且不能并行,所以如果数据请求能提前的话,可以极大程度上缩短页面内容的渲染完成时间。
(2)首屏加载和按需加载,非首屏内容滚屏加载,保证首屏内容最小化
由于移动端网络相对较慢,网络资源有限,因此为了保证尽快完成页面内容的加载,需要保证首屏加载资源的最小化,非首屏的内容使用滚动的方式异步加载。一般推荐移动端页面首屏数据展示延迟不超过3秒。
(3)模块化资源并行下载
主要指模块化JavaScript资源的异步加载,例如AMD的异步模块,使用并行的加载方式能够缩短多个文件资源的加载时间。
(4)inline首屏必备的CSS和JavaScript
通常为了在HTML加载完成时能使浏览器中有基本的样式,需要将页面渲染时必备的CSS和JS通过script或style的方式内联到页面中,避免页面HTML载入完成到页面内容展示这段过程中页面出现空白。
(5)meta dns prefetch设置DNS预解析
设置文件资源的DNS预解析,能让浏览器提前解析获取静态资源的主机IP,避免等到请求的时候才发起DNS解析。


<meta http-equiv='x-dns-prefetch-control' content='on'>
<link rel="dns-prefetch" href="//x.autoimg.cn">

(6)资源预加载
首屏加载完成后可能会使用的资源,我们可以用 link标签声明特定文件的预加载

<link rel='subresource' href='main.css'>
<link rel='prefetch' href='secondary.js'>

注意:只有可缓存的资源才进行预加载,否则浪费资源!

(7)Pre render预渲染
预渲染意味着我们提前加载好用户即将访问的下一个页面,否则进行预渲染这个页面将浪费资源,慎用!

<link rel='prerender' href='//j.autohome.com.cn'>

(8)合理利用MTU策略
通常情况下,TCP网络传输的最大传输单元(MTU)为1500B,即一个RTT(Round-Trip Time,网络请求返回时间)内可以传输的数据量最大为1500字节(为什么以太网mtu值被设定为1500 - 知乎)。因此在前后端分离的开发模式中,尽量保证页面的HTML内容在1KB以内,这样整个HTML内容的请求就可以在一个RTT内完成,最大限度的提高了HTML载入速度。

缓存
(1)合理利用浏览器缓存
除了Cache-Control、Expires、Etag和Last-Modified来设置HTTP缓存外,在移动端还可以使用localstorage等来保存ajax返回的数据,或者使用localstorage保存CSS或JS等静态资源,实现移动端的离线应用,尽可能的减少网络请求,保证静态资源内容的快速加载。
(2)静态资源离线方案
对于移动端或者混合应用,可以设置离线文件或离线包机制让静态资源请求从本地读取,加快资源载入速度,并实现离线更新。这块推荐叶小钗大神的 前端优化带来的思考,浅谈前端工程化 。
(3)尝试使用 AMP HTML
AMP HTML 可以作为优化前端页面性能的一个解决方案,使用AMP Component中的元素来代替原始页面元素进行直接渲染[译]关于谷歌的AMP,你需要知道这些 。

图片类
(1)图片压缩处理
移动端通常要保证页面中一切用到的图片都是经过压缩优化处理,而不是以原图的形式直接使用的,因为那样很消耗流量,并且加载时间更长。
(2)使用较小的图片,合理使用base64内嵌图片
在页面使用的背景图片不多且比较小的情况下,可以把图片转成base64编码嵌入到html页面或者CSS文件中,这样可以减少页面的HTTP请求数。需要注意的是,要保证图片较小,一般超过5kb的就不推荐base64嵌入显示了(前端开发中,使用base64图片的弊端是什么? - 知乎)。
(3)使用更高压缩比格式的图片
使用具有较高压缩比格式的图片,如webp等。在同等图片画质的情况下,高压缩比格式的图片体积更小,能够更快的完成文件传输,节省网站流量。
(4)图片懒加载
为了保证页面内容最小化,加速页面渲染,尽可能节省首屏网络流量,页面中的图片资源推荐使用懒加载实现,在页面滚动时动态载入图片。
(5)使用Media Query 或者 srcset 根据不同屏幕加载不同大小的图片
针对不同屏幕尺寸和分辨率,输出不同大小的图片或者背景图能保证用户体验不降低的前提下节省网络流量,加快部分机型图片载入速度。
(6)使用iconfont代替图片图标
iconfont体积较小而且是矢量图,因此缩放不会失真,还可以方便修改图片大小和呈现的颜色,但是需要注意iconfont引用不同webfont格式会有兼容问题。
(7)定义图片大小限制
加载单张图片不建议超过30KB,避免大图片加载时间过长而阻塞页面其他资源的下载。如果用户上传的图片过大,建议设置限制。

脚本类
(1)尽量使用id选择器
选择页面DOM元素时尽量使用id选择器,因为id选择器速度最快。
(2)合理的缓存dom对象
对于需要重复使用的dom对象,要优先设置缓存变量,避免每次使用时都要从整个dom树重新查找。

// 不推荐
$("#mod .active").removeClass('active');
$("#mod .not-active").addClass("active");

// 推荐
const $mod = $("#mod");
$mod.find(".active").removeClass("active")
$mod.find(".not-active").addClass("active")

(3)页面元素尽量使用事件代理,避免事件直接绑定
使用事件代理可以避免对每个元素都进行绑定。并且可以避免出现内存泄漏以及需要动态添加元素的事件绑定问题

// 不推荐
$(".btn").click( _ => console.log("hello") )

// 推荐
$(document).on("click", ".btn", _ => console.log("world"))

(4)使用touch代替click
由于移动端屏幕的设计,touch事件和click事件触发之间存在300ms延迟,所以在页面没有touchmove实现滚动处理的情况,可以用touchstart代替元素的click事件,加快页面点击的响应速度,提高用户体验。但同时也需要注意页面重叠元素touch动作的点透问题。

// 不推荐
$("body").on("click",".btn",function(){ console.log(this) });

// 推荐
$("body").on("tap",".btn",function(){ console.log(this) });
// tap为zepto用touch事件封装的

(5)避免touchmove,scroll等连续事件处理
需要对这类高频触发回调的事件设置函数节流(throttle | debounce),避免频繁的事件调用导致移动端页面卡顿。
(6)避免使用eval、with,使用join代替连接符+,推荐使用ES6的模板字符串
基本的安全脚本编写问题,尽可能使用高效率的特性来完成这些操作,避免不规范或者不安全的写法。
(7)尽量使用ES6+的特性来编程
ES6+在一定程度上更高效,在chrome59版本对ES6做了深度优化之后,很多特性速度提升了80%左右,这也是未来规范的需要。

渲染类
(1)使用viewport固定屏幕渲染,可以加速页面渲染内容
一般认为,在移动端设置viewport可以加速页面的渲染,同时可以避免缩放导致页面重排重绘。

// 利用meta标签对viewport进行控制
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

(2)避免各种形式重排(reflow)重绘(redraw)
页面的重排重绘很耗性能,所以一定要尽可能减少页面的重排重绘,例如页面图片大小变化、元素位置变化这些情况都会导致重排与重绘。
(3)使用CSS3动画,开启GPU加速
使用CSS3动画可以设置transform: translateZ(0)来开启移动设备浏览器的GPU图形处理加速。GPU加速是什么。
(4)合理使用canvas和requestAnimationFrame
选择canvas或者requestAnimationFrame等更高效的动画实现方式,避免使用settimeout、setInterval等方式直接处理连续动画.
(5)SVG代替图片
部分情况下可以考虑使用SVG代替图片实现动画,因为SVG格式内容更小,而且SVG的DOM结构方便调整。
(6)不滥用float
在DOM渲染树生成后的布局渲染阶段,使用float的元素布局计算比较耗性能,所以尽量减少float的使用,推荐使用固定布局或者flex布局的方式来实现页面的元素布局。
(7)不滥用web字体或过多的font-size声明
过多的font-size声明会增加字体的计算大小。

架构协议
(1)尝试使用SPDY和HTTP2
在条件允许的情况下可以考虑使用SPDY协议来进行文件资源传输,利用连接复用加快传输过程,缩短资源加载时间。
(2)使用后端数据渲染
SSR( Server Side Rendering,服务端渲染)的方式可以加速页面内容的渲染展示,避免空白页面的出现,同时可以解决页面SEO的问题。条件允许的话,SSR是一个很好的实践思路。百度SSP单页式应用性能优化实践,React 同构实践与思考。
(3)使用Native View代替DOM的性能劣势
可以尝试使用Native View的MNV* 开发模式来避免HTML DOM性能慢的问题,目前使用MNV* 的开发模式已经可以将页面内容渲染体验做到接近客户端Native应用的体验了。

3.PC端性能优化
(参考浅谈前端性能优化(PC版))
网络加载
(1)减少HTTP请求次数
根据需要合并静态资源图片、JavaScript代码和CSS文件,减少页面请求次数,这样可以缩短页面首次访问的等待时间,另外也要尽量的避免重复资源,防止增加多余的请求。
(2)减少HTTP请求大小
比如减少没必要的图片、JS、CSS以及HTML等,对文件进行压缩优化,开启GZIP压缩传输内容,缩短网络传输等待延迟。
(3)将CSS和JS放到外部文件中,避免使用style和script标签引入
在HTML文件中引入外部的资源可以有效利用浏览器的静态资源缓存。

<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js">script>

(4)避免页面中空的href和src
当link标签的href属性为空,或者script、img、iframe标签的src属性为空的时候,浏览器在渲染的过程中还是会把href和src的空内容进行加载,直到加载失败。这样就阻塞了页面中其他资源的下载进程,并且最后加载的内容是无效的,因此要尽量避免。


<img src="" alt="占位图"/>

(5)为HTML指定Cache-Control或者Expires
为HTML指定Cache-Control或者Expires可以将HTML内容缓存起来,避免频繁向服务器发送请求。在页面Cache-Control或Expires头部又消失,浏览器会直接从缓存读取内容,不向服务器发送请求。

<meta http-equiv="Cache-Control" content="max-age=7200" />
<meta http-equiv="expires" content="Wed, 20 Jun 2017 22:33:00 GMT">

(6)合理设置Etag和Last-Modified
对于未修改的文件,静态资源服务器会向浏览器端返回304,让浏览器从缓存中读取文件,减少下载的带宽消耗并能减少服务器的负载。

<meta http-equiv="last-modified" content="Mon, 03 Jan 2017 17:45:57 GMT">

(7)减少页面重定向
一次重定向大概600毫秒的时间开销,为了保证用户能尽快看到页面内容,尽量避免页面的重定向。
(8)静态资源不同域名存放
浏览器在同一时刻向同一个域名请求文件的并行下载数是有限的,因此可以利用多个域名的主机来存放不同的静态资源,增大页面加载时资源的并行下载数。
(9)使用静态资源CDN来存储文件
(10)使用CDN Combo下载传输内容
CDN的combo技术能把多个资源文件合并引用,减少请求次数。这样可以减少浏览器HTTP请求数,加快资源下载速度。比如淘宝的写法:

<link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/??sm.min.css,sm-extend.min.css">
<script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/??sm.min.js,sm-extend.min.js' charset='utf-8'>script>

(11)使用可缓存的AJAX
对于内容相同的请求,有时候没必要每次都从服务器拉取,合理的使用ajax缓存能加快ajax响应速度并减少服务器的压力。

$.ajax({
    url : url,
    dataType : "json",
    cache: true,
    success: function(data){ // to do something... }
});

(12)使用get请求
POST请求会首先发送文件头,然后发送HTTP正文的数据。而使用GET只发送头部,所以在拉取数据时使用GET请求效率更高。
(13)减少Cookie的大小并进行Cookie隔离
HTTP请求默认是会带上浏览器端的Cookie一起发送给服务器端的,所以在非必要的情况下要尽量减少Cookie。对于静态的资源,尽量使用不同的域名存放,因为Cookie默认也是不能跨域的,这就做到了不同域名下静态资源请求的Cookie隔离。
(14)减少favicon.ico 并缓存
一般一个web应用的favicon.ico是很少改变的,有利于favicon.ico的重复加载。
(15)异步的加载JavaScript资源
异步的JavaScript资源不会阻塞文档解析,所以浏览器会优先渲染页面,延迟加载脚本执行。

<script src="main.js" defer>script>
<script src="main.js" async>script>

(16)消除阻塞页面的CSS和JS
对于页面中加载时间过长的CSS或JS文件,需要进行合理的拆分或者延后加载,保证关键的资源能快速加载完成。
(17)避免使用CSS import 引用加载CSS
(18)使用prefetch来完成网站预加载
让浏览器预先加载用户访问当前页后极有可能访问的其他资源(页面,图片,视频等),从而让用户有更好的体验。
(19)按需加载

页面渲染类
(1)把CSS资源引用放到HTML文件顶部
这样浏览器可以优先下载CSS并尽快完成页面渲染。
(2)JavaScript文件引用放到HTML文件底部
可以防止JavaScript的加载和解析执行对页面渲染造成阻塞。由于JavaScript资源默认是解析阻塞的,除非被标记为异步或者通过其他的方式异步加载,否则会阻塞HTML DOM解析和CSS渲染过程。
(3)不要在HTML中直接缩放图片
在HTML中直接缩放图片会导致页面内容的重排重绘,此时可能会使页面中的其他操作产生卡顿,因此要尽量减少在页面中直接进行图片缩放。
(4)减少DOM元素数量和深度
HTML中标签元素越多、层级越深,浏览器解析DOM并绘制到浏览器中所花的时间就越长。
(5)尽量避免使用table、iframe等慢元素
table内容的渲染是将table的DOM渲染树全部生成完并一次性绘制到页面上,所以在长表格渲染时很耗性能,应该尽量避免使用,可以考虑用ul代替。尽量使用异步的方式动态的加载iframe,因为iframe内资源的下载进程会阻塞父页面静态资源的下载以及HTML DOM的解析。
(6)避免运行耗时的JavaScript
长时间运行的JavaScript会阻塞浏览器构建DOM树、DOM渲染树、渲染页面。所以任何与页面初次渲染无关的逻辑功能都应该延迟加载执行,这和JavaScript资源的异步加载思路一致。
(7)避免使用CSS表达式和CSS滤镜
CSS表达式和滤镜的解析渲染速度是很慢的,再有其他解决方案的情况下应该尽量避免使用。

// 不推荐
.opacity{
   filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=10, MakeShadow=false)
} 

4.SEO优化
(参考前端SEO优化)
SEO简介:
  全称Search Engine Optimization,搜索引擎优化。
  存在的意义:为了提升网页在搜索引擎自然搜索结果中的收录数量以及排序位置而做的优化行为。
  分类:白帽SEO和黑帽SEO。白帽SEO,起到了改良和规范网站设计的作用,使网站对搜索引擎和用户更加友好,并且网站也能从搜索引擎中获取合理的流量,这是搜索引擎鼓励和支持的。黑帽SEO,利用和放大搜索引擎政策缺陷来获取更多用户的访问量,这类行为大多是欺骗搜索引擎,一般搜索引擎公司是不支持与鼓励的。
  白帽SEO能做什么呢?
  (1)对网站的标题、关键字、描述精心设置,反映网站的定位,让搜索引擎明白网站是做什么的;
  (2)网站内容优化:内容与关键字的对应,增加关键字的密度;
  (3)在网站上合理设置Robot.txt文件;
  (4)生成针对搜索引擎友好的网站地图;
  (5)增加外部链接,到各个网站上宣传;
  
SEO优化方案:
网站结构布局优化
(1)控制首页链接数量:链接太少,搜索引擎往下爬到页内,影响网站收录数量;链接太多,影响用户体验。
(2)扁平化的目录层次:建立的网站结构层次越少,越容易被抓取,保持三层目录结构也是用户体验的需要。
(3)导航优化:导航尽量采用文字,也可以搭配图片导航,但图片需进行优化,如标签必须加’alt’和’title’属性;尽量加上面包屑导航,让用户更好了解当前所在位置,理解网站布局,让搜索引擎了解网站结构,同时增加了大量的内部链接,方便数据抓取。
(img图片标签alt和title属性的区别:alt是给搜索引擎识别,在图像无法显示时的替代文本;title是关于元素的注释信息,主要是给用户解读,当鼠标放到文字或是图片上时有title文字显示。)
(4)控制页面大小,减少http请求,提高网站加载速度。
(5)合理的网站布局

页面头部:logo、主导航、用户信息
页面主题:左边正文(包括面包屑导航及正文),右边热门文章和相关文章
页面底部:版权信息、友情链接

网站代码优化
(1)</code>标题:只强调重点即可,尽量把重要的关键词放在前面,关键词不要重复出现,尽量做到每个页面的<code><title></code>标题中不要设置相同的内容。<br> (2)<code><meta keywords></code>标签:关键词,列举出几个页面的重要关键字即可,切记过分堆砌。<br> (3)<code><meta description></code>标签:网页描述,需要高度概括网页内容,切记不能太长,过分堆砌关键词,每个页面也要有所不同。<br> (4)<code><body></code>中的标签:尽量让代码语义化,在适当的位置使用适当的标签,用正确的标签做正确的事。让阅读源码者和“蜘蛛”都一目了然。比如:h1-h6 是用于标题类的,nav标签是用来设置页面主导航的等。<br> (5)a标签:页内链接,要加“title”属性加以说明,让访客和“蜘蛛”知道。而外部链接,链接到其他网站的,则需要加上rel="nofollow"属性,告诉“蜘蛛”不要爬,因为一旦“蜘蛛”爬了外部链接之后,就不会再回来了。<br> (6)正文标题要用h1标签:搜索引擎认为它最重要,若不喜欢它的默认样式可以通过CSS设置。尽量做到正文标题用h1标签,副标题用h2标签,而其它地方不应该随便乱用 h 标题标签。<br> (7)br标签:只用于文本内容的换行<br> (8)表格应该使用caption表格标题标签<br> (9)img应使用 “alt” 属性加以说明<br> (10)strong、em标签:需要强调时使用。strong标签在搜索引擎中能够得到高度的重视,它能突出关键词,表现重要的内容,em标签强调效果仅次于strong标签。b、i标签: 只是用于显示效果时使用,在SEO中不会起任何效果。<br> (11)文本缩进不要使用特殊符号’ ’;应当使用CSS进行设置。版权符号不要使用特殊符号 ‘©’; 可以直接使用输入法,拼“banquan”,选择序号5就能打出版权符号©。<br> (12)巧妙利用CSS布局,将重要内容的HTML代码放在最前面:最前面的内容被认为是最重要的,优先让“蜘蛛”读取,进行内容关键词抓取。<br> (13)重要内容不要用JS输出:因为“蜘蛛”不认识。<br> (14)尽量少使用iframe框架:因为“蜘蛛”一般不会读取其中的内容。<br> (15)谨慎使用 ‘display:none’:对于不想显示的文字内容,应当设置z-index或设置到浏览器显示器之外,因为搜索引擎会过滤掉display:none其中的内容。<br> (16)js代码如果是操作DOM操作,应尽量放在body结束标签之前,html代码之后。<br> (17)增加网站的404页面:一是有利于提高用户体验,最主要的是防止蜘蛛爬虫丢失。<br> (18)添加canonical标签:当我们的网页可以通过多个URL来访问时,我们可以通过添加canonical标签告诉搜索引擎这多个URL中的首选网址。通常搜索引擎会将指定的页面视为最有价值最规范的页面。</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation">=</span>”canonical”</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span>”http://www.xxxxxx.com/”</span> <span class="token punctuation">/></span></span> </code></pre> <p>5.<strong>列举IE 与其他浏览器不一样的特性</strong><br> (1)IE支持currentStyle,Firefox使用getComputedStyle;<br> (2)IE 使用innerText,Firefox使用textContent;<br> (3)滤镜方面:IE:filter:alpha(opacity= num);Firefox:-moz-opacity:num;<br> (4)事件方面:IE:attachEvent:火狐是addEventListener;<br> (5)鼠标位置:IE是event.clientX;火狐是event.pageX;<br> (6)IE使用event.srcElement;Firefox使用event.target;<br> (7)IE中消除list的原点仅需margin:0即可达到最终效果;Firefox需要设置margin:0;padding:0以及list-style:none;<br> (8)CSS圆角:ie7以下不支持圆角。</p> <p>6.99%的网站都需要被重构是那本书上写的?<br> 《网站重构:应用Web标准进行设计(第2版)》</p> <p>7.WEB应用从服务器主动推送Data到客户端有哪些方式?<br> (1)Javascript数据推送;<br> (2)Commet:基于HTTP长连接的服务器推送技术;<br> (3)基于WebSocket的推送方案;<br> (4)SSE(Server-Send Event):服务器推送数据新方式。</p> <p>8.对Node的优点和缺点提出了自己的看法?<br> NodeJS的特点:<br> (1)Javascript运行环境;<br> (2)依赖于Chrome V8引擎进行代码解释;<br> (3)事件驱动;<br> (4)非阻塞I/O;<br> (5)轻量、可伸缩,适于实时数据交互应用;<br> (6)单进程,单线程。</p> <p>优点:<br> (1)<strong>高并发</strong>(最重要的优点);<br> 因为Node是<strong>基于事件驱动和无阻塞的</strong>,所以非常适合处理<strong>并发请求</strong>,因此构建在Node上的代理服务器相比其他技术实现(如Ruby)的服务器表现要好得多。<br> (2)适合I/O密集型应用;<br> (3)客户端和服务器端同一种语言编写。</p> <p>缺点:<br> (1)不适合CPU密集型应用;<br> CPU密集型应用给Node带来的挑战主要是:由于JavaScript单线程的原因,如果有长时间运行的计算(比如大循环),将会导致CPU时间片不能释放,使得后续I/O无法发起;<br> 解决方案:分解大型运算任务为多个小任务,使得运算能够适时释放,不阻塞I/O调用的发起;<br> (2)只支持单核CPU,不能充分利用CPU;<br> (3)可靠性低,一旦代码某个环节崩溃,整个系统都崩溃;<br> 原因:单进程,单线程<br> 解决方案:1)Nnigx反向代理,负载均衡,开多个进程,绑定多个端口;<br>      2)开多个进程监听同一个端口,使用cluster模块;<br> (4)开源组件库质量参差不齐,更新快,向下不兼容;<br> (5)Debug不方便,错误没有stack trace。</p> <p>适合NodeJS的场景:<br> (1)RESTful API<br>   这是NodeJS最理想的应用场景,可以处理数万条连接,本身没有太多的逻辑,只需要请求API,组织数据进行返回即可。<br>   它本质上只是从某个数据库中查找一些值并将它们组成一个响应。<br>   由于响应是少量文本,入站请求也是少量的文本,因此流量不高,一台机器甚至也可以处理最繁忙的公司的API需求。<br> (2)统一Web应用的UI层<br> 目前MVC的架构,在某种意义上来说,Web开发有两个UI层,一个是在浏览器里面我们最终看到的,另一个在server端,负责生成和拼接页面。<br> 不讨论这种架构是好是坏,但是有另外一种实践,面向服务的架构,更好的做前后端的依赖分离。如果所有的关键业务逻辑都封装成REST调用,就意味着在上层只需要考虑如何用这些REST接口构建具体的应用。<br> (3)大量Ajax请求的应用<br>   例如个性化应用,每个用户看到的页面都不一样,缓存失效,需要在页面加载的时候发起Ajax请求, NodeJS能响应大量的并发请求。</p> <p>总而言之,NodeJS适合运用在高并发、I/O密集、少量业务逻辑的场景。</p> <p>9.一个页面从输入 URL 到页面加载显示完成,这个过程中都发生了什么?<br> (1)浏览器的地址栏输入URL并按下回车;<br> (2)浏览器查找当前URL是否存在缓存,并比较缓存是否过期;<br> (3)DNS解析URL对应的IP;<br> (4)根据IP建立TCP连接(三次握手);<br> (5)HTTP发起请求;<br> (6)服务器处理请求,浏览器接收HTTP响应;<br> (7)渲染页面,构建DOM树;<br> (8)关闭TCP连接(四次挥手)。</p> <p><strong>URL:</strong><br>   我们常见的URL是这样的:http://www.baidu.com,这个域名由三部分组成:<strong>协议名、域名、端口号</strong>,这里端口是默认所以隐藏。除此之外URL还会包含一些路径、查询和其他片段,例如:http://www.tuicool.com/search?kw=%E4%。<br>   最常见的的协议是HTTP协议,除此之外还有加密的HTTPS协议、FTP协议、FILe协议等等。<br>   URL的中间部分为域名或者是IP,之后就是端口号了。通常端口号不常见是因为大部分的都是使用默认端口,如<strong>HTTP默认端口80,HTTPS默认端口443</strong>。</p> <p><strong>缓存</strong><br>   根据是否需要重新向服务器发起请求来分类,将其分为<strong>强制缓存,对比缓存</strong>。<br>   <br>   强制缓存判断HTTP首部字段:<strong>cache-control,Expires</strong>。<br>   Expires是一个绝对时间,即服务器时间。浏览器检查当前时间,如果还没到失效时间就直接使用缓存文件。但是该方法存在一个问题:服务器时间与客户端时间可能不一致。因此该字段已经很少使用。<br>   cache-control中的max-age保存一个相对时间。例如Cache-Control: max-age = 484200,表示浏览器收到文件后,缓存在484200s内均有效。如果同时存在cache-control和Expires,浏览器总是优先使用cache-control。<br>   <br>   对比缓存通过HTTP的<strong>last-modified,Etag</strong>字段进行判断。<br>   last-modified是第一次请求资源时,服务器返回的字段,表示最后一次更新的时间。下一次浏览器请求资源时就发送if-modified-since字段。服务器用本地Last-modified时间与if-modified-since时间比较,如果不一致则认为缓存已过期并返回新资源给浏览器;如果时间一致则发送304状态码,让浏览器继续使用缓存。<br>   Etag:资源的实体标识(哈希字符串),当资源内容更新时,Etag会改变。服务器会判断Etag是否发生变化,如果变化则返回新资源,否则返回304。</p> <p><strong>DNS域名解析</strong><br>   在地址栏输入的域名并不是最后资源所在的真实位置,域名只是与IP地址的一个映射。网络服务器的IP地址那么多,我们不可能去记一串串的数字,因此域名就产生了,<strong>域名解析的过程实际是将域名还原为IP地址的过程。</strong><br>   (1)首先浏览器先检查本地hosts文件是否有这个网址映射关系,如果有就调用这个IP地址映射,完成域名解析;<br>   (2)如果没找到则会查找本地DNS解析器缓存,如果查找到则返回;<br>   (3)如果还是没有找到则会查找本地DNS服务器,如果查找到则返回;<br>   (4)最后迭代查询,按根域服务器 ->顶级域,.cn->第二层域,hb.cn ->子域,www.hb.cn的顺序找到IP地址。</p> <p><strong>TCP连接</strong><br>   在通过第一步的DNS域名解析后,获取到了服务器的IP地址,在获取到IP地址后,便会开始建立一次连接,这是由TCP协议完成的,主要通过三次握手进行连接。<br>   (1)第一次握手:建立连接时,客户端发送syn包(syn=j)到服务器,并进入SYN_SENT状态,等待服务器确认;<br>   (2)第二次握手:服务器收到syn包,必须确认客户的SYN(ack=j+1),同时自己也发送一个SYN包(syn=k),即SYN+ACK包,此时服务器进入SYN_RECV状态;<br>   (3)第三次握手:客户端收到服务器的SYN+ACK包,向服务器发送确认包ACK(ack=k+1),此包发送完毕,客户端和服务器进入ESTABLISHED(TCP连接成功)状态,完成三次握手。<br>   完成三次握手,客户端与服务器开始传送数据。</p> <p><strong>浏览器向服务器发送HTTP请求</strong><br>   完整的HTTP请求包含请求起始行、请求头部、请求主体三部分。</p> <p><strong>浏览器接收响应</strong><br>   服务器在收到浏览器发送的HTTP请求之后,会将收到的HTTP报文封装成HTTP的Request对象,并通过不同的Web服务器进行处理,处理完的结果以HTTP的Response对象返回,主要包括状态码、响应头、响应报文三个部分。<br>   响应头主要由Cache-Control、 Connection、Date、Pragma等组成。<br>   响应体为服务器返回给浏览器的信息,主要由HTML,css,js,图片文件组成。</p> <p><strong>页面渲染</strong><br>   如果说响应的内容是HTML文档的话,就需要浏览器进行解析渲染呈现给用户。整个过程涉及两个方面:解析和渲染。在渲染页面之前,需要构建DOM树和CSSOM树。</p> <p><strong>关闭TCP连接或继续保持连接</strong><br>   通过四次挥手关闭连接(FIN ACK, ACK, FIN ACK, ACK)。<br> 第一次挥手是浏览器发完数据后,发送FIN请求断开连接;第二次挥手是服务器发送ACK表示同意,如果在这一次服务器也发送FIN请求断开连接似乎也没有不妥,但考虑到服务器可能还有数据要发送,所以服务器发送FIN应该放在第三次挥手中;这样浏览器需要返回ACK表示同意,也就是第四次挥手。</p> <p>10.HTTP<br> HTTP<strong>请求</strong>四部分:<br> (1)HTTP请求的方法或动作,比如是get还是post请求;<br> (2)正在请求的URL(请求的地址);<br> (3)请求头,包含一些客户端环境信息、身份验证信息等;<br> (4)请求体(请求正文),可以包含客户提交的查询字符串信息、表单信息等。<br> 请求头字段:<br> Accept:text/html,image/*(告诉服务器,浏览器可以接受文本,网页图片)<br> Accept-Charaset:ISO-8859-1 [接受字符编码:iso-8859-1]<br> Accept-Encoding:gzip,compress[可以接受 gzip,compress压缩后数据]<br> Accept-Language:zh-cn[浏览器支持的语言]<br> Host:localhost:8080[浏览器要找的主机]<br> If-Modified-Since:Tue, 09 May 2017 01:34:02 GMT[告诉服务器我这缓存中有这个文件,该文件的时间是…]<br> User-Agent:Nozilla/4.0(Com…)[告诉服务器我的浏览器内核,客户端环境信]<br> Cookie:[身份验证信息]<br> Connection:close/Keep-Alive [保持链接,发完数据后,我不关闭链接]</p> <p>HTTP<strong>响应</strong>三部分:<br> (1)一个数字和文字组成的状态码,用来显示请求是成功还是失败;<br> (2)响应头,响应头也和请求头一样包含许多有用的信息,例如服务器类型、日期时间、内容类型和长度等;<br> (3)响应体(响应正文)。<br> 响应头字段:<br> Cache-Control:[告诉浏览器如何缓存页面(因为浏览器的兼容性最好设置两个)]<br> Connection:close/Keep-Alive [保持链接,发完数据后,我不关闭链接]<br> Content-Type:text/html;charset=gb2312[内容格式和编码]<br> Last-Modified:Tue,11 Juj,2017 18 18:29:20[告诉浏览器该资源上次更新时间是多少]<br> ETag:”540-54f0d59b8b680”<br> Expires:Fri, 26 May 2017 13:28:33 GMT [失效日期]<br> server:apache tomcat nginx [哪种服务器]</p> <p>11.常见HTTP状态码<br> (1)1xx(临时响应)表示临时响应并需要请求者继续执行操作的状态码;<br> 100 Continue 一般在发送post请求时已发送了http header之后服务端将返回此信息,表示确认,之后发送具体参数信息。<br> (2)2xx(成功)表示成功处理了请求的状态码;<br> 200 OK 正常返回信息,服务器已成功处理了请求;<br> 201 Created 请求成功并且服务器创建了新的资源;<br> 202 Accepted 服务器已接受请求,但尚未处理 。<br> (3)3xx(重定向)要完成请求,需要进一步操作;<br> 301(永久移动):请求的网页已永久移动到新位置;<br> 302(临时移动):服务器目前从不同位置的网页响应请求,但请求者应继续使用原有位置来响应以后的请求;<br> 303 See Other 临时性重定向,且总是使用 GET 请求新的 URI;<br> <strong>304(未修改):自从上次请求后,请求的网页未修改过。</strong><br> (4)4xx(请求错误)这些状态码表示请求可能出错,妨碍了服务器的处理。<br> 400(错误请求):服务器不理解请求的语法;<br> 403 Forbidden 禁止访问;<br> 404(未找到):服务器找不到请求的网页。<br> (5)5xx(服务器错误)这些状态码表示服务器在处理请求时发生内部错误。<br> 500(服务器内部错误):服务器遇到错误,无法完成请求。<br> 503(服务不可用):服务器目前无法使用(由于超载或停机维护)。</p> <p>12.简单理解HTTP HTTPS 以及TCP 和UDP 的区别<br> <strong>HTTP和HTTPS的基本概念</strong><br> HTTP:<br> HTTP是超文本传输协议,是客户端浏览器或其他程序与Web服务器之间的应用层通信协议。在Internet上的Web服务器上存放的都是超文本信息, 客户机需要通过HTTP协议传输所要访问的超文本信息。HTTP包含命令和传输信息,不仅可用于Web访问,也可以用于其他因特网/内联网应用系统之间的通信,从而实现各类应用资源超媒体访问的集成。<br> HTTPS:<br> 是以安全为目标的HTTP通道,简单讲是HTTP的安全版,即HTTP下加入SSL层,HTTPS的安全基础是SSL,因此加密的详细内容就需要SSL。<br>   HTTPS协议的主要作用可以分为两种:一种是建立一个信息安全通道,来保证数据传输的安全;另一种就是确认网站的真实性。</p> <p><strong>HTTP与HTTPS的区别</strong><br>    HTTP协议被用于在Web浏览器和网站服务器之间传递信息,HTTP协议以明文方式发送内容,不提供任何方式的数据加密,如果攻击者截取了Web浏览器和网站服务器之间的传输报文,就可以直接读懂其中的信息,因此,HTTP协议不适合传输一些敏感信息,比如:信用卡号、密码等支付信息。<br>   为了解决HTTP协议的这一缺陷,需要使用另一种协议:安全套接字层超文本传输协议HTTPS,为了数据传输的安全,HTTPS在HTTP的基础上加入了SSL协议,SSL依靠证书来验证服务器的身份,并为浏览器和服务器之间的通信加密。<br>   <br> HTTPS和HTTP的区别主要如下:<br> (1)https协议需要到ca申请证书,一般免费证书较少,因而需要一定费用;<br> (2)http是超文本传输协议,信息是明文传输,https则是具有安全性的ssl加密传输协议;<br> (3)http和https使用的是完全不同的连接方式,用的端口也不一样,前者是80,后者是443;<br> (4)http的连接很简单,是无状态的;HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议,比http协议安全。</p> <p><strong>HTTPS的工作原理</strong><br>   HTTPS能够加密信息,以免敏感信息被第三方获取,所以很多银行网站或电子邮箱等等安全级别较高的服务都会采用HTTPS协议。</p> <p>客户端在使用HTTPS方式与Web服务器通信时有以下几个步骤:<br> (1)客户使用https的URL访问Web服务器,要求与Web服务器建立SSL连接;<br> (2)Web服务器收到客户端请求后,会将网站的证书信息(证书中包含公钥)传送一份给客户端;<br> (3)客户端的浏览器与Web服务器开始协商SSL连接的安全等级,也就是信息加密的等级。<br> (4)客户端的浏览器根据双方同意的安全等级,建立会话密钥,然后利用网站的公钥将会话密钥加密,并传送给网站。<br> (5)Web服务器利用自己的私钥解密出会话密钥。<br> (6)Web服务器利用会话密钥加密与客户端之间的通信。</p> <p><strong>HTTPS的优点</strong><br>    尽管HTTPS并非绝对安全,掌握根证书的机构、掌握加密算法的组织同样可以进行中间人形式的攻击,但HTTPS仍是现行架构下最安全的解决方案,主要有以下几个好处:<br> (1)使用HTTPS协议可认证用户和服务器,确保数据发送到正确的客户机和服务器;<br> (2)HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议,要比http协议安全,可防止数据在传输过程中被窃取、改变,确保数据的完整性;<br> (3)HTTPS是现行架构下最安全的解决方案,虽然不是绝对安全,但它大幅增加了中间人攻击的成本;<br> (4)谷歌曾在2014年8月份调整搜索引擎算法,并称“比起同等HTTP网站,采用HTTPS加密的网站在搜索结果中的排名将会更高”。</p> <p><strong>HTTPS的缺点</strong><br> (1)HTTPS协议握手阶段比较费时,会使页面的加载时间延长近50%,增加10%到20%的耗电;<br> (2)HTTPS连接缓存不如HTTP高效,会增加数据开销和功耗,甚至已有的安全措施也会因此而受到影响;<br> (3)SSL证书需要钱,功能越强大的证书费用越高,个人网站、小网站没有必要一般不会用。<br> (4)SSL证书通常需要绑定IP,不能在同一IP上绑定多个域名,IPv4资源不可能支撑这个消耗。<br> (5)HTTPS协议的加密范围也比较有限,在黑客攻击、拒绝服务攻击、服务器劫持等方面几乎起不到什么作用。最关键的,SSL证书的信用链体系并不安全,特别是在某些国家可以控制CA根证书的情况下,中间人攻击一样可行。</p> <p><strong>HTTP切换到HTTPS</strong><br> 需要将页面中所有的链接,例如js,css,图片等等链接都由http改为https。例如:http://www.baidu.com改为https://www.baidu.com。这里虽然将http切换为了https,还是建议保留http。在切换的时候可以做http和https的兼容,具体实现方式是,去掉页面链接中的http头部,这样可以自动匹配http头和https头。例如:将http://www.baidu.com改为//www.baidu.com。然后当用户从http的入口进入访问页面时,页面就是http,如果用户是从https的入口进入访问页面,页面即使https的。</p> <p><strong>TCP/UDP:</strong><br> 面向连接的TCP<br> “面向连接”就是在正式通信前必须要与对方建立起连接。比如你给别人打电话,必须等线路接通了、对方拿起话筒才能相互通话。<br> TCP(Transmission Control Protocol,传输控制协议)是基于连接的协议,也就是说,在正式收发数据前,必须和对方建立可靠的连接。<br> TCP协议能为应用程序提供可靠的通信连接,使一台计算机发出的字节流无差错地发往网络上的其他计算机,<strong>对可靠性要求高的数据通信系统往往使用TCP协议传输数据。</strong></p> <p>面向非连接的UDP协议<br> “面向非连接”就是在正式通信前不必与对方先建立连接,不管对方状态就直接发送。这与手机短信非常相似:你在发短信的时候,只需要输入对方手机号就OK了。<br> UDP(User Data Protocol,用户数据报协议)是与TCP相对应的协议。它是面向非连接的协议,它不与对方建立连接,而是直接就把数据包发送过去!<strong>UDP 适用于一次只传送少量数据、对可靠性要求不高的应用环境</strong>。</p> <p>13.http1.0,http1.1,http2.0区别<br> <strong>HTTP1.0和HTTP1.1的一些区别</strong><br> (1)缓存处理<br> 在HTTP1.0中主要使用header里的If-Modified-Since,Expires来作为缓存判断的标准,HTTP1.1则引入了更多的缓存控制策略例如Entity tag,If-Unmodified-Since, If-Match, If-None-Match等更多可供选择的缓存头来控制缓存策略。<br> (2)带宽优化及网络连接的使用<br> HTTP1.0中,存在一些浪费带宽的现象,例如客户端只是需要某个对象的一部分,而服务器却将整个对象送过来了,并且不支持断点续传功能,HTTP1.1则在请求头引入了range头域,允许只请求资源的某个部分,即返回码是206(Partial Content),这样就方便了开发者自由的选择以便于充分利用带宽和连接。<br> (3)错误通知的管理<br> 在HTTP1.1中新增了24个错误状态响应码,如409(Conflict)表示请求的资源与资源的当前状态发生冲突;410(Gone)表示服务器上的某个资源被永久性的删除。<br> (4)Host头处理<br> 在HTTP1.0中认为每台服务器都绑定一个唯一的IP地址,因此,请求消息中的URL并没有传递主机名(hostname)。但随着虚拟主机技术的发展,在一台物理服务器上可以存在多个虚拟主机(Multi-homed Web Servers),并且它们共享一个IP地址。HTTP1.1的请求消息和响应消息都应支持Host头域,且请求消息中如果没有Host头域会报告一个错误(400 Bad Request)。<br> (5)长连接<br> HTTP 1.1支持长连接(PersistentConnection)和请求的流水线(Pipelining)处理,在一个TCP连接上可以传送多个HTTP请求和响应,减少了建立和关闭连接的消耗和延迟,在HTTP1.1中默认开启Connection: keep-alive,一定程度上弥补了HTTP1.0每次请求都要创建连接的缺点。<br> (6)HTTP1.1增加了OPTIONS, PUT, DELETE, TRACE, CONNECT这些Request方法.</p> <p><strong>http2.0与http1.x</strong><br> (1)新的二进制格式(Binary Format)<br> HTTP1.x的解析是基于文本。基于文本协议的格式解析存在天然缺陷,文本的表现形式有多样性,要做到健壮性考虑的场景必然很多,二进制则不同,只认0和1的组合。基于这种考虑HTTP2.0的协议解析决定采用二进制格式,实现方便且健壮。<br> (2)多路复用(MultiPlexing)<br> 即连接共享,即每一个request都是用作连接共享机制的。一个request对应一个id,这样一个连接上可以有多个request,每个连接的request可以随机的混杂在一起,接收方可以根据request的 id将request再归属到各自不同的服务端请求里。<br> (3)header压缩<br> HTTP1.x的header带有大量信息,而且每次都要重复发送,HTTP2.0使用encoder来减少需要传输的header大小,通讯双方各自cache一份header fields表,既避免了重复header的传输,又减小了需要传输的大小。<br> (4)服务端推送(server push)<br> 同SPDY一样,HTTP2.0也具有server push功能。例如我的网页有一个sytle.css的请求,在客户端收到sytle.css数据的同时,服务端会将sytle.js的文件推送给客户端,当客户端再次尝试获取sytle.js时就可以直接从缓存中获取到,不用再发请求了。</p> <p>14.什么是Http协议无状态协议?怎么解决Http协议无状态?<br> 无状态协议对于事务处理没有记忆能力。缺少状态意味着如果后续处理需要前面的信息,也就是说,当客户端一次HTTP请求完成以后,客户端再发送一次HTTP请求,HTTP并不知道当前客户端是一个“老用户”。<br> 可以使用Cookie来解决无状态的问题,Cookie就相当于一个通行证,第一次访问的时候给客户端发送一个Cookie,当客户端再次来的时候,拿着Cookie(通行证),那么服务器就知道这个是“老用户”。</p> <p>15.URI和URL的区别<br> <strong>URI</strong><br> uniform resource identifier,统一资源标识符,用来唯一的标识一个资源。Web上可用的每种资源如HTML文档、图像、视频片段、程序等都是一个用URI来定位的。<br> URI一般由三部分组成:<br> (1)访问资源的命名机制<br> (2)存放资源的主机名<br> (3)资源自身的名称,由路径表示,着重强调于资源。</p> <p><strong>URL</strong><br> uniform resource locator,统一资源定位器,它是一种具体的URI,即URL可以用来标识一个资源,而且还指明了如何locate这个资源。采用URL可以用一种统一的格式来描述各种信息资源,包括文件、服务器的地址和目录等。<br> URL一般由三部组成:<br> (1)协议(或称为服务方式)<br> (2)存有该资源的主机IP地址(有时也包括端口号)<br> (3)主机资源的具体地址。如目录和文件名等</p> <p><strong>URN</strong><br> uniform resource name,统一资源命名,是通过名字来标识资源,比如mailto:java-net@java.sun.com。</p> <p>URI是以一种抽象的,高层次概念定义统一资源标识,而URL和URN则是具体的资源标识的方式。URL和URN都是一种URI。笼统地说,每个 URL 都是 URI,但不一定每个 URI 都是 URL。这是因为 URI 还包括一个子类,即统一资源名称 (URN),它命名资源但不指定如何定位资源。</p> <p>16.常用的HTTP方法有哪些?<br> GET: 请求指定的页面信息,并返回页面主体<br> HEAD:类似于GET请求,只不过返回的响应中没有具体的内容,用于获取报头<br> POST:向指定资源提交数据并进行处理请求(例如提交表单或者上传文件)。数据被包含在请求体中。POST请求可能会导致新的资源的建立或已有资源的修改。<br> PUT:从客户端向服务器传送的数据取代指定的文档的内容<br> DELETE:请求服务器删除指定的页面<br> CONNECT:HTTP1.1协议中预留给能够将连接改为管道方式的代理服务器<br> OPTIONS:允许客户端查看服务器的性能<br> TRACE:回显服务器收到的请求,主要用于测试或诊断</p> <p>17.GET与POST方法的区别<br> post请求的过程:<br> (1)浏览器请求tcp连接(第一次握手)<br> (2)服务器答应进行tcp连接(第二次握手)<br> (3)浏览器确认,并发送post请求头(第三次握手,这个报文比较小,所以http会在此时进行第一次数据发送)<br> (4)服务器返回100 Continue响应<br> (5)浏览器发送数据<br> (6)服务器返回200 OK响应</p> <p>get请求的过程:<br> (1)浏览器请求tcp连接(第一次握手)<br> (2)服务器答应进行tcp连接(第二次握手)<br> (3)浏览器确认,并发送get请求头和数据(第三次握手,这个报文比较小,所以http会在此时进行第一次数据发送)<br> (4)服务器返回200 OK响应</p> <p><strong>区别:</strong><br> (1)效率<br> GET从服务器获取数据(也可以上传数据,参数就是),效率较高<br> POST可以向服务器发送数据和下载数据,效率不如GET<br> 原因:<br> 1)post请求包含更多的请求头<br> 因为post需要在请求的body部分包含数据,所以会多了几个数据描述部分的首部字段(如:content-type),这其实是微乎其微的。<br> 2)post在真正接收数据之前会先将请求头发送给服务器进行确认,然后才真正发送数据。<br> (2)缓存<br> GET 请求能够被缓存,默认的请求方式也是有缓存的,POST请求默认不会缓存。<br> 原因:<br> 缓存是针对URL来进行缓存的,GET请求其参数是直接加在URL上的,一种参数组合就有一种URL的缓存,可以根据参数来进行一一对应,重复请求是幂等的(不论请求多少次,结果都一样);<br> 而POST请求的URL没有参数,每次请求的URL都相同,数据体(HTTPBody)可能不同,无法一一对应,所以缓存没有意义。<br> (3)安全性<br> GET的所有参数全部包装在URL中,明文显示,且服务器的访问日志会记录,非常不安全;<br> POST的URL中只有资源路径,不包含参数,参数封装在二进制的数据体中,服务器也不会记录参数,相对安全,所有涉及用户隐私的数据都要用POST传输。<br> POST的安全是相对的,对于普通用户来说他们看不到明文,数据封装对他们来说就是屏障。但是对于专业人士,它们会抓包会分析,没有加密的数据包对他们来说也是小case。所以POST仅仅是相对安全,唯有对数据进行加密才会更安全。当然加密也有被破解的可能性,理论上所有的加密方式都可以破解,只是时间长短的问题。而加密算法要做的就是使得破解需要的时间尽量长,越长越安全。由于我们也需要解密,加密算法太过复杂也并非好事,这就要结合使用情况进行折中或者足够实际使用即可。<br> (4)数据量<br> HTTP协议中均没有对GET和POST请求的数据大小进行限制,但是实际应用中它们通常受限于软硬件平台的设计和性能。<br> GET:不同的浏览器和服务器不同,一般限制在2~8K之间,更加常见的是1k以内;<br> POST方法提交的数据比较大,大小靠服务器的设定值限制,PHP默认是2M。</p> <p>18.表单提交中get和post方式的区别归纳如下几点:<br> (1)get是从服务器上获取数据,post是向服务器传送数据。<br> (2)对于表单的提交方式,在服务器端只能用Request.QueryString来获取Get方式提交来的数据,用Post方式提交的数据只能用Request.Form来获取。<br> (3)一般来说,尽量避免使用Get方式提交表单,因为有可能会导致安全问题。比如说在登陆表单中用Get方式,用户输入的用户名和密码将在地址栏中暴露无遗。但是在分页程序中,用Get方式就比用Post好。<br> 在响应中唯一真正的区别在于第一行中用状态信息代替了请求信息。状态行(status line)通过提供一个状态码来说明所请求的资源情况。</p> <p>19.你觉得前端工程的价值体现在哪?<br> (1)为简化用户使用提供技术支持(交互部分);<br> (2)为多个浏览器兼容性提供支持;<br> (3)为提高用户浏览速度(浏览器性能)提供支持;<br> (4)为跨平台或者其他基于webkit或其他渲染引擎的应用提供支持;<br> (5)为展示数据提供支持(数据接口)。</p> <p>20.平时如何管理你的项目?<br> (1)先期团队必须确定好全局样式(globe.css),编码模式(utf-8) 等;<br> (2)编写习惯必须一致(例如都是采用继承式的写法,单样式都写成一行);<br> (3)标注样式编写人,各模块都及时标注(标注关键样式调用的地方);<br> (4)页面进行标注(例如 页面模块开始和结束);<br> (5)CSS跟HTML 分文件夹并行存放,命名都得统一(例如style.css);<br> (6)JS 分文件夹存放命名以该JS 功能为准英文翻译;<br> (7)图片采用整合的 images.png png8 格式文件使用尽量整合在一起使用方便将来的管理。</p> </div> </div> </div> </div> </div> <!--PC和WAP自适应版--> <div id="SOHUCS" sid="1298162719240822784"></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">你可能感兴趣的:(前端学习,前端面试)</h4> <div id="paradigm-article-related"> <div class="recommend-post mb30"> <ul class="widget-links"> <li><a href="/article/1894045088519090176.htm" title="2024年Web前端最新vue动态路由缓存【前进刷新、后退缓存】,2024历年华为跳动前端面试真题解析" target="_blank">2024年Web前端最新vue动态路由缓存【前进刷新、后退缓存】,2024历年华为跳动前端面试真题解析</a> <span class="text-muted">2401_84418948</span> <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>总结大厂面试问深度,小厂面试问广度,如果有同学想进大厂深造一定要有一个方向精通的惊艳到面试官,还要平时遇到问题后思考一下问题的本质,找方法解决是一个方面,看到问题本质是另一个方面。还有大家一定要有目标,我在很久之前就想着以后一定要去大厂,然后默默努力,每天看一些大佬们的文章,总是觉得只有再学深入一点才有机会,所以才有恒心一直学下去。开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最</div> </li> <li><a href="/article/1893939946314592256.htm" title="【如何优化 JavaScript 代码的性能?】" target="_blank">【如何优化 JavaScript 代码的性能?】</a> <span class="text-muted">程序员远仔</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95%E9%AB%98%E9%A2%91%E9%97%AE%E9%A2%98%E5%AE%9D%E5%85%B8/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><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/edge%E6%B5%8F%E8%A7%88%E5%99%A8/1.htm">edge浏览器</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/1.htm">前端框架</a> <div>如何优化JavaScript代码的性能?前言JavaScript是Web开发的核心语言,优化JavaScript代码的性能对于提升用户体验和应用的响应速度至关重要。本文将重点从理论角度探讨优化JavaScript代码性能的多种策略和最佳实践,减少代码示例,增加理论分析。关键词JavaScript、性能优化、事件循环、内存管理、DOM操作、异步编程、代码分割、懒加载、缓存、前端开发、前端面试、前端基</div> </li> <li><a href="/article/1893865926281981952.htm" title="2021中高级前端面试题合集,大厂内部资料" target="_blank">2021中高级前端面试题合集,大厂内部资料</a> <span class="text-muted">萌萌猫咪</span> <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/%E9%9D%A2%E8%AF%95/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/%E5%A4%A7%E5%89%8D%E7%AB%AF/1.htm">大前端</a> <div>第一个阶段,开发环境和工具准备浏览器(Google,FireFox,…)下载,安装前端开发工具vscode,下载、安装node、npm、webpack、webpack-cli、cnpm,配置前端开发环境下载、配置PHP和MySQL第二个阶段,前端入门,网页制作1,HTML:常用标签(div标签,p标签,span标签,a标签,img标签)锚点列表标签(有序列表,无序列表,自定义列表)表单标签表格标签</div> </li> <li><a href="/article/1893760275740422144.htm" title="2022年9月前端学习笔记" target="_blank">2022年9月前端学习笔记</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/html5/1.htm">html5</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>目录2022.09.011、overflow:auto;2、封装通用axios返回值类型3、vite构建的vue3项目适配移动端4、使用vue3+vite+TypeScript搭建新项目1.新建项目2.配置vue-router43.配置vuex45、深拷贝和浅拷贝1.浅拷贝2.深拷贝2022.09.021、同步与异步2、事件循环eventloop3、遇到的坑:vue中给点击事件@click使用三元</div> </li> <li><a href="/article/1893755865194885120.htm" title="【前端学习笔记】Vue3" target="_blank">【前端学习笔记】Vue3</a> <span class="text-muted">咔叽布吉</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%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/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a> <div>一、Vue3新变化Vue3相比于Vue2做了很多改进,不仅提升了性能,还引入了一些新的功能,使得开发更加高效、灵活。1.性能提升Vue3在性能方面做了大量的优化,尤其是在渲染和更新方面,主要通过以下几个方式提升:更快的虚拟DOM:Vue3的虚拟DOM实现进行了优化,减少了不必要的渲染和更新,提高了性能。TreeShaking:Vue3在构建时支持更好的TreeShaking(摇树优化),即只打包你</div> </li> <li><a href="/article/1893743134442057728.htm" title="【前端学习笔记】Vite" target="_blank">【前端学习笔记】Vite</a> <span class="text-muted">咔叽布吉</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%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/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a> <div>1.ViteVite是一个现代前端构建工具,旨在通过提供快速的开发体验和高效的构建性能来解决传统构建工具(如Webpack)在开发过程中的瓶颈。Vite的核心思想是通过利用浏览器原生的模块系统(ESModules)以及对构建过程进行优化,从而大大提升开发和构建的效率。Vite详细解读Vite是一个现代前端构建工具,旨在通过提供快速的开发体验和高效的构建性能来解决传统构建工具(如Webpack)在开</div> </li> <li><a href="/article/1893564352687042560.htm" title="2024年前端面试题webpack+vite4篇" target="_blank">2024年前端面试题webpack+vite4篇</a> <span class="text-muted">xiaoliyo_</span> <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/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/webpack/1.htm">webpack</a><a class="tag" taget="_blank" href="/search/node.js/1.htm">node.js</a> <div>2024年前端面试题webpack+vite4篇我希望我的答案和解释是通俗易懂的。webpack部分webpack的构建流程初始化流程:从配置文件和shell语句中读取和合并参数,并初始化需要使用的插件和配置插件执行环境所需要的参数编译构建流程:从Entry发出,针对每个Module串行调用对应的Loader去翻译文件内容,再找到该Module依赖的Module,递归地进行编译处理输出流程:对编译</div> </li> <li><a href="/article/1893562965941088256.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> <div>一、HTML考题(8题)1.前端页面有哪三层构成,分别是什么?作用是什么?//前端三层构成:有三层,分别是:html、css、js,那html为dom,css是样式,js是交互//浏览器进程模型:(1)浏览器是一个大进程,中包含多个进程,进程中也有很多线程。(2)那么就拿html和css来说,是靠GUI来渲染的,那么如果要避免回流重绘,需要靠GPU进程完成,这样性能会好。(3)js是靠渲染进程的渲</div> </li> <li><a href="/article/1893562208810496000.htm" title="前端面试题(四、webpack和vite)" target="_blank">前端面试题(四、webpack和vite)</a> <span class="text-muted">weixin_47880745</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/webpack/1.htm">webpack</a><a class="tag" taget="_blank" href="/search/node.js/1.htm">node.js</a><a class="tag" taget="_blank" href="/search/1024%E7%A8%8B%E5%BA%8F%E5%91%98%E8%8A%82/1.htm">1024程序员节</a> <div>构建工具因为浏览器只认识html、css和js,而我们写的jsx,vue、ts、less、js语法降级都需要处理后,再交给浏览器去运行。所以出现了构建工具帮我们做这些事情,开发者只关心怎么写代码就行。比如webpack、vite。一、webpack1.基础功能开发模式下:编译es6的模块化语法生产模式下:编译es6的模块化语法、压缩代码。2.集成功能通过集成一系列的第三方库,比如一些loader编</div> </li> <li><a href="/article/1893540904598302720.htm" title="2024前端面试题-工程化篇" target="_blank">2024前端面试题-工程化篇</a> <span class="text-muted">Adasunshine</span> <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/%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/webpack/1.htm">webpack</a> <div>1.webpack(模块打包工具)五大核心Entry入口,Output定义输出路径和命名规则,Loader模块转换器,Plugin扩展插件,Mode模式(Webpack使用相应模式的配置)2.谈一谈你对Loader和Plugin的理解,使用过哪些?loader:模块转换器,用于把模块原内容按照需求转换成新内容通过使用不同的Loader,Webpack可以要把不同的文件都转成JS文件,比如CSS、E</div> </li> <li><a href="/article/1893329608783228928.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> <div>以下是一些前端面试题:一、HTML/CSS部分如何实现一个元素的背景颜色渐变效果,并且在不同浏览器中保持兼容性?答案:对于现代浏览器,可以使用标准的CSS渐变语法。线性渐变示例(从左到右,红色到蓝色):background:linear-gradient(toright,red,blue);径向渐变示例(中心向四周,黄色到绿色):background:radial-gradient(circle,</div> </li> <li><a href="/article/1893293735857418240.htm" title="关于Flutter前端面试题及其答案解析" target="_blank">关于Flutter前端面试题及其答案解析</a> <span class="text-muted">HappyAcmen</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF%E9%9D%A2%E8%AF%95/1.htm">前端技术面试</a><a class="tag" taget="_blank" href="/search/flutter/1.htm">flutter</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>我的血液里流淌着战意!力量与智慧指引着我!文章目录1.什么是Flutter?2.Flutter的主要优势是什么?3.在Flutter中如何创建一个基本的布局?4.Flutter中的热重载功能有什么作用?5.Flutter中的setState是做什么的?6.Flutter中的动画是如何实现的?7.在Flutter中如何进行网络请求?1.使用Dart的内置HttpClient2.使用dio库3.使用h</div> </li> <li><a href="/article/1893270069669064704.htm" title="前端面试常见手写代码题" target="_blank">前端面试常见手写代码题</a> <span class="text-muted"></span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95/1.htm">前端面试</a> <div>文章目录前言:防抖节流函数柯里化函数组合instanceof实现实现new操作符的行为深拷贝继承实现:手写Promise数组中常见函数的实现前言:在前端面试中,经常会遇到要求手写的代码的题目,主要是考察我们的编程能力、和对JavaScript的理解以及对前端最佳实践的掌握。下面是我整理了一些常见的手写代码题目,您可以看看自己能实现哪些。。防抖防抖函数,确保一段时间内多次触发事件只执行一次。//--</div> </li> <li><a href="/article/1893135364810403840.htm" title="前端面试题】—53道常见NodeJS基础面试题(附答案)" target="_blank">前端面试题】—53道常见NodeJS基础面试题(附答案)</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/node.js/1.htm">node.js</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>Node.js是一个不错的选择,它是基于JavaScript语法的一套服务器端(后端)语言。想要在企业中做得更好,开发者需要更多地了解它,并掌握它的有关用法。1、你了解Node.js吗?Node.js是一个基于Chromev8引擎的服务器端JavaScript运行环境;Node.js是一个事件驱动、非阻塞式I/O的模型,轻量而又高效;Node.js的包管理器npm是全球最大的开源库生态系统。2、N</div> </li> <li><a href="/article/1893131833458094080.htm" title="关于Bootstrap的前端面试题及其通俗易懂的答案解析" target="_blank">关于Bootstrap的前端面试题及其通俗易懂的答案解析</a> <span class="text-muted">HappyAcmen</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF%E9%9D%A2%E8%AF%95/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/bootstrap/1.htm">bootstrap</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a> <div>文章目录1.什么是Bootstrap?2.Bootstrap的主要特点有哪些?3.Bootstrap中的栅格系统是如何工作的?4.如何在Bootstrap中创建一个按钮?5.如何使一个元素在Bootstrap中可见或隐藏?6.Bootstrap中的导航栏是如何工作的?7.如何在Bootstrap中创建一个下拉菜单?8.Bootstrap中的模态框是如何使用的?9.如何在Bootstrap中实现图片</div> </li> <li><a href="/article/1893041149568937984.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%A4%A7%E5%89%8D%E7%AB%AF/1.htm">大前端</a><a class="tag" taget="_blank" href="/search/typescript/1.htm">typescript</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%E6%A1%86%E6%9E%B6/1.htm">前端框架</a> <div>介绍codeABC是一个少儿编程启蒙项目,包括6个编程主题,每个主题包括超过20个关卡,typescript编写,基于Phaser游t戏引擎(https://github.com/photonstorm/phaser),不错的前端学习项目。纯web开发,可以发布为网页或APP。github仓库https://github.com/techtogood/CodeABC在线体验ffmagic.com/</div> </li> <li><a href="/article/1893020357170884608.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> <div>以下是一些前端面试题:一、HTML/CSS部分如何实现一个响应式的导航菜单,在移动设备上能够以汉堡菜单的形式展示?答案:使用CSS媒体查询来检测屏幕宽度。在HTML中,创建导航菜单结构,包含导航项和一个用于切换菜单显示的按钮(汉堡菜单图标)。在CSS中,对于较大屏幕(桌面端),正常显示导航菜单项,隐藏汉堡菜单按钮。当屏幕宽度小于某个阈值(如768px)时,隐藏导航菜单项,显示汉堡菜单按钮。通过Ja</div> </li> <li><a href="/article/1892827331865669632.htm" title="前端面试题---虚拟dom更新原理" target="_blank">前端面试题---虚拟dom更新原理</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%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a> <div>vue的生命周期里有"挂载"这个阶段这个阶段里,vue实例已经把准备好的组件挂载到页面,模版被编译成虚拟DOM,最终渲染到实际的dom中Vue虚拟DOM更新原理1数据变化:当组件数据变化时,Vue会重新生成虚拟DOM。2Diff算法:Vue比较新旧虚拟DOM,找到差异。3生成补丁:根据差异生成补丁(需要更新的DOM操作)。4应用补丁:将补丁应用到真实DOM,更新视图。5异步更新:Vue将更新操作异</div> </li> <li><a href="/article/1892296529092341760.htm" title="前端面试题(HTML篇)" target="_blank">前端面试题(HTML篇)</a> <span class="text-muted">每天一点点~</span> <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/javascript/1.htm">javascript</a> <div>1.网络中使用最多的图片格式有哪些?JPEG,GIF,PNG最流行的是JPEG格式,可以把文件压缩到最小在PS以JPEG格式存储时,提供11级压缩等级2.Doctype作用?严格模式与混杂模式如何区分?它们有何意义?声明文档类型声明位于位于HTML文档中的第一行,处于标签之前DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。标准模式(严格模式)浏览器按照W3C的标准解析执行代码标准模式(严</div> </li> <li><a href="/article/1892219834280767488.htm" title="【如何实现 JavaScript 的防抖和节流?】" target="_blank">【如何实现 JavaScript 的防抖和节流?】</a> <span class="text-muted">程序员远仔</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95%E9%AB%98%E9%A2%91%E9%97%AE%E9%A2%98%E5%AE%9D%E5%85%B8/1.htm">前端面试高频问题宝典</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</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%E6%A1%86%E6%9E%B6/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/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>如何实现JavaScript的防抖和节流?前言防抖(Debounce)和节流(Throttle)是JavaScript中优化高频事件处理的两种常用技术。它们可以有效减少事件处理函数的调用次数,提升性能并改善用户体验。本文将详细介绍防抖和节流的实现原理及其应用场景。关键词JavaScript、防抖、节流、高频事件、性能优化、事件处理、前端开发、前端面试、前端基础、前端进阶、前端工程化、前端开发最佳实</div> </li> <li><a href="/article/1891880690992082944.htm" title="前端面试题" target="_blank">前端面试题</a> <span class="text-muted">阿芯爱编程</span> <a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>以下是一些前端面试题:一、HTML/CSS部分请描述HTML的语义化标签的重要性,并列举一些常用的语义化标签。答案:重要性:对搜索引擎优化(SEO)有帮助,搜索引擎能够更好地理解页面结构,从而提高网站在搜索结果中的排名。提高代码的可读性和可维护性,使开发者更容易理解页面布局和功能逻辑。对于辅助技术(如屏幕阅读器)更友好,能够准确地向用户传达页面内容。常用语义化标签::定义页面或区域的头部内容,通常</div> </li> <li><a href="/article/1891418268934139904.htm" title="前端面试题常考汇总1" target="_blank">前端面试题常考汇总1</a> <span class="text-muted">RayFars</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>JS部分1.解释JavaScript中的闭包,并举例说明其应用场景闭包是指函数能够记住并访问它的词法作用域,即使这个函数在词法作用域之外执行。应用场景:数据隐藏:通过闭包,可以创建私有变量,只通过特定的函数来访问和修改这些变量。回调函数和事件处理:闭包常用于设置回调函数,因为回调函数需要访问其外部函数的变量。functioncreateCounter(){letcount=0;returnfunc</div> </li> <li><a href="/article/1891325943818022912.htm" title="前端面试题2(vue3)" target="_blank">前端面试题2(vue3)</a> <span class="text-muted">GIS-CL</span> <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/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a> <div>1.Vue3中的CompositionAPI是什么?与OptionsAPI的区别是什么?答案:CompositionAPI是Vue3引入的一种新的编程模型,它允许开发者以更灵活和模块化的方式组织代码。与传统的OptionsAPI相比,CompositionAPI通过setup()函数集中管理组件的状态和行为,使得逻辑复用和代码组织变得更加容易。OptionsAPI:在Vue2中广泛使用,通过dat</div> </li> <li><a href="/article/1891302346894405632.htm" title="web前端面试问什么,【前端,2024华为前端高级面试题及答案" target="_blank">web前端面试问什么,【前端,2024华为前端高级面试题及答案</a> <span class="text-muted">uiuuyy67</span> <a class="tag" taget="_blank" href="/search/2024%E5%B9%B4%E7%A8%8B%E5%BA%8F%E5%91%98%E5%AD%A6%E4%B9%A0/1.htm">2024年程序员学习</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%8D%8E%E4%B8%BA/1.htm">华为</a> <div>效果截图:用户名是只读的,所以无法在text文本框里输入值;账号是禁用的,直接变成灰色了。2.input标签常用的type属性值讲解text文本框password密码框radio单选框checkbox复选框file文件选择hidden隐藏域hidden是用户看不见的东西,给管理员(写网页的)操作保存信息的!submit提交reset重置(2)select下拉框option:下拉选项(下拉框的基本标</div> </li> <li><a href="/article/1891289237018439680.htm" title="前端高级面试题" target="_blank">前端高级面试题</a> <span class="text-muted">阿芯爱编程</span> <a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>以下是一些高级前端面试题及答案:一、性能优化如何对大型前端项目进行性能剖析(profiling)?答案:使用ChromeDevTools中的Performance面板。可以记录页面加载和交互过程中的各种性能指标,如脚本执行时间、渲染时间、重绘和回流次数等。利用Lighthouse工具,它可以对网页进行全面的性能评估,包括加载性能、可访问性、最佳实践等方面,并给出优化建议。在代码中手动插入性能测量点</div> </li> <li><a href="/article/1891184069010583552.htm" title="前端框架Vue内容回顾" target="_blank">前端框架Vue内容回顾</a> <span class="text-muted">GISer_Jinger</span> <a class="tag" taget="_blank" href="/search/Javascript/1.htm">Javascript</a><a class="tag" taget="_blank" href="/search/Vue/1.htm">Vue</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/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> <div>前端面试Vue必备内容详解如果你正在准备Vue相关的前端面试,这份详细指南将帮助你掌握Vue核心知识,助你高效备战面试。1.Vue基础知识1.1Vue的核心概念声明式渲染:Vue采用数据驱动视图的方式,通过{{}}语法或v-bind绑定数据,无需手动操作DOM。组件化开发:Vue提供了单文件组件(SFC),支持HTML、CSS、JS组合在.vue文件中,提高代码复用性和可维护性。数据驱动:Vue采</div> </li> <li><a href="/article/1891078912692252672.htm" title="Flux架构:构建可预测的Web应用状态管理体系" target="_blank">Flux架构:构建可预测的Web应用状态管理体系</a> <span class="text-muted">阿珊和她的猫</span> <a class="tag" taget="_blank" href="/search/%E6%9E%B6%E6%9E%84/1.htm">架构</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>前端开发工程师、技术日更博主、已过CET6阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1牛客高级专题作者、打造专栏《前端面试必备》、《2024面试高频手撕题》蓝桥云课签约作者、上架课程《Vue.js和Egg.js开发企业级健康管理项目》、《带你从入门到实战全面掌握uni-app》前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到网站。文章</div> </li> <li><a href="/article/1890811727436640256.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/html5/1.htm">html5</a><a class="tag" taget="_blank" href="/search/ajax/1.htm">ajax</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/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/firefox/1.htm">firefox</a><a class="tag" taget="_blank" href="/search/chrome/1.htm">chrome</a> <div>一、Ajax、JSONP、JSON、Fetch和Axios技术详解1.Ajax(异步JavaScript和XML)什么是Ajax?Ajax是一种用于在不刷新页面的情况下与服务器进行数据交互的技术。它通过`XMLHttpRequest`对象实现。优点-支持同步和异步请求。-能够发送和接收多种格式的数据(如JSON、XML等)。缺点-原生代码较复杂。-不支持跨域请求(需要服务器配置CORS或使用JSO</div> </li> <li><a href="/article/1890793818513534976.htm" title="Web前端面试题(持续更新中)" target="_blank">Web前端面试题(持续更新中)</a> <span class="text-muted">Bearin</span> <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/1890792305711968256.htm" title="2024年最新入门基于Node的Web框架——Koa(2),2024年最新前端开发面试题及答案" target="_blank">2024年最新入门基于Node的Web框架——Koa(2),2024年最新前端开发面试题及答案</a> <span class="text-muted">2301_82243626</span> <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>最后文章到这里就结束了,如果觉得对你有帮助可以点个赞哦开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】},“querystring”:“search=koa&keyword=context”}responseresponse对象是用于设置一些响应信息给客户端,这些和http请求的响应字段是一样的。比如说可以设置状态码、响应格式等相关信息。app.use(async(c</div> </li> <li><a href="/article/28.htm" title="如何用ruby来写hadoop的mapreduce并生成jar包" target="_blank">如何用ruby来写hadoop的mapreduce并生成jar包</a> <span class="text-muted">wudixiaotie</span> <a class="tag" taget="_blank" href="/search/mapreduce/1.htm">mapreduce</a> <div>ruby来写hadoop的mapreduce,我用的方法是rubydoop。怎么配置环境呢: 1.安装rvm:     不说了 网上有 2.安装ruby:     由于我以前是做ruby的,所以习惯性的先安装了ruby,起码调试起来比jruby快多了。 3.安装jruby:     rvm install jruby然后等待安</div> </li> <li><a href="/article/155.htm" title="java编程思想 -- 访问控制权限" target="_blank">java编程思想 -- 访问控制权限</a> <span class="text-muted">百合不是茶</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E8%AE%BF%E9%97%AE%E6%8E%A7%E5%88%B6%E6%9D%83%E9%99%90/1.htm">访问控制权限</a><a class="tag" taget="_blank" href="/search/%E5%8D%95%E4%BE%8B%E6%A8%A1%E5%BC%8F/1.htm">单例模式</a> <div>访问权限是java中一个比较中要的知识点,它规定者什么方法可以访问,什么不可以访问   一:包访问权限;   自定义包: package com.wj.control; //包 public class Demo { //定义一个无参的方法 public void DemoPackage(){ System.out.println("调用</div> </li> <li><a href="/article/282.htm" title="[生物与医学]请审慎食用小龙虾" target="_blank">[生物与医学]请审慎食用小龙虾</a> <span class="text-muted">comsci</span> <a class="tag" taget="_blank" href="/search/%E7%94%9F%E7%89%A9/1.htm">生物</a> <div>      现在的餐馆里面出售的小龙虾,有一些是在野外捕捉的,这些小龙虾身体里面可能带有某些病毒和细菌,人食用以后可能会导致一些疾病,严重的甚至会死亡.....      所以,参加聚餐的时候,最好不要点小龙虾...就吃养殖的猪肉,牛肉,羊肉和鱼,等动物蛋白质     </div> </li> <li><a href="/article/409.htm" title="org.apache.jasper.JasperException: Unable to compile class for JSP:" target="_blank">org.apache.jasper.JasperException: Unable to compile class for JSP:</a> <span class="text-muted">商人shang</span> <a class="tag" taget="_blank" href="/search/maven/1.htm">maven</a><a class="tag" taget="_blank" href="/search/2.2/1.htm">2.2</a><a class="tag" taget="_blank" href="/search/jdk1.8/1.htm">jdk1.8</a> <div>环境: jdk1.8    maven  tomcat7-maven-plugin  2.0 原因: tomcat7-maven-plugin  2.0 不知吃 jdk 1.8,换成 tomcat7-maven-plugin  2.2就行,即     <plugin> </div> </li> <li><a href="/article/536.htm" title="你的垃圾你处理掉了吗?GC" target="_blank">你的垃圾你处理掉了吗?GC</a> <span class="text-muted">oloz</span> <a class="tag" taget="_blank" href="/search/GC/1.htm">GC</a> <div>前序:本人菜鸟,此文研究学习来自网络,各位牛牛多指教  1.垃圾收集算法的核心思想   Java语言建立了垃圾收集机制,用以跟踪正在使用的对象和发现并回收不再使用(引用)的对象。该机制可以有效防范动态内存分配中可能发生的两个危险:因内存垃圾过多而引发的内存耗尽,以及不恰当的内存释放所造成的内存非法引用。   垃圾收集算法的核心思想是:对虚拟机可用内存空间,即堆空间中的对象进行识别</div> </li> <li><a href="/article/663.htm" title="shiro 和 SESSSION" target="_blank">shiro 和 SESSSION</a> <span class="text-muted">杨白白</span> <a class="tag" taget="_blank" href="/search/shiro/1.htm">shiro</a> <div>shiro 在web项目里默认使用的是web容器提供的session,也就是说shiro使用的session是web容器产生的,并不是自己产生的,在用于非web环境时可用其他来源代替。在web工程启动的时候它就和容器绑定在了一起,这是通过web.xml里面的shiroFilter实现的。通过session.getSession()方法会在浏览器cokkice产生JESSIONID,当关闭浏览器,此</div> </li> <li><a href="/article/790.htm" title="移动互联网终端 淘宝客如何实现盈利" target="_blank">移动互联网终端 淘宝客如何实现盈利</a> <span class="text-muted">小桔子</span> <a class="tag" taget="_blank" href="/search/%E7%A7%BB%E5%8B%95%E5%AE%A2%E6%88%B6%E7%AB%AF/1.htm">移動客戶端</a><a class="tag" taget="_blank" href="/search/%E6%B7%98%E5%AE%A2/1.htm">淘客</a><a class="tag" taget="_blank" href="/search/%E6%B7%98%E5%AF%B6App/1.htm">淘寶App</a> <div>       2012年淘宝联盟平台为站长和淘宝客带来的分成收入突破30亿元,同比增长100%。而来自移动端的分成达1亿元,其中美丽说、蘑菇街、果库、口袋购物等App运营商分成近5000万元。 可以看出,虽然目前阶段PC端对于淘客而言仍旧是盈利的大头,但移动端已经呈现出爆发之势。而且这个势头将随着智能终端(手机,平板)的加速普及而更加迅猛</div> </li> <li><a href="/article/917.htm" title="wordpress小工具制作" target="_blank">wordpress小工具制作</a> <span class="text-muted">aichenglong</span> <a class="tag" taget="_blank" href="/search/wordpress/1.htm">wordpress</a><a class="tag" taget="_blank" href="/search/%E5%B0%8F%E5%B7%A5%E5%85%B7/1.htm">小工具</a> <div>wordpress 使用侧边栏的小工具,很方便调整页面结构 小工具的制作过程 1 在自己的主题文件中新建一个文件夹(如widget),在文件夹中创建一个php(AWP_posts-category.php) 小工具是一个类,想侧边栏一样,还得使用代码注册,他才可以再后台使用,基本的代码一层不变 <?php class AWP_Post_Category extends WP_Wi</div> </li> <li><a href="/article/1044.htm" title="JS微信分享" target="_blank">JS微信分享</a> <span class="text-muted">AILIKES</span> <a class="tag" taget="_blank" href="/search/js/1.htm">js</a> <div>// 所有功能必须包含在 WeixinApi.ready 中进行    WeixinApi.ready(function(Api) {        // 微信分享的数据            var wxData = {       &nb</div> </li> <li><a href="/article/1171.htm" title="封装探讨" target="_blank">封装探讨</a> <span class="text-muted">百合不是茶</span> <a class="tag" taget="_blank" href="/search/JAVA%E9%9D%A2%E5%90%91%E5%AF%B9%E8%B1%A1+%E5%B0%81%E8%A3%85/1.htm">JAVA面向对象 封装</a> <div>//封装   属性 方法 将某些东西包装在一起,通过创建对象或使用静态的方法来调用,称为封装;封装其实就是有选择性地公开或隐藏某些信息,它解决了数据的安全性问题,增加代码的可读性和可维护性   在 Aname类中申明三个属性,将其封装在一个类中:通过对象来调用   例如   1: //属性 将其设为私有 姓名 name 可以公开 </div> </li> <li><a href="/article/1298.htm" title="jquery radio/checkbox change事件不能触发的问题" target="_blank">jquery radio/checkbox change事件不能触发的问题</a> <span class="text-muted">bijian1013</span> <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/jquery/1.htm">jquery</a> <div>我想让radio来控制当前我选择的是机动车还是特种车,如下所示:  <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"><</div> </li> <li><a href="/article/1425.htm" title="AngularJS中安全性措施" target="_blank">AngularJS中安全性措施</a> <span class="text-muted">bijian1013</span> <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/AngularJS/1.htm">AngularJS</a><a class="tag" taget="_blank" href="/search/%E5%AE%89%E5%85%A8%E6%80%A7/1.htm">安全性</a><a class="tag" taget="_blank" href="/search/XSRF/1.htm">XSRF</a><a class="tag" taget="_blank" href="/search/JSON%E6%BC%8F%E6%B4%9E/1.htm">JSON漏洞</a> <div>        在使用web应用中,安全性是应该首要考虑的一个问题。AngularJS提供了一些辅助机制,用来防护来自两个常见攻击方向的网络攻击。 一.JSON漏洞         当使用一个GET请求获取JSON数组信息的时候(尤其是当这一信息非常敏感,</div> </li> <li><a href="/article/1552.htm" title="[Maven学习笔记九]Maven发布web项目" target="_blank">[Maven学习笔记九]Maven发布web项目</a> <span class="text-muted">bit1129</span> <a class="tag" taget="_blank" href="/search/maven/1.htm">maven</a> <div>基于Maven的web项目的标准项目结构 user-project     user-core     user-service     user-web        src      </div> </li> <li><a href="/article/1679.htm" title="【Hive七】Hive用户自定义聚合函数(UDAF)" target="_blank">【Hive七】Hive用户自定义聚合函数(UDAF)</a> <span class="text-muted">bit1129</span> <a class="tag" taget="_blank" href="/search/hive/1.htm">hive</a> <div>用户自定义聚合函数,用户提供的多个入参通过聚合计算(求和、求最大值、求最小值)得到一个聚合计算结果的函数。 问题:UDF也可以提供输入多个参数然后输出一个结果的运算,比如加法运算add(3,5),add这个UDF需要实现UDF的evaluate方法,那么UDF和UDAF的实质分别究竟是什么?   Double evaluate(Double a, Double b)  </div> </li> <li><a href="/article/1806.htm" title="通过 nginx-lua 给 Nginx 增加 OAuth 支持" target="_blank">通过 nginx-lua 给 Nginx 增加 OAuth 支持</a> <span class="text-muted">ronin47</span> <div>前言:我们使用Nginx的Lua中间件建立了OAuth2认证和授权层。如果你也有此打算,阅读下面的文档,实现自动化并获得收益。SeatGeek 在过去几年中取得了发展,我们已经积累了不少针对各种任务的不同管理接口。我们通常为新的展示需求创建新模块,比如我们自己的博客、图表等。我们还定期开发内部工具来处理诸如部署、可视化操作及事件处理等事务。在处理这些事务中,我们使用了几个不同的接口来认证: &n</div> </li> <li><a href="/article/1933.htm" title="利用tomcat-redis-session-manager做session同步时自定义类对象属性保存不上的解决方法" target="_blank">利用tomcat-redis-session-manager做session同步时自定义类对象属性保存不上的解决方法</a> <span class="text-muted">bsr1983</span> <a class="tag" taget="_blank" href="/search/session/1.htm">session</a> <div>在利用tomcat-redis-session-manager做session同步时,遇到了在session保存一个自定义对象时,修改该对象中的某个属性,session未进行序列化,属性没有被存储到redis中。 在 tomcat-redis-session-manager的github上有如下说明: Session Change Tracking As noted in the &qu</div> </li> <li><a href="/article/2060.htm" title="《代码大全》表驱动法-Table Driven Approach-1" target="_blank">《代码大全》表驱动法-Table Driven Approach-1</a> <span class="text-muted">bylijinnan</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a> <div>关于Table Driven Approach的一篇非常好的文章: http://www.codeproject.com/Articles/42732/Table-driven-Approach package com.ljn.base; import java.util.Random; public class TableDriven { public </div> </li> <li><a href="/article/2187.htm" title="Sybase封锁原理" target="_blank">Sybase封锁原理</a> <span class="text-muted">chicony</span> <a class="tag" taget="_blank" href="/search/Sybase/1.htm">Sybase</a> <div>       昨天在操作Sybase IQ12.7时意外操作造成了数据库表锁定,不能删除被锁定表数据也不能往其中写入数据。由于着急往该表抽入数据,因此立马着手解决该表的解锁问题。     无奈此前没有接触过Sybase IQ12.7这套数据库产品,加之当时已属于下班时间无法求助于支持人员支持,因此只有借助搜索引擎强大的</div> </li> <li><a href="/article/2314.htm" title="java异常处理机制" target="_blank">java异常处理机制</a> <span class="text-muted">CrazyMizzz</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>java异常关键字有以下几个,分别为 try catch final throw throws 他们的定义分别为 try:    Opening exception-handling statement. catch:  Captures the exception. finally: Runs its code before terminating</div> </li> <li><a href="/article/2441.htm" title="hive 数据插入DML语法汇总" target="_blank">hive 数据插入DML语法汇总</a> <span class="text-muted">daizj</span> <a class="tag" taget="_blank" href="/search/hive/1.htm">hive</a><a class="tag" taget="_blank" href="/search/DML/1.htm">DML</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E6%8F%92%E5%85%A5/1.htm">数据插入</a> <div>Hive的数据插入DML语法汇总1、Loading files into tables语法:1) LOAD DATA [LOCAL] INPATH 'filepath' [OVERWRITE] INTO TABLE tablename [PARTITION (partcol1=val1, partcol2=val2 ...)]解释:1)、上面命令执行环境为hive客户端环境下: hive>l</div> </li> <li><a href="/article/2568.htm" title="工厂设计模式" target="_blank">工厂设计模式</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/1.htm">设计模式</a> <div>  使用设计模式是促进最佳实践和良好设计的好办法。设计模式可以提供针对常见的编程问题的灵活的解决方案。 工厂模式 工厂模式(Factory)允许你在代码执行时实例化对象。它之所以被称为工厂模式是因为它负责“生产”对象。工厂方法的参数是你要生成的对象对应的类名称。 Example #1 调用工厂方法(带参数) <?phpclass Example{ </div> </li> <li><a href="/article/2695.htm" title="mysql字符串查找函数" target="_blank">mysql字符串查找函数</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a> <div>  FIND_IN_SET(str,strlist) 假如字符串str 在由N 子链组成的字符串列表strlist 中,则返回值的范围在1到 N 之间。一个字符串列表就是一个由一些被‘,’符号分开的自链组成的字符串。如果第一个参数是一个常数字符串,而第二个是type SET列,则   FIND_IN_SET() 函数被优化,使用比特计算。如果str不在strlist 或st</div> </li> <li><a href="/article/2822.htm" title="jvm内存管理" target="_blank">jvm内存管理</a> <span class="text-muted">easterfly</span> <a class="tag" taget="_blank" href="/search/jvm/1.htm">jvm</a> <div>一、JVM堆内存的划分 分为年轻代和年老代。年轻代又分为三部分:一个eden,两个survivor。 工作过程是这样的:e区空间满了后,执行minor gc,存活下来的对象放入s0, 对s0仍会进行minor gc,存活下来的的对象放入s1中,对s1同样执行minor gc,依旧存活的对象就放入年老代中; 年老代满了之后会执行major gc,这个是stop the word模式,执行</div> </li> <li><a href="/article/2949.htm" title="CentOS-6.3安装配置JDK-8" target="_blank">CentOS-6.3安装配置JDK-8</a> <span class="text-muted">gengzg</span> <a class="tag" taget="_blank" href="/search/centos/1.htm">centos</a> <div>JAVA_HOME=/usr/java/jdk1.8.0_45 JRE_HOME=/usr/java/jdk1.8.0_45/jre PATH=$PATH:$JAVA_HOME/bin:$JRE_HOME/bin CLASSPATH=.:$JAVA_HOME/lib/dt.jar:$JAVA_HOME/lib/tools.jar:$JRE_HOME/lib export JAVA_HOME</div> </li> <li><a href="/article/3076.htm" title="【转】关于web路径的获取方法" target="_blank">【转】关于web路径的获取方法</a> <span class="text-muted">huangyc1210</span> <a class="tag" taget="_blank" href="/search/Web/1.htm">Web</a><a class="tag" taget="_blank" href="/search/%E8%B7%AF%E5%BE%84/1.htm">路径</a> <div>假定你的web application 名称为news,你在浏览器中输入请求路径:  http://localhost:8080/news/main/list.jsp  则执行下面向行代码后打印出如下结果:  1、 System.out.println(request.getContextPath()); //可返回站点的根路径。也就是项</div> </li> <li><a href="/article/3203.htm" title="php里获取第一个中文首字母并排序" target="_blank">php里获取第一个中文首字母并排序</a> <span class="text-muted">远去的渡口</span> <a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/1.htm">数据结构</a><a class="tag" taget="_blank" href="/search/PHP/1.htm">PHP</a> <div>很久没来更新博客了,还是觉得工作需要多总结的好。今天来更新一个自己认为比较有成就的问题吧。 最近在做储值结算,需求里结算首页需要按门店的首字母A-Z排序。我的数据结构原本是这样的: Array ( [0] => Array ( [sid] => 2885842 [recetcstoredpay] =&g</div> </li> <li><a href="/article/3330.htm" title="java内部类" target="_blank">java内部类</a> <span class="text-muted">hm4123660</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%86%85%E9%83%A8%E7%B1%BB/1.htm">内部类</a><a class="tag" taget="_blank" href="/search/%E5%8C%BF%E5%90%8D%E5%86%85%E9%83%A8%E7%B1%BB/1.htm">匿名内部类</a><a class="tag" taget="_blank" href="/search/%E6%88%90%E5%91%98%E5%86%85%E9%83%A8%E7%B1%BB/1.htm">成员内部类</a><a class="tag" taget="_blank" href="/search/%E6%96%B9%E6%B3%95%E5%86%85%E9%83%A8%E7%B1%BB/1.htm">方法内部类</a> <div>      在Java中,可以将一个类定义在另一个类里面或者一个方法里面,这样的类称为内部类。内部类仍然是一个独立的类,在编译之后内部类会被编译成独立的.class文件,但是前面冠以外部类的类名和$符号。内部类可以间接解决多继承问题,可以使用内部类继承一个类,外部类继承一个类,实现多继承。      &nb</div> </li> <li><a href="/article/3457.htm" title="Caused by: java.lang.IncompatibleClassChangeError: class org.hibernate.cfg.Exten" target="_blank">Caused by: java.lang.IncompatibleClassChangeError: class org.hibernate.cfg.Exten</a> <span class="text-muted">zhb8015</span> <div>maven pom.xml关于hibernate的配置和异常信息如下,查了好多资料,问题还是没有解决。只知道是包冲突,就是不知道是哪个包....遇到这个问题的分享下是怎么解决的。。   maven pom:   <dependency> <groupId>org.hibernate</groupId> <ar</div> </li> <li><a href="/article/3584.htm" title="Spark 性能相关参数配置详解-任务调度篇" target="_blank">Spark 性能相关参数配置详解-任务调度篇</a> <span class="text-muted">Stark_Summer</span> <a class="tag" taget="_blank" href="/search/spark/1.htm">spark</a><a class="tag" taget="_blank" href="/search/cache/1.htm">cache</a><a class="tag" taget="_blank" href="/search/cpu/1.htm">cpu</a><a class="tag" taget="_blank" href="/search/%E4%BB%BB%E5%8A%A1%E8%B0%83%E5%BA%A6/1.htm">任务调度</a><a class="tag" taget="_blank" href="/search/yarn/1.htm">yarn</a> <div>随着Spark的逐渐成熟完善, 越来越多的可配置参数被添加到Spark中来, 本文试图通过阐述这其中部分参数的工作原理和配置思路, 和大家一起探讨一下如何根据实际场合对Spark进行配置优化。   由于篇幅较长,所以在这里分篇组织,如果要看最新完整的网页版内容,可以戳这里:http://spark-config.readthedocs.org/,主要是便</div> </li> <li><a href="/article/3711.htm" title="css3滤镜" target="_blank">css3滤镜</a> <span class="text-muted">wangkeheng</span> <a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a> <div>经常看到一些网站的底部有一些灰色的图标,鼠标移入的时候会变亮,开始以为是js操作src或者bg呢,搜索了一下,发现了一个更好的方法:通过css3的滤镜方法。 html代码: <a href='' class='icon'><img src='utv.jpg' /></a> css代码: .icon{-webkit-filter: graysc</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>