—转载


 

 

说说若对闭包的知

 


 

以闭包主要是以筹私有的章程与变量。闭包的长处是好免全局变量的招,缺点是闭包会常驻内存,会附加内存使用量,使用不当很容易招内存泄露。

 

闭包有三只特点:

 >1.函数嵌套函数

>2.函数内部可以引用外部的参数和变量

>3.参数和变量不会被垃圾回收机制回收

 

呼吁你谈谈Cookie的弊端


 

`cookie`虽在坚持不懈保存客户端数据提供了便民,分担了服务器存储的背,但要么时有发生成千上万局限性的。

首先:每个特定的域名下最为多酷成20只`cookie`

 

    1.IE6或更低版本最多20个cookie

    2.IE7和之后的版本最后可以有50个cookie。

    3.Firefox最多50个cookie

    4.chrome和Safari没有做硬性限制

 

`IE`和`Opera` 会清理近期起码使用的`cookie`,`Firefox`见面随便清理`cookie`。

`cookie`的极度深大约为`4096`字节,为了兼容性,一般不能够过`4095`字节。

IE 提供了平等种存储可以持久化用户数量,叫做`userdata`,从`IE5.0`尽管开支持。每个数据最多128K,每个域名下最为多1M。这个持久化数据在缓存中,如果缓存没有清理,那么会直接有。

 

 

优点:极高的扩展性和可用性



    1.通过良好的编程,控制保存在cookie中的session对象的大小。

    2.通过加密和安全传输技术(SSL),减少cookie被破解的可能性。

    3.只在cookie中存放不敏感数据,即使被盗也不会有重大损失。

    4.控制cookie的生命期,使之不会永远有效。偷盗者很可能拿到一个过期的cookie。

 

缺点:



    1.`Cookie`数量和长度的限制。每个domain最多只能有20条cookie,每个cookie长度不能超过4KB,否则会被截掉。



    2.安全性问题。如果cookie被人拦截了,那人就可以取得所有的session信息。即使加密也与事无补,因为拦截者并不需要知道cookie的意义,他只要原样转发cookie就可以达到目的了。



    3.有些状态不可能保存在客户端。例如,为了防止重复提交表单,我们需要在服务器端保存一个计数器。如果我们把这个计数器保存在客户端,那么它起不到任何作用。

 

 

 

 

浏览器本地存储

以可比高版本的浏览器被,`js`提供了`sessionStorage`和`globalStorage`。在`HTML5`蒙提供了`localStorage`来取代`globalStorage`。

`html5`中的`Web Storage`包括了有限种植存储方:`sessionStorage`和`localStorage`。

`sessionStorage`用以地方存储一个对话(session)中之数,这些多少只有当与一个会话中之页面才会顾并且当会说话了后数吧随即销毁。因此`sessionStorage`勿是一致栽持久化的当地存储,仅仅是会见讲话级别的储存。

而`localStorage`用以持久化的地头存储,除非主动删除数据,否则数据是世代不会见过的。

 

 

web storage和cookie的区别

 


 

 

`Web Storage`的定义以及`cookie`貌似,区别是她是为还老容量存储设计的。`Cookie`的分寸是受限的,并且每次你请一个初的页面的时光`Cookie`犹见面为发送过去,这样平空浪费了牵动富,另外`cookie`尚待指定作用域,不得以跨域调用。

 

而外,`Web Storage`拥有`setItem,getItem,removeItem,clear`等方法,不像`cookie`得前端开发者自己包裹`setCookie,getCookie`。

 

但是`cookie`啊是未可以或缺的:`cookie`的作用是跟服务器进行交互,作为`HTTP`专业的如出一辙有要留存 ,而`Web Storage`仅仅是以在本土“存储”数据要非常

 

浏览器的支持除了`IE7`暨以下非支持外,其他专业浏览器还完全支持(ie及FF需于web服务器里运行),值得一提的凡IE总是办好事,例如IE7、IE6中之`userData`实质上就是是`javascript`当地存储的缓解方案。通过简单的代码封装好合到独具的浏览器还支持`web storage`。

 

 

 

`localStorage`和`sessionStorage`犹装有相同之操作方法,例如`setItem、getItem`和`removeItem`等

 

 

 

cookie 和session 的区别:

 

     1、cookie数据存放在客户的浏览器上,session数据放在服务器上。

     2、cookie不是很安全,别人可以分析存放在本地的COOKIE并进行COOKIE欺骗

        考虑到安全应当使用session。

     3、session会在一定时间内保存在服务器上。当访问增多,会比较占用你服务器的性能

         考虑到减轻服务器性能方面,应当使用COOKIE。

     4、单个cookie保存的数据不能超过4K,很多浏览器都限制一个站点最多保存20个cookie。

     5、所以个人建议:

        将登陆信息等重要信息存放为SESSION

        其他信息如果需要保留,可以放在COOKIE中

 

CSS 相关题材


 

 

display:none和visibility:hidden的区别?

 

 

    display:none  隐藏对应的元素,在文档布局中不再给它分配空间,它各边的因素会合并,

    就当他从来不存在。

    

    visibility:hidden  隐藏对应的要素,但是于文档布局中仍保存原来的上空。

 

CSS中 link 和@import 的分是?

 

    (1) link属于HTML标签,而@import是CSS提供的; 

    (2) 页面被加载的时,link会同时被加载,而@import引用的CSS会等到页面被加载完再加载;

    (3) import只在IE5以上才能识别,而link是HTML标签,无兼容问题; 

    (4) link方式的样式的权重 高于@import的权重.

 

 

position:absolute和float属性的异同  

   

    A:共同点:

    对内联元素设置`float`和`absolute`属性,可以让元素脱离文档流,并且可以设置其宽高。



    B:不同点:

    float仍会占据位置,position会覆盖文档流中的其他元素。

 

 

介绍一下box-sizing属性?

 

`box-sizing`属性主要用来控制元素的盒模型的解析模式。默认值是`content-box`。



- `content-box`:让元素维持W3C的标准盒模型。元素的宽度/高度由border + padding + content的宽度/高度决定,设置width/height属性指的是content部分的宽/高



- `border-box`:让元素维持IE传统盒模型(IE6以下版本和IE6~7的怪异模式)。设置width/height属性指的是border + padding + content

 

 

规范浏览器下,按照W3C规范对盒模型解析,一旦修改了元素的边框要内距,就会潜移默化因素的盒子尺寸,就只好又计算元素的盒子尺寸,从而影响整页面的布局。    

 

 

CSS 选择适合发哪些?哪些性可以延续?优先级算法如何算? CSS3新加伪类有那些?

 

    1.id选择器( # myid)

    2.类选择器(.myclassname)

    3.标签选择器(div, h1, p)

    4.相邻选择器(h1 + p)

    5.子选择器(ul > li)

    6.后代选择器(li a)

    7.通配符选择器( * )

    8.属性选择器(a[rel = "external"])

    9.伪类选择器(a: hover, li:nth-child)



  *   可继承的样式: font-size font-family color, text-indent;



  *   不可继承的样式:border padding margin width height ;



  *   优先级就近原则,同权重情况下样式定义最近者为准;



  *   载入样式以最后载入的定位为准;



>优先级为:





    !important >  id > class > tag  



    important 比 内联优先级高,但内联比 id 要高

 

>CSS3初添伪类举例:

 

   p:first-of-type 选择属于其父元素的首个 <p> 元素的每个 <p> 元素。

    p:last-of-type  选择属于其父元素的最后 <p> 元素的每个 <p> 元素。

    p:only-of-type  选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。

    p:only-child    选择属于其父元素的唯一子元素的每个 <p> 元素。

    p:nth-child(2)  选择属于其父元素的第二个子元素的每个 <p> 元素。

    :enabled  :disabled 控制表单控件的禁用状态。

    :checked        单选框或复选框被选中。

 

 

 

position的价值, relative和absolute分别是相对于哪个进行定点的?

 

    absolute 

            生成绝对定位的元素, 相对于最近一级的 定位不是 static 的父元素来进行定位。



    fixed (老IE不支持)

        生成绝对定位的元素,相对于浏览器窗口进行定位。 



    relative 

        生成相对定位的元素,相对于其在普通流中的位置进行定位。 



    static  默认值。没有定位,元素出现在正常的流中

 

 

CSS3发生哪些新特征?

    CSS3实现圆角(border-radius),阴影(box-shadow),

    对文字加特效(text-shadow、),线性渐变(gradient),旋转(transform)

    transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//旋转,缩放,定位,倾斜

    增加了更多的CSS选择器  多背景 rgba 

    在CSS3中唯一引入的伪元素是::selection.

    媒体查询,多栏布局

    border-image

 

XML和JSON的区别?

 

    (1).数据体积方面。

    JSON相对于XML来讲,数据的体积小,传递的速度更快些。

    (2).数据交互方面。

    JSON与JavaScript的交互更加方便,更容易解析处理,更好的数据交互。

    (3).数据描述方面。

    JSON对数据的描述性比XML较差。

    (4).传输速度方面。

    JSON的速度要远远快于XML。

 

 

 

针对BFC规范之知情?

          BFC,块级格式化上下文,一个开立了初的BFC的盒子是独自布局的,盒子内的子元素的体制不见面影响及外边的要素。在同一个BFC中的个别独毗邻的块级盒在笔直方向(和布局方向发生关联)的margin会发生叠。

        (W3C CSS 2.1 规范中的一个定义,它控制了元素如何对那内容进行布局,以及与外因素的关联以及相互作用。)

 

解释下 CSS sprites,以及若要是怎么在页面或网站中动用其。

 

    CSS Sprites其实就是拿网页遭到有的背景图片整合至平摆图片文件中,再利用CSS的“background-image”,“background- repeat”,“background-position”的结展开背景定位,background-position可以就此数字会确切的固化来背景图片的位置。这样可以抽过多图形请的出,因为要耗时于长;请求虽足起,但是呢起限制,一般浏览器还是6只。对于未来而言,就无欲如此做了,因为来矣`http2`。

 

 

 

html部分


 

 

说说公对语义化的知晓?

    1,去掉或者丢失样式的时候能够让页面呈现出清晰的结构

    2,有利于SEO:和搜索引擎建立良好沟通,有助于爬虫抓取更多的有效信息:爬虫依赖于标签来确定上下文和各个关键字的权重;

    3,方便其他设备解析(如屏幕阅读器、盲人阅读器、移动设备)以意义的方式来渲染网页;

    4,便于团队开发和维护,语义化更具可读性,是下一步吧网页的重要动向,遵循W3C标准的团队都遵循这个标准,可以减少差异化。

 

Doctype作用? 严格模式以及混杂模式如何区分?它们有何意义?    

 

    (1)、<!DOCTYPE> 声明位于文档中的最前面,处于 <html> 标签之前。告知浏览器以何种模式来渲染文档。 



    (2)、严格模式的排版和 JS 运作模式是  以该浏览器支持的最高标准运行。



    (3)、在混杂模式中,页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。



    (4)、DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。   

 

若明白有些种Doctype文档类型?     该标签而声明三种植 DTD
类型,分别代表严厉版本、过渡版本与因框架的 HTML 文档

     HTML 4.01 规定了三种文档类型:Strict、Transitional 以及 Frameset。

     XHTML 1.0 规定了三种 XML 文档类型:Strict、Transitional 以及 Frameset。

    Standards (标准)模式(也就是严格呈现模式)用于呈现遵循最新标准的网页,而 Quirks

     (包容)模式(也就是松散呈现模式或者兼容模式)用于呈现为传统浏览器而设计的网页。

 

HTML与XHTML——二者有什么分别


 

 

    区别:

    1.所有的标记都必须要有一个相应的结束标记

    2.所有标签的元素和属性的名字都必须使用小写

    3.所有的XML标记都必须合理嵌套

    4.所有的属性必须用引号""括起来

    5.把所有<和&特殊符号用编码表示

    6.给所有属性赋一个值

    7.不要在注释内容中使“--”

    8.图片必须有说明文字

 

 

 

周边兼容性问题?


 

 

    * png24号的图片在iE6浏览器上面世背景,解决方案是做成PNG8.也足以引用一段脚本处理.

    * 浏览器默认的margin和padding不同。解决方案是加一个大局的*{margin:0;padding:0;}来统一。

    * IE6两岸距bug:块属性标签float后,又出暴行之margin情况下,在ie6显示margin比设置的坏。 

    * 浮动ie产生的复倍距离(IE6双边距问题:在IE6下,如果对素设置了变通,同时以装了margin-left或margin-right,margin值会加倍。)

      #box{ float:left; width:10px; margin:0 0 0 100px;} 

     这种场面之下IE会产生20px之距离,解决方案是当float的价签样式控制着投入 ——_display:inline;将那个转化为行内属性。(_本条符号只有ie6会识别)

    *  渐进识别的方式,从完整中慢慢消除有些。 

    

      首先,巧妙的运用“\9”这同记,将IE游览器从拥有情况中分离出去。 

      接着,再次利用“+”将IE8和IE7、IE6分离开来,这样IE8已经独自识别。

    

      css

          .bb{

           /*所有识别*/

          . /*IE6、7、8识别*/

          +/*IE6、7识别*/

          _/*IE6识别*/ 

          } 

 

    

    *  IE下,可以用得常规性的措施来收获自定义属性,

       也堪下getAttribute()获取自定义属性;

       Firefox下,只能以getAttribute()获取自定义属性. 

       解决措施:统一通过getAttribute()获取自定义属性.

    

    * IE下,event对象有x,y属性,但是没有pageX,pageY属性; 

      Firefox下,event对象有pageX,pageY属性,但是并未x,y属性.

    

    * 解决办法:(条件注释)缺点是在IE浏览器下或会见增加额外的HTTP请求数。

    

    * Chrome 中文界面下默认会将小于 12px 之文件强制按 12px 著, 

      可透过入 CSS 属性 -webkit-text-size-adjust: none; 解决.

    

    * 超链接访问后hover样式就非出现了 被点击访问过的超链接样式不以颇具hover和active了缓解措施是反CSS属性的排列顺序:

    L-V-H-A :  a:link {} a:visited {} a:hover {} a:active {}

    

    * 怪异模式问题:漏写DTD声明,Firefox仍然会按照正规模式来分析网页,但每当IE中会触发怪异模式。为避免怪异模式被我们带来不必要之麻烦,最好养成书写DTD声明的好习惯。现在好使[html5](http://www.w3.org/TR/html5/single-page.html)推荐的写法:\`&lt;doctype html>`

    

    * 上下margin重合问题

    ie和ff都设有,相邻的有限单div的margin-left和margin-right不会重合,但是margin-top和margin-bottom却会生出叠。

    解决方式,养成良好的代码编写习惯,同时采用margin-top或者以用margin-bottom。

    * ie6对png图片格式支持不好(引用一段子脚本处理)

 

 

    

解释下别和她的办事原理?清除浮动的技能

 

    浮动元素脱离文档流,不占空间。浮动元素碰到包含它的边框要变更元素的边框停留。

  

    1.使用空标签清除浮动。

       这种方法是在所有浮动标签后面添加一个空标签 定义css clear:both. 弊端就是增加了无意义标签。

    2.使用overflow。

       给包含浮动元素的父标签添加css属性 overflow:auto; zoom:1; zoom:1用于兼容IE6。

    3.使用after伪对象清除浮动。

       该方法只适用于非IE浏览器。具体写法可参照以下示例。使用中需注意以下几点。一、该方法中必须为需要清除浮动元素的伪对象中设置 height:0,否则该元素会比实际高出若干像素;

 

变更元素引起的题材及解决办法?

 

    浮动元素引起的问题:

 

    (1)父元素的高度无法被撑开,影响与父元素同级的元素

    (2)与浮动元素同级的非浮动元素(内联元素)会跟随其后

    (3)若非第一个元素浮动,则该元素之前的元素也需要浮动,否则会影响页面显示的结构

 

化解方式:

使用`CSS`中的`clear:both`;属性来排元素的别可解决2、3题材,对于问题1,添加如下样式,给父元素添加`clearfix`样式:

 

    .clearfix:after{content: ".";display: block;height: 0;clear: both;visibility: hidden;}

    .clearfix{display: inline-block;} /* for IE/Mac */

 

**免除浮动的几栽方式:**

 

    1,额外标签法,<div style="clear:both;"></div>(缺点:不过这个办法会增加额外的标签使HTML结构看起来不够简洁。)

    2,使用after伪类



    #parent:after{

        content:".";

        height:0;

        visibility:hidden;

        display:block;

        clear:both;

        }

   

    3,浮动外部因素

    4,设置`overflow`为`hidden`或者auto

 

 

 

IE 8以下版本的浏览器被的盒模型有啊两样

 

    IE8以下浏览器的盒模型中定义之要素的富有高不包括外边距和边框

 

DOM操作——怎样添加、移除、移动、复制、创建同查找节点。 

 

    (1)创建新节点



          createDocumentFragment()    //创建一个DOM片段



          createElement()   //创建一个具体的元素



          createTextNode()   //创建一个文本节点



    (2)添加、移除、替换、插入



          appendChild()



          removeChild()



          replaceChild()



          insertBefore() //在已有的子节点前插入一个新的子节点



    (3)查找



          getElementsByTagName()    //通过标签名称



          getElementsByName()    //通过元素的Name属性的值(IE容错能力较强,会得到一个数组,其中包括id等于name值的)



          getElementById()    //通过元素Id,唯一性

 

html5生出哪些新特色、移除了那些元素?如何处理HTML5初标签的浏览器兼容问题?如何区分 HTML 和 HTML5?

 

    * HTML5 现在就不是 SGML 的子集,主要是有关图像,位置,存储,多任务相当力量的加码。

    

    * 拖拽释放(Drag and drop) API 

      语义化更好的内容标签(header,nav,footer,aside,article,section)

      音频、视频API(audio,video)

      画布(Canvas) API

      地理(Geolocation) API

      本地离线存储 localStorage 长期存储数据,浏览器关闭后数据不丢失;

      sessionStorage 的数据在浏览器关闭后自动删除



      表单控件,calendar、date、time、email、url、search  

      新的技术webworker, websocket, Geolocation



    * 移除的元素



    纯表现的元素:basefont,big,center,font, s,strike,tt,u;



    对可用性产生负面影响的元素:frame,frameset,noframes;



    支持HTML5新标签:



    * IE8/IE7/IE6支持通过document.createElement方法产生的标签,

      可以利用这一特性让这些浏览器支持HTML5新标签,



      浏览器支持新标签后,还需要添加标签默认的样式:



    * 当然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架

       <!--[if lt IE 9]> 

       <script> src="http://...../xx.js"</script> 

       <![endif]--> 

    如何区分: DOCTYPE声明\新增的结构元素\功能元素

 

iframe的优缺点?


    1.`<iframe>`优点:



        解决加载缓慢的第三方内容如图标和广告等的加载问题

        Security sandbox

        并行加载脚本



    2.`<iframe>`的缺点:





        *iframe会阻塞主页面的Onload事件;



        *即时内容为空,加载也需要时间

        *没有语意 

 

争实现浏览器内大多单标签页之间的通信?


    调用localstorge、cookies等本地存储方式

 

线程与经过的别


    一个程序至少有一个进程,一个进程至少有一个线程. 

    线程的划分尺度小于进程,使得多线程程序的并发性高。 

    另外,进程在执行过程中拥有独立的内存单元,而多个线程共享内存,从而极大地提高了程序的运行效率。 

    线程在执行过程中与进程还是有区别的。每个独立的线程有一个程序运行的入口、顺序执行序列和程序的出口。但是线程不能够独立执行,必须依存在应用程序中,
  由应用程序提供多个线程执行控制。 

    从逻辑角度来看,多线程的意义在于一个应用程序中,有多个执行部分可以同时执行。但操作系统并没有将多个线程看做多个独立的应用,来实现进程的调度和管理以及资源分配。
  这就是进程和线程的重要区别。

 

 

而什么样对网站的文件和资源进行优化?


    期待的解决方案包括:

     文件合并

     文件最小化/文件压缩

     使用 CDN 托管

     缓存的使用(多个域名来提供缓存)

     其他

 

 

央说发生三栽减页面加载时间的措施。


     1.优化图片 

     2.图像格式的选择(GIF:提供的颜色较少,可用在一些对颜色要求不高的地方) 

     3.优化CSS(压缩合并css,如margin-top,margin-left...) 

     4.网址后加斜杠(如www.ij34.com/目录,会判断这个“目录是什么文件类型,或者是目录。) 

     5.标明高度和宽度(如果浏览器没有找到这两个参数,它需要一边下载图片一边计算大小,如果图片很多,浏览器需要不断地调整页面。这不但影响速度,也影响浏览体验。 

    当浏览器知道了高度和宽度参数后,即使图片暂时无法显示,页面上也会腾出图片的空位,然后继续加载后面的内容。从而加载时间快了,浏览体验也更好了。) 



    6.减少http请求(合并文件,合并图片)。

 

卿都采用什么工具来测试代码的性能?


 

    Profiler, JSPerf, Dromaeo

 

 

咦是 FOUC(无样式内容闪烁)?你哪些来避免 FOUC?


 

     FOUC - Flash Of Unstyled Content 文档样式闪烁

     <style type="text/css" media="all">@import "../fouc.css";</style> 

    而引用CSS文件的@import就是造成这个问题的罪魁祸首。IE会先加载整个HTML文档的DOM,然后再去导入外部的CSS文件,因此,在页面DOM加载完成到CSS导入完成中间会有一段时间页面上的内容是没有样式的,这段时间的长短跟网速,电脑速度都有关系。

     解决方法简单的出奇,只要在<head>之间加入一个<link>或者<script>元素就可以了。

 

null和undefined的区别?


 

 

`null`是一个象征”无”的靶子,转为数值时也0;`undefined`举凡一个意味着”无”的原始值,转为数值时也`NaN`。  

  

当声明的变量还无让初始化时,变量的默认值为`undefined`。

`null`从而来代表没在的目标,常用来表示函数企图返回一个非在的对象。 

 

`undefined`代表”缺少值”,就是此应该有一个值,但是还从未概念。典型用法是:

 

    (1)变量被声明了,但没有赋值时,就等于undefined。



    (2) 调用函数时,应该提供的参数没有提供,该参数等于undefined。



    (3)对象没有赋值的属性,该属性的值为undefined。



    (4)函数没有返回值时,默认返回undefined。

 

`null`意味着”没有目标”,即该处不应发生价。典型用法是:

 

    (1) 作为函数的参数,表示该函数的参数不是对象。



    (2) 作为对象原型链的终点。

 

 

 

new操作符具体涉及了啊吧?


       1、创建一个空对象,并且 this 变量引用该对象,同时还继承了该函数的原型。

       2、属性和方法被加入到 this 引用的对象中。

       3、新创建的对象由 this 所引用,并且最后隐式的返回 this 。



    var obj  = {};

    obj.__proto__ = Base.prototype;

    Base.call(obj); 

 

js延迟加载的章程产生哪?


 

    defer和async、动态创建DOM方式(创建script,插入到DOM中,加载了后callBack)、按需要异步载入js

 

哪化解跨域问题?


 

 

        jsonp、 document.domain+iframe、window.name、window.postMessage、服务器上安装代理页面

    jsonp的法则是动态插入script标签

    

    

切切实实参见:[详解js跨域问题][2]

 

 

documen.write和 innerHTML的区别


    document.write只能重绘整个页面



    innerHTML可以重绘页面的一部分

 

.call() 和 .apply() 的分别与企图?


 

用意:动态改变有类的某部方法的运转环境。

有别于参见:[JavaScript学习总结(四)function函数部分][3]

 

哪操作会招内存泄漏?


 

 

    内存泄漏指任何对象在你不再有或用其后依然是。

    垃圾回收器定期扫描对象,并计算引用了每个对象的另外对象的数额。如果一个目标的援数也 0(没有任何对象引用了该对象),或针对该目标的绝世引用是循环的,那么该对象的内存即可回收。

    

    setTimeout 的率先独参数使用字符串而未函数的说话,会吸引内存泄漏。

    闭包、控制台日志、循环(在点滴独对象彼此引用且相互之间保留时,就会见生出一个循环往复)

 

详见:[详解js变量、作用域及内存][4]

 

JavaScript中的作用域与变量声明提升?


 

 

详见:[详解JavaScript函数模式][5]

 

哪判断当前剧本运行在浏览器还是node环境中?


 

 

    通过判断Global对象是否也window,如果未呢window,当前剧本没有运行在浏览器中

    

 

另外题目?


 

乃碰到了比难之艺问题是?你是何等缓解之?

历数IE 与另浏览器不平等的性状?

什么吃优雅降级和渐进增强?

 

    优雅降级:Web站点在所有最新浏览器被还能够正常干活,如果用户采取的是不合时宜浏览器,则代码会检讨为确认它是否会健康干活。由于IE独特的盒模型布局问题,针对不同版本的IE的hack实践了优雅降级了,为那些无法支撑力量的浏览器增加候选方案,使的于旧式浏览器上坐某种形式降级体验也不至于完全失去效.

    

    渐进增强:从于有浏览器支持的基本功能开始,逐步地增长那些只有新型浏览器才支撑的功效,向页面增加无害于基础浏览器的附加样式和效用的。当浏览器支持时,它们会自动地见出并发挥作用。

 

详见:[css学习归纳总结(一)][6]

 

WEB以由服务器主动推送Data到客户端起那些方式?

Javascript数据推送

 Commet:基于HTTP长连接的服务器推送技术

 基于WebSocket的推送方案

SSE(Server-Send Event):服务器推送数据新方式

 

 

 

针对前者界面工程师是职位是何许理解的?它的前景会怎样?

 

    前端是最贴近用户的程序员,比后端、数据库、产品经理、运营、安全都近。

        1、实现界面交互

        2、提升用户体验

        3、有了Node.js,前端可以实现服务端的一些事情

   
前端是极度靠近用户之程序员,前端的力量就是是会吃成品于 90分叉进化到 100 分,甚至又好,

     参与型,快速高质量好实现效益图,精确到1px;

     与社成员,UI设计,产品经理的关系;

     做好的页面结构,页面重构和用户体验;

     处理hack,兼容、写起优美的代码格式;

     针对服务器的优化、拥抱时前端技术。

 

 

 

 

您发出安性优化的法?


 

 

 ([端详请圈大虎14修性能优化原则][7])。

 

 

 

详情:http://segmentfault.com/blog/trigkit4/1190000000691919

 

一个页面从输入 URL 到页面加载显示就,这个进程中还发了什么?


 

      (1) 减少http请求次数:CSS Sprites, JS、CSS源码压缩、图片大小控制合适;网页Gzip,CDN托管,data缓存 ,图片服务器。



      (2) 前端模板 JS+数据,减少由于HTML标签导致的带宽浪费,前端用变量保存AJAX请求结果,每次操作本地变量,不用请求,减少请求次数



      (3) 用innerHTML代替DOM操作,减少DOM操作次数,优化javascript性能。



      (4) 当需要设置的样式很多时设置className而不是直接操作style。



      (5) 少用全局变量、缓存DOM节点查找的结果。减少IO读取操作。



      (6) 避免使用CSS Expression(css表达式)又称Dynamic properties(动态属性)。



      (7) 图片预加载,将样式表放在顶部,将脚本放在底部  加上时间戳。

 

     

 

        分为4个步骤:

  

      (1),当发送一个URL请求时,不管这个URL是Web页面的URL还是Web页面上每个资源的URL,浏览器都会开启一个线程来处理这个请求,
           同时在远程DNS服务器上启动一个DNS查询。这能使浏览器获得请求对应的IP地址。

        (2), 浏览器与远程Web服务器通过TCP三次握手协商来建立一个TCP/IP连接。该握手包括一个同步报文,一个同步-应答报文和一个应答报文,
           这三个报文在 浏览器和服务器之间传递。该握手首先由客户端尝试建立起通信,而后服务器应答并接受客户端的请求,最后由客户端发出该请求已经被接受的报文。

        (3),一旦TCP/IP连接建立,浏览器会通过该连接向远程服务器发送HTTP的GET请求。远程服务器找到资源并使用HTTP响应返回该资源,
            值为200的HTTP响应状态表示一个正确的响应。

        (4),此时,Web服务器提供资源服务,客户端开始下载资源。

 

    请求返回后,便进入了咱们关心之前端模块

    简单的话,浏览器会解析HTML生成DOM Tree,其次会冲CSS生成CSS Rule Tree,而javascript又得因DOM API操作DOM

 

详情:[自打输入 URL 到浏览器接收的历程遭到出了啊工作?][8]

 

平日安管理而的类别?


 

 

    先期团队要确定好全局样式(globe.css),编码模式(utf-8) 等;

    

            编写习惯必须一律(例如都是行使继承式的写法,单样式都勾成一行);

    

            标注样式编写人,各模块都立即标注(标注关键样式调用的地方);

    

            页面进行标注(例如 页面 模块 开始和结束);

    

            CSS跟HTML 分文件夹并行存放,命名都得统一(例如style.css);

    

            JS 分文件夹存放 命名以该JS功能吗仍的英文翻译。

    

            图片采取整合的 images.png png8 格式文件使用 尽量整合在一起使用方便将来之管理 

            

说最近极其流行的一些事物吧?常错过哪网站?


 

 

    Node.js、Mongodb、npm、MVVM、MEAN、three.js,React 。

    网站:w3cfuns,sf,hacknews,CSDN,慕课,博客园,InfoQ,w3cplus等

 

javascript对象的几种植创建方式


 

 

    1,工厂模式

    2,构造函数模式

    3,原型模式

    4,混合构造函数和原型模式

    5,动态原型模式

    6,寄生构造函数模式

    7,稳妥构造函数模式

 

javascript继承的6种方法


 

 

    1,原型链继承

    2,借用构造函数继承

    3,组合继承(原型+借用构造)

    4,原型式继承

    5,寄生式继承

    6,寄生组合式继承

 

详情:[JavaScript继承方式详解][9]

ajax过程


 

 

    (1)创建XMLHttpRequest对象,也便是创办一个异步调用对象.

    

    (2)创建一个初的HTTP请求,并点名该HTTP请求的法子、URL及说明信息.

    

    (3)设置响应HTTP请求状态变化之函数.

    

    (4)发送HTTP请求.

    

    (5)获取异步调用返回的数据.

    

    (6)使用JavaScript和DOM实现部分刷新.

 

详情:[JavaScript学习总结(七)Ajax和Http状态字][10]

 

异步加载与延期加载


    1.异步加载的方案: 动态插入script标签

    2.通过ajax去获取js代码,然后通过eval执行

    3.script标签上添加defer或者async属性

    4.创建并插入iframe,让它异步执行js

    5.延迟加载:有些 js 代码并不是页面初始化的时候就立刻需要的,而稍后的某些情况才需要的。

 

前者安全问题?


 

sql注入原理

 

不怕经将`SQL`命插入到`Web`表单递交或输入域名还是页面请求的查询字符串,最终达成诈骗服务器执行恶意的SQL命令。

 

看来有以下几点:

 

   
1.永久不要相信用户的输入,要本着用户之输入进行校验,可以通过正则表达式,或限制长度,对单引号和对”-“进行转移等。

    2.千古不要以动态拼装SQL,可以利用参数化的SQL或者直接使用存储过程进展数量查询存取。

    3.永久不要使用管理员权限的数据库连接,为每个应用使用单独的权柄有限的数据库连接。

    4.永不管机密信息明文存放,请加密或者hash掉密码以及快的音。

 

XSS原理和防止

 

`Xss(cross-site scripting)`攻击指的是攻击者往Web页面里插恶意`html`签或者`javascript`代码。比如:攻击者在论坛中放一个

好像安全之链接,骗取用户点击后,窃取cookie中之用户私密信息;或者攻击者在论坛中加一个黑心表单,

当用户提交表单的时光,却拿信传送到攻击者的服务器受到,而非是用户原本以为的亲信站点。

 

XSS防范方法

 

1.代码里对用户输入的地方及变量都急需细检查长以及对`”<”,”>”,”;”,”’”`相当字符做过滤;其次任何内容写及页面之前还要加以`encode`,避免不小心将`html tag` 弄出来。这一个界做好,至少可阻碍超过一半的`XSS` 攻击。

<br/>

2.避免直接当`cookie` 中透漏用户隐私,例如`email`、密码等等。

3.经过使cookie 和系统ip 绑定来降低`cookie` 泄露后的危险。这样攻击者得到的cookie 没有实际价值,不可能以来重放。

<br/>

4.尽量动POST 而无GET 提交表单

 

XSS与CSRF有啊界别也?

 

`XSS`凡获取信息,不欲提前领略其他用户页面的代码和数据包。`CSRF`凡是顶替用户完成指定的动作,需要理解其他用户页面的代码和数据包。

 

若成功同样差CSRF攻击,受害者必须逐项完成两独步骤:

 

  1.登录受信任网站A,并以地方生成Cookie。

  2.当无上出A的景下,访问危险网站B。

 

CSRF的防御

 

1.劳动端的CSRF方式方法十分多样,但归根结底的思索都是同一的,就是当客户端页面增加伪随机数。

2.施用验证码

 

ie各版本及chrome可以互相下载多少个资源


 

    IE6 两个冒出,iE7升级后的6单冒出,之后版本也是6只

    Firefox,chrome也是6个

 

javascript里面的后续怎么落实,如何避免原型链上面的目标共享


 

 

    用构造函数和原型链的混合模式去贯彻持续,避免对象共享可以参考经典的extend()函数,很多前端框架都来包的,就是用一个空函数当做中间变量

 

 

grunt, YUI compressor 和 google clojure用来进展代码压缩的用法。


    YUI Compressor 是一个用来减少 JS 和 CSS 文件之家伙,采用Java开发。

   

    使用方式:

    

    //压缩JS

    java -jar yuicompressor-2.4.2.jar –type js –charset utf-8 -v src.js > packed.js

    //压缩CSS

    java -jar yuicompressor-2.4.2.jar –type css –charset utf-8 -v src.css > packed.css

 

端详请见:[卿用控制的前端代码性能优化工具][11] 

 

Flash、Ajax各自的利害,在采取被怎么样抉择?


 

 

    1、Flash ajax对比

    Flash适合处理多媒体、矢量图形、访问机器;对CSS、处理文本上不足,不便于让搜寻。

    Ajax对CSS、文本支持特别好,支持搜索;多媒体、矢量图形、机器访问不足。

    共同点:与服务器的无刷新传递消息、用户离线和在线状态、操作DOM

 

 

请解释一下 JavaScript 的同源策略。


 

概念:同源策略是客户端脚本(尤其是`Javascript`)的严重性的安度标准。它最早来`Netscape Navigator2.0`,其目的是严防有文档或脚本从多独不同源装载。

 

这边的同源策略指的凡:协议,域名,端口相同,同源策略是相同种安全磋商。

借助于同一段子脚本只能读取来自同来源的窗口与文档的习性。

 

胡要发出同源限制?

   我们举例说明:比如一个黑客程序,他使`Iframe`管真正的银行登录页面嵌到外的页面及,当你用真实的用户称,密码登录时,他的页面就得经`Javascript`读取到公的表单中`input`遭受的情节,这样用户称,密码便轻松到手了。

 

 

 

哟是 “use strict”; ? 使用它的功利以及弊病分别是呀?


 

`ECMAscript 5`加加了次栽运行模式:”严格模式”(strict mode)。顾名思义,这种模式让`Javascript`每当更严苛的准下运作。

 

 

办”严格模式”的目的,主要有以下几独:

 

    - 消除Javascript语法的一些不合理、不严谨之处,减少一些怪异行为;

    - 消除代码运行的一些不安全之处,保证代码运行的安全;

    - 提高编译器效率,增加运行速度;

    - 为未来新版本的Javascript做好铺垫。



注:经过测试`IE6,7,8,9`均不支持严格模式。

 

 

 

缺点:

现在网站的`JS` 都见面进行削减,一些文本用了严峻模式,而其他一部分尚无。这时这些本来是严模式之公文,被 `merge` 后,这个串就顶了文件的中档,不仅没有指示严格模式,反而以调减后浪费了字节。

 

GET和POST的区别,何时使用POST?


 

 

        GET:一般用于信息获取,使用URL传递参数,对所发送信息的数据也发生限量,一般在2000单字符

        POST:一般用于修改服务器上的资源,对所发送的音没有限制。

        

        GET方式欲以Request.QueryString来赢得变量的价值,而POST方式通过Request.Form来获取变量的值,

        也就是是说Get是经地方栏来传值,而Post是透过付出表单来传值。

    

    然而,在以下情形遇,请动 POST 请求:

    无法采取缓存文件(更新服务器上之文本或者数据库)

    向服务器发送大量数目(POST 没有数据量限制)

    发送包含无掌握字符的用户输入时,POST 比 GET 更安宁与否还牢靠

 

哪些地方会出现css阻塞,哪些地方会出现js阻塞?


 

 

**js的梗塞特性:**持有浏览器在下载`JS`的早晚,会堵住一切其他活动,比如其他资源的下载,内容的表现等等。直到`JS`下载、解析、执行完毕后才起来持续`相互下载`另资源并显现内容。为了增进用户体验,新一代表浏览器还支持彼此下载`JS`,但是`JS`下载仍然会死其它资源的下载(例如.图片,css文件等)。

 

鉴于浏览器为防止出现`JS`修改`DOM`培植,需要再次构建`DOM`培训之图景,所以就会见阻塞其他的下载和显现。

 

嵌入`JS`见面死所有内容的呈现,而外部`JS`才会堵塞其后内容之示,2种艺术还见面死其后资源的下载。也就是说外部体制不见面阻塞外部脚本的加载,但会死外部脚本的实行。

 

`CSS`岂会卡住加载了?`CSS`本来是好相互下载的,在什么动静下会冒出堵塞加载了(在测试观察着,`IE6`下`CSS`还是死加载)

 

当`CSS`背后跟着嵌入的`JS`的时候,该`CSS`就会见面世堵塞后面资源下载的情状。而当把坐`JS`放到`CSS`前,就非会见现出堵塞的状了。

 

 

 

 根本原因:因为浏览器会维持`html`中`css`和`js`的逐一,样式表必须于停放的JS执行前先行加载、解析了。而置的`JS`会见卡住后面的资源加载,所以便会出现上面`CSS`堵塞下载的场面。

 

嵌入`JS`应当置身什么位置?

 

       1、放在脚,虽然在脚还会堵塞所有呈现,但未会见死资源下载。

       

       2、如果放置JS放在head中,请把坐JS放在CSS头部。

       

       3、使用defer(只支持IE)

       

       4、不要在搭的JS中调用运行时比较丰富之函数,如果一定要是因此,可以据此`setTimeout`来调用

 

Javascript无阻塞加载具体办法

 

 – **拿脚本放在脚。**`<link>`要么放在`head`倍受,用以保证在`js`加载前,能加载出正规显示的页面。`<script>`签放在`</body>`前。

 – **成组脚本**:由于每个`<script>`标签下载时死页面解析过程,所以限制页面的`<script>`总数为可以改进性。适用于内联脚本和外部脚本。

 

 

 

 – **非阻塞脚本**:等页面就加载后,再加载`js`代码。也就是,在`window.onload`事件来后开下载代码。

    (1)`defer`属性:支持IE4和`fierfox3.5`再也强版本浏览器

    (2)动态脚本元素:文档对象模型(DOM)允许你用js动态创建`HTML`的几乎整个文档内容。代码如下:

<br>



    <script>

    var script=document.createElement("script");

    script.type="text/javascript";

    script.src="file.js";

    document.getElementsByTagName("head")[0].appendChild(script);

    </script>

 

 此技术之要害在:无论在哪里启动下载,文件额下载和运行都非见面死其他页面处理过程。即使以head里(除了用于下载文件之http链接)。   

    

 

闭包相关题材?


 

端详请见:[详解js闭包][12]

    

 

js事件处理程序问题?


详情请见:[JavaScript学习总结(九)事件详解][13]

    

    

 

eval是召开呀的?


 

    它的功力是拿相应之字符串解析成JS代码并运行;

    应该避免使用eval,不安全,非常耗性能(2次,一浅解析成js语句,一浅实行)。

 

    

 

JavaScript原型,原型链 ? 有什么特点?


 

 

    *  原型对象也是寻常的目标,是目标一个自带隐式的 __proto__ 属性,原型为发生或产生和好之原型,如果一个原型对象的原型不呢null的话语,我们便称原型链。

    *  原型链是出于有所以来延续和共享属性之目标成的(有限的)对象链。

 

 

 

 

事件、IE与火狐的轩然大波机制发生什么分别? 如何堵住冒泡?


 

 

 

     1. 咱在网页中的某某操作(有的操作对应多独事件)。例如:当我们点击一个按钮就会起一个轩然大波。是可给 JavaScript 侦测到之行为。  

     2. 事件处理机制:IE是事件冒泡、firefox同时支持少数种事件模型,也就是:捕获型事件和冒泡型事件。;

     3.  ev.stopPropagation();注意旧ie的方法 ev.cancelBubble = true;

 

ajax 是呀?ajax 的互动模型?同步同异步的分别?如何解决跨域问题?


 

详情请见:[JavaScript学习总结(七)Ajax和Http状态字][14]

    

 

  

 

    1. 通过异步模式,提升了用户体验

    

      2. 优化了浏览器和服务器之间的传输,减少非必要的数往返,减少了带动富占用

    

      3. Ajax以客户端运行,承担了扳平部分当然由服务器负责的行事,减少了挺用户量下之服务器负荷。

    

      2. Ajax的最为深之性状是呀。

    

      Ajax可以实现动态不刷新(局部刷新)

      readyState属性 状态 有5独可取值: 0=未初始化 ,1=启动 2=发送,3=接收,4=完成

    

    ajax的缺点

    

      1、ajax不支持浏览器back按钮。

    

      2、安全问题 AJAX暴露了和服务器交互的底细。

    

      3、对找引擎的支持比较弱。

    

      4、破坏了先后的充分机制。

    

      5、不便于调试。

    

    跨域: jsonp、 iframe、window.name、window.postMessage、服务器上安代理页面

 

js对象的深度克隆


      function clone(Obj) {   

            var buf;   

            if (Obj instanceof Array) {   

                buf = [];  //创建一个空的数组 

                var i = Obj.length;   

                while (i--) {   

                    buf[i] = clone(Obj[i]);   

                }   

                return buf;   

            }else if (Obj instanceof Object){   

                buf = {};  //创建一个空对象 

                for (var k in Obj) {  //为这个对象添加新的属性 

                    buf[k] = clone(Obj[k]);   

                }   

                return buf;   

            }else{   

                return Obj;   

            }   

        }  

 

 

AMD和CMD 规范的区分?


 

端详请见:[详解JavaScript模块化开发][15] 

 

网站重构的明白?


 

    网站重构:在非改动外部表现之前提下,简化结构、添加可读性,而于网站前端保持一致的表现。也就是说是当未移UI的事态下,对网站开展优化,在扩大的而保持一致的UI。

    

    对于风俗习惯的网站以来重构通常是:

    

    表格(table)布局改吧DIV+CSS

    使网站前端兼容于现代浏览器(针对被未一起规范之CSS、如对IE6有效的)

    对于运动平台的优化

    针对于SEO进行优化

    深层次之网站重构应该考虑的端

    

    减少代码间的耦合

    让代码保持弹性

    严格按照正统编写代码

    设计而扩大的API

    代替本来片框架、语言(如VB)

    增强用户体验

    通常来说对于速之优化也带有在重构中

    

    压缩JS、CSS、image等前端资源(通常是由服务器来化解)

    程序的性优化(如数据读写)

    采用CDN来加速资源加载

    对于JS DOM的优化

    HTTP服务器的文本缓存

 

怎获取UA?


 

    <script> 

        function whatBrowser() {  

            document.Browser.Name.value=navigator.appName;  

            document.Browser.Version.value=navigator.appVersion;  

            document.Browser.Code.value=navigator.appCodeName;  

            document.Browser.Agent.value=navigator.userAgent;  

        }  

    </script>

 

js数组去重新


 

以下是数组去重的老三栽办法:

 

    Array.prototype.unique1 = function () {

      var n = []; //一个新的临时数组

      for (var i = 0; i < this.length; i++) //遍历当前数组

      {

        //如果当前数组的第i已经保存进了临时数组,那么跳过,

        //否则把当前项push到临时数组里面

        if (n.indexOf(this[i]) == -1) n.push(this[i]);

      }

      return n;

    }



    Array.prototype.unique2 = function()

    {

     var n = {},r=[]; //n为hash表,r为临时数组

     for(var i = 0; i < this.length; i++) //遍历当前数组

     {

     if (!n[this[i]]) //如果hash表中没有当前项

     {

     n[this[i]] = true; //存入hash表

     r.push(this[i]); //把当前数组的当前项push到临时数组里面

     }

     }

     return r;

    }



    Array.prototype.unique3 = function()

    {

     var n = [this[0]]; //结果数组

     for(var i = 1; i < this.length; i++) //从第二项开始遍历

     {

     //如果当前数组的第i项在当前数组中第一次出现的位置不是i,

     //那么表示第i项是重复的,忽略掉。否则存入结果数组

     if (this.indexOf(this[i]) == i) n.push(this[i]);

     }

     return n;

    }

 

 

js操作获取和安装cookie


 

 

    //创建cookie

    function setCookie(name, value, expires, path, domain, secure) {

     var cookieText = encodeURIComponent(name) + '=' + encodeURIComponent(value);

     if (expires instanceof Date) {

     cookieText += '; expires=' + expires;

     }

     if (path) {

     cookieText += '; expires=' + expires;

     }

     if (domain) {

     cookieText += '; domain=' + domain;

     }

     if (secure) {

     cookieText += '; secure';

     }

     document.cookie = cookieText;

    }



    //获取cookie

    function getCookie(name) {

     var cookieName = encodeURIComponent(name) + '=';

     var cookieStart = document.cookie.indexOf(cookieName);

     var cookieValue = null;

     if (cookieStart > -1) {

     var cookieEnd = document.cookie.indexOf(';', cookieStart);

     if (cookieEnd == -1) {

     cookieEnd = document.cookie.length;

     }

     cookieValue = decodeURIComponent(document.cookie.substring(cookieStart + cookieName.length, cookieEnd));

     }

     return cookieValue;

    }



    //删除cookie

    function unsetCookie(name) {

     document.cookie = name + "= ; expires=" + new Date(0);

    }

 

说TCP传输的老三软握手策略

 


 

为规范科学地拿数据送达目标高居,TCP协议使用了三不好握手策略。用TCP协议将数据包送出去后,TCP不见面针对传送  后底情形置之不理,它必然会于对方确认是不是成送达。握手过程遭到应用了TCP的标志:SYN和ACK。

出殡端首先发送一个带SYN标志的数包给对方。接收端收到后,回传一个富含SYN/ACK标志的数码包以展示传达确认消息。最后,发送端再回传一个带ACK标志的数据包,代表“握手”结束

如若以拉手过程中有阶段莫名暂停,TCP协议会再次坐平等之次第发送相同的数据包。

 

 

说说你对Promise的理解

 


 

依照 `Promise/A+` 的定义,`Promise` 有四栽状态:

pending: 初始状态, 非 fulfilled 或 rejected.

fulfilled: 成功的操作.

rejected: 失败的操作.

settled: Promise已被fulfilled或rejected,且不是pending

 

另外, `fulfilled` 与 `rejected` 一从合称 `settled`。

 

`Promise` 对象用来开展延期(deferred) 和异步(asynchronous ) 计算。

 

>Promise 的构造函数

 

组织一个 `Promise`,最基本的用法如下:

var promise = new Promise(function(resolve, reject) {

    if (...) {  // succeed

        resolve(result);

    } else {   // fails

        reject(Error(errMessage));

    }

});

 

`Promise` 实例有 `then` 方法(具有 `then` 方法的目标,通常给称作 `thenable`)。它的以方法如下:

 

promise.then(onFulfilled, onRejected)

 

收到两独函数作为参数,一个于 `fulfilled` 的时刻被调用,一个以 `rejected` 的当儿吃调用,接收参数就是 `future,onFulfilled` 对应 `resolve`, `onRejected` 对应 `reject`。

 

 

Javascript垃圾回收措施

 

标志清除(mark and sweep)

 

 

这是`JavaScript`无限广泛的废料回收措施,当变量进入实施环境的时刻,比如函数中扬言一个变量,垃圾回收器将那个标志为“进入环境”,当变量离开环境之时光(函数执行完毕)将其标志为“离开环境”。

 

垃圾堆回收器会在运转的时候吃存储于内存中之所有变量加上记号,然后去丢环境被的变量和让环境中变量所引用的变量(闭包),在这些成功后按存在标记的即是使抹的变量了

 

援计数(reference counting)

 

以小版本`IE`遭遇常常会面并发内存泄露,很多时段就是为该动引用计数方式进行垃圾回收。引用计数的策略是跟记录每个值为使用的次数,当声明了一个 变量并以一个引用类型赋值给该变量的早晚是价值的援次数虽加1,如果该变量的值变成了另外一个,则这值得引用次数减1,当以此价的援次数变为0的经常 候,说明没有变量在动用,这个值没法被拜了,因此好将该占用的半空中回收,这样垃圾回收器会在运作的时光清理掉引用次数为0的价值占的上空。

 

在IE中虽然`JavaScript`对象通过标记清除的计开展垃圾回收,但BOM与DOM对象却是经引用计数回收废品的,也就是说要提到BOM及DOM就会冒出循环引用问题。

 

议论性能优化问题

 

代码层面:避免采用css表达式,避免采用高级选择器,通配选择器。

缓存利用:缓存Ajax,使用CDN,使用外部js和css文件以便缓存,添加Expires头,服务端配置Etag,减少DNS查找等

央数量:合并样式与剧本,使用css图片精灵,初始首屏之外的图样资源以需加载,静态资源延迟加载。

吁带富:压缩文件,开启GZIP,

 

移动端性能优化

 


 

>尽量利用`css3`动画,开启硬件加速。适当使用`touch`事件代表`click`事件。避免使`css3`日趋变阴影效果。

>尽可能少的采取`box-shadow`与`gradients`。`box-shadow`与`gradients`频繁还是页面的属性杀手

 

什么是Etag?

 


 

浏览器下载组件的时刻,会拿其存储到浏览器缓存中。如果急需再行取得相同的机件,浏览器将检查组件的缓存时间,

万一都过,那么浏览器将发送一个标准化GET请求到服务器,服务器判断缓存还中,则发送一个304响应,

报浏览器可引用缓存组件。

 

这就是说服务器是冲什么判断缓存是否还中呢?答案来个别种方式,一栽是前提到的ETag,另一样种植是因`Last-Modified`

 

Expires和Cache-Control

 

`Expires`务求客户端以及劳务端的钟表严格同步。HTTP1.1引入`Cache-Control`来克服Expires头的限定。如果max-age和Expires同时出现,则max-age有还胜似之先行级。

 

 

   Cache-Control: no-cache, private, max-age=0

    ETag: abcde

    Expires: Thu, 15 Apr 2014 20:00:00 GMT

    Pragma: private

    Last-Modified: $now // RFC1123 format

 

库和排的别?

 

    栈的插和去操作都是以一如既往端进行的,而班的操作却是于彼此进行的。

    队列先进先出,栈先进后出。

    栈只允许在表尾一端进行插队和去,而排只同意在表尾一端进行扦插,在表头一端进行删除 

 

栈和堆的别?

 

    栈区(stack)—   由编译器自动分配释放   ,存放函数的参数值,局部变量的值等。

    堆区(heap)   —   一般由程序员分配释放,   若程序员不自由,程序结束时或许是因为OS回收。

    堆(数据结构):堆得被作是同等棵树,如:堆排序;

    栈(数据结构):一栽先进后出的数据结构。 

 

关于Http 2.0 你懂多少?

 

`HTTP/2`引入了“服务端推(serverpush)”的定义,它同意服务端在客户端需要多少之前便积极地以数据发送至客户端缓存中,从而提高性能。

`HTTP/2`提供更多之加密支持

`HTTP/2`动用多总长技术,允许多只信息在一个连接达又交代。 

它长了条压缩(header compression),因此即使好小的要,其要与应的`header`还只见面占有很有点比例之拉动富。

  

相关文章

网站地图xml地图