一些小知识

css 和 html面试题

css 和 html

• 1.你怎么来实现页面设计图，你认为前端应该如何高质量完成工作? 一个满屏 品 字布局 如何设计?

  • 首先划分成头部、body、脚部
  • 实现效果图是最基本的工作，精确到2px，设计师，产品经理的沟通和项目的参与，做好的页面结构，页面重构和用户体验，处理hack，兼容、写出优美的代码格式，针对服务器的优化、拥抱 HTML5

• 2.知道css有个content属性吗？有什么作用？有什么应用？

  • css的content属性专门应用在 before/after 伪元素上，用来插入生成内容。最常见的应用是利用伪类清除浮动
    

        //一种常见利用伪类清除浮动的代码
        .clearfix:after {
            content:"."; //这里利用到了content属性
            display:block; 
            height:0;
            visibility:hidden; 
            clear:both; }
        .clearfix { 
            *zoom:1; 
        }

  ==after伪元素通过 content 在元素的后面生成了内容为一个点的块级素，再利用clear:both清除浮动。那么问题继续还有，知道css计数器（序列数字字符自动递增）吗？如何通过css content属性实现css计数器？css计数器是通过设置counter-reset 、counter-increment 两个属性 、及 counter()/counters()一个方法配合after / before 伪类实现==

• 3.你做的页面在哪些流览器测试过？这些浏览器的内核分别是什么?

  • 1.IE:trident
  • 2.Firefox:gecko
  • 3.Safari:webkit
  • 4.Opera:以前是presto内核，Opera现在改用Google Chrome 的 Bink内核
  • 5.Chrome:Bink(基于webkit，Google 与Opera Software共同开发)

• 4.每个HTML文件里开头都有个很重要的东西，Doctype，知道这是干什么的吗

  • 声明位于文档中的最前面的位置，处于 标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。（重点：告诉浏览器按照何种规范解析页面）

• 5.Quirks模式是什么？它和Standards模式有什么区别

  • 从IE6开始，引入了Standards模式，标准模式中，浏览器尝试给符合标准的文档在规范上的正确处理达到在指定浏览器中的程度。
  • 在IE6之前CSS还不够成熟，所以IE5等之前的浏览器对CSS的支持很差， IE6将对CSS提供更好的支持，然而这时的问题就来了，因为有很多页面是基于旧的布局方式写的，而如果IE6 支持CSS则将令这些页面显示不正常，如何在即保证不破坏现有页面，又提供新的渲染机制呢
  • 在写程序时我们也会经常遇到这样的问题，如何保证原来的接口不变，又提供更强大的功能，尤其是新功能不兼容旧功能时。遇到这种问题时的一个常见做法是增加参数和分支，即当某个参数为真时，我们就使用新功能，而如果这个参数 不为真时，就使用旧功能，这样就能不破坏原有的程序，又提供新功能。IE6也是类似这样做的，它将DTD当成了这个“参数”，因为以前的页面大家都不会去写DTD，所以IE6就假定 如果写了DTD，就意味着这个页面将采用对CSS支持更好的布局，而如果没有，则采用兼容之前的布局方式。这就是Quirks模式（怪癖模式，诡异模式，怪异模式）
  • 区别
    
    • 总体会有布局、样式解析和脚本执行三个方面的区别。
    • 盒模型：在W3C标准中，如果设置一个元素的宽度和高度，指的是元素内容的宽度和高度，而在Quirks 模式下，IE的宽度和高度还包含了padding和border
    • 设置行内元素的高宽：在Standards模式下，给等行内元素设置wdith和height都不会生效，而在quirks模式下，则会生效
    • 设置百分比的高度：在standards模式下，一个元素的高度是由其包含的内容来决定的，如果父元素没有设置百分比的高度，子元素设置一个百分比的高度是无效的用
    • margin:0 auto设置水平居中：使用margin:0 auto在standards模式下可以使元素水平居中，但在quirks模式下却会失效

• 6.div+css的布局较table布局有什么优点

  • 改版的时候更方便，只要改css文件
  • 页面加载速度更快、结构化清晰、页面显示简洁
  • 表现与结构相分离
  • 易于优化（seo）搜索引擎更友好，排名更容易靠前

• 7.img的alt与title有何异同？ strong与em的异同

  • a:alt(alt text):为不能显示图像、窗体或applets的用户代理（UA），alt属性用来指定替换文字。替换文字的语言由lang属性指定。(在IE浏览器下会在没有title时把alt当成 tool tip显示)
  • title(tool tip):该属性为设置该属性的元素提供建议性的信息
  • strong:粗体强调标签，强调，表示内容的重要性
  • em:斜体强调标签，更强烈强调，表示内容的强调点

• 8.你能描述一下渐进增强和优雅降级之间的不同吗

  • 渐进增强 progressive enhancement：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
    优雅降级 graceful degradation：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容
  • ==区别：==优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带
  • “优雅降级”观点
    “优雅降级”观点认为应该针对那些最高级、最完善的浏览器来设计网站。而将那些被认为“过时”或有功能缺失的浏览器下的测试工作安排在开发周期的最后阶段，并把测试对象限定为主流浏览器（如 IE、Mozilla 等）的前一个版本
  • 在这种设计范例下，旧版的浏览器被认为仅能提供“简陋却无妨 (poor, but passable)” 的浏览体验。你可以做一些小的调整来适应某个特定的浏览器。但由于它们并非我们所关注的焦点，因此除了修复较大的错误之外，其它的差异将被直接忽略。
  • “渐进增强”观点则认为应关注于内容本身。内容是我们建立网站的诱因。有的网站展示它，有的则收集它，有的寻求，有的操作，还有的网站甚至会包含以上的种种，但相同点是它们全都涉及到内容。这使得“渐进增强”成为一种更为合理的设计范例。这也是它立即被 Yahoo! 所采纳并用以构建其“分级式浏览器支持 (Graded Browser Support)”策略的原因所在

• 9.为什么利用多个域名来存储网站资源会更有效

  • CDN缓存更方便
  • 突破浏览器并发限制
  • 节约cookie带宽
  • 节约主域名的连接数，优化页面响应速度
    +　防止不必要的安全问题

• 10.请谈一下你对网页标准和标准制定机构重要性的理解

  • 网页标准和标准制定机构都是为了能让web发展的更‘健康’，开发者遵循统一的标准，降低开发难度，开发成本，SEO也会更好做，也不会因为滥用代码导致各种BUG、安全问题，最终提高网站易用性

• 11.简述一下src与href的区别

  • src用于替换当前元素，href用于在当前文档和引用资源之间确立联系
  • src是source的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素
  • 当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部
  • href是Hypertext Reference的缩写，指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，如果我们在文档中添加
  • 那么浏览器会识别该文档为css文件，就会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用link方式来加载css，而不是使用@import方式

• 12.知道的网页制作会用到的图片格式有哪些

  • png-8，png-24，jpeg，gif，svg
  • 但是上面的那些都不是面试官想要的最后答案。面试官希望听到是Webp。（是否有关注新技术，新鲜事物）
    科普一下Webp：WebP格式，谷歌（google）开发的一种旨在加快图片加载速度的图片格式。图片压缩体积大约只有JPEG的2/3，并能节省大量的服务器带宽资源和数据空间。Facebook Ebay等知名网站已经开始测试并使用WebP格式。
    在质量相同的情况下，WebP格式图像的体积要比JPEG格式图像小40%

• 13.知道什么是微格式吗？谈谈理解。在前端构建中应该考虑微格式吗

  • 微格式（Microformats）是一种让机器可读的语义化XHTML词汇的集合，是结构化数据的开放标准。是为特殊应用而制定的特殊格式
  • ==优点==：将智能数据添加到网页上，让网站内容在搜索引擎结果界面可以显示额外的提示。（应用范例：豆瓣，有兴趣自行google）

• 14.你如何理解HTML结构的语义化

  • 去掉或样式丢失的时候能让页面呈现清晰的结构：
    html本身是没有表现的，我们看到例如

    是粗体，字体大小2em，加粗；是加粗的，不要认为这是html的表现，这些其实html默认的css样式在起作用，所以去掉或样式丢失的时候能让页面呈现清晰的结构不是语义化的HTML结构的优点，但是浏览器都有有默认样式，默认样式的目的也是为了更好的表达html的语义，可以说浏览器的默认样式和语义化的HTML结构是不可分割的。

  • 屏幕阅读器（如果访客有视障）会完全根据你的标记来“读”你的网页
  • 例如,如果你使用的含语义的标记,屏幕阅读器就会“逐个拼出”你的单词,而不是试着去对它完整发音
  • PDA、手机等设备可能无法像普通电脑的浏览器一样来渲染网页（通常是因为这些设备对CSS的支持较弱）
  • 使用语义标记可以确保这些设备以一种有意义的方式来渲染网页.理想情况下,观看设备的任务是符合设备本身的条件来渲染网页
  • 语义标记为设备提供了所需的相关信息,就省去了你自己去考虑所有可能的显示情况（包括现有的或者将来新的设备）.例如,一部手机可以选择使一段标记了标题的文字以粗体显示.而掌上电脑可能会以比较大的字体来显示.无论哪种方式一旦你对文本标记为标题,您就可以确信读取设备将根据其自身的条件来合适地显示页面.
  • 搜索引擎的爬虫也依赖于标记来确定上下文和各个关键字的权重
    +　过去你可能还没有考虑搜索引擎的爬虫也是网站的“访客”,但现在它们他们实际上是极其宝贵的用户.没有他们的话,搜索引擎将无法索引你的网站,然后一般用户将很难过来访问
  • 你的页面是否对爬虫容易理解非常重要,因为爬虫很大程度上会忽略用于表现的标记,而只注重语义标记
  • 因此,如果页面文件的标题被标记,而不是,那么这个页面在搜索结果的位置可能会比较靠后.除了提升易用性外,语义标记有利于正确使用CSS和JavaScript,因为其本身提供了许多“钩钩”来应用页面的样式与行为
  • SEO主要还是靠你网站的内容和外部链接的
  • 便于团队开发和维护
    +　W3C给我们定了一个很好的标准，在团队中大家都遵循这个标准，可以减少很多差异化的东西，方便开发和维护，提高开发效率，甚至实现模块化开发

• 16.谈谈以前端角度出发做好SEO需要考虑什么

  • 你需要知道一些搜索引擎的基本工作原理，各个搜索引擎之间的区别，搜索机器人（SE robot 或叫 web crawler）如何进行工作，搜索引擎如何对搜索结果进行排序等等
  • Meta标签优化:
    
    • 主要包括主题（Title)，网站描述(Description)，和关键词（Keywords）。还有一些其它的隐藏文字比如Author（作者），Category（目录），Language（编码语种）等
  • 如何选取关键词并在网页中放置关键词
    
    • 搜索就得用关键词。关键词分析和选择是SEO最重要的工作之一。首先要给网站确定主关键词（一般在5个上下），然后针对这些关键词进行优化，包括关键词密度（Density），相关度（Relavancy），突出性（Prominency）
  • 了解主要的搜索引擎
    
    • 虽然搜索引擎有很多，但是对网站流量起决定作用的就那么几个。比如英文的主要有Google，Yahoo，Bing等；中文的有百度，搜狗，有道等。不同的搜索引擎对页面的抓取和索引、排序的规则都不一样。还要了解各搜索门户和搜索引擎之间的关系，比如AOL网页搜索用的是Google的搜索技术，MSN用的是Bing的技术
  • 主要的互联网目录
    
    • Open Directory自身不是搜索引擎，而是一个大型的网站目录，他和搜索引擎的主要区别是网站内容的收集方式不同。目录是人工编辑的，主要收录网站主页；搜索引擎是自动收集的，除了主页外还抓取大量的内容页面
  • 按点击付费的搜索引擎
    
    • 搜索引擎也需要生存，随着互联网商务的越来越成熟，收费的搜索引擎也开始大行其道。最典型的有Overture和百度，当然也包括Google的广告项目Google Adwords。越来越多的人通过搜索引擎的点击广告来定位商业网站，这里面也大有优化和排名的学问，你得学会用最少的广告投入获得最多的点击
  • 搜索引擎登录
    
    • 网站做完了以后，别躺在那里等着客人从天而降。要让别人找到你，最简单的办法就是将网站提交（submit）到搜索引擎。如果你的是商业网站，主要的搜索引擎和目录都会要求你付费来获得收录（比如Yahoo要299美元），但是好消息是（至少到目前为止）最大的搜索引擎Google目前还是免费，而且它主宰着60％以上的搜索市场
  • 链接交换和链接广泛度（Link Popularity）
    
    • 网页内容都是以超文本（Hypertext）的方式来互相链接的，网站之间也是如此。除了搜索引擎以外，人们也每天通过不同网站之间的链接来Surfing（“冲浪”）。其它网站到你的网站的链接越多，你也就会获得更多的访问量。更重要的是，你的网站的外部链接数越多，会被搜索引擎认为它的重要性越大，从而给你更高的排名
  • 合理的标签使用

• 17.有哪项方式可以对一个DOM设置它的CSS样式

  • 外部样式表，引入一个外部css文件
  • 内部样式表，将css代码放在 标签内部
  • 内联样式，将css样式直接定义在 HTML 元素内部

• 18.CSS都有哪些选择器

  • 派生选择器（用HTML标签申明）
  • id选择器（用DOM的ID申明）
  • 类选择器（用一个样式类名申明）
  • 属性选择器（用DOM的属性申明，属于CSS2，IE6不支持，不常用，不知道就算了）
  • 后代选择器（利用空格间隔，比如div .a{ }）
  • 群组选择器（利用逗号间隔，比如p,div,#a{ }）

• 19.CSS选择器的优先级是怎么样定义的

  • 用1表示派生选择器的优先级
  • 用10表示类选择器的优先级
  • 用100标示ID选择器的优先级

• 20.CSS中可以通过哪些属性定义，使得一个DOM元素不显示在浏览器可视范围内

  • 设置display属性为none，或者设置visibility属性为hidden
  • 设置宽高为0，设置透明度为0，设置z-index位置在-1000em

• 21.超链接访问过后hover样式就不出现的问题是什么？如何解决

  • 被点击访问过的超链接样式不在具有hover和active了,解决方法是改变CSS属性的排列顺序: L-V-H-A（link,visited,hover,active）

• 22.什么是Css Hack？ie6,7,8的hack分别是什么

  • 针对不同的浏览器写不同的CSS code的过程，就是CSS hack
    

      #test{   
        width:300px;   
        height:300px;   
        background-color:blue;      /*firefox*/
        background-color:red\9;      /*all ie*/
        background-color:yellow;    /*ie8*/
        +background-color:pink;        /*ie7*/
        _background-color:orange;       /*ie6*/    }  
        :root #test { background-color:purple\9; }  /*ie9*/
        @media all and (min-width:0px)
        { #test {background-color:black;} }  /*opera*/
        @media screen and (-webkit-min-device-pixel-ratio:0)
        { #test {background-color:gray;} }       /*chrome and safari*/
    

• 23.行内元素和块级元素的具体区别是什么？行内元素的padding和margin可设置吗

  • 块级元素(block)特性
    
    • 总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示;宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制
  • 内联元素(inline)特性
    
    • 和相邻的内联元素在同一行
    • 宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)都不可改变（也就是padding和margin的left和right是可以设置的），就是里面文字或图片的大小
  • 浏览器还有默认的天生inline-block元素（拥有内在尺寸，可设置高宽，但不会自动换行），有哪些
    
    • 、 、 、 、

• 24.什么是外边距重叠？重叠的结果是什么

  • 外边距重叠就是margin-collapse
  • 在CSS当中，相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为折叠，并且因而所结合成的外边距称为折叠外边距
  • 折叠结果遵循下列计算规则
    
    • 两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值
    • 两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值
    • 两个外边距一正一负时，折叠结果是两者的相加的和

• 25.rgba()和opacity的透明效果有什么不同

  • rgba()和opacity都能实现透明效果，但最大的不同是opacity作用于元素，以及元素内的所有内容的透明度
  • 而rgba()只作用于元素的颜色或其背景色。（设置rgba透明的元素的子元素不会继承透明效果！）

• 26.css中可以让文字在垂直和水平方向上重叠的两个属性是什么

  • 垂直方向：line-height
  • 水平方向：letter-spacing-》可以消除inline-block元素间的换行空格间隙问题

• 27.如何垂直居中一个浮动元素

      // 方法一：已知元素的高宽
      #div1{
          background-color:#6699FF;
          width:200px;
          height:200px;
          position: absolute;        //父元素需要相对定位
          top: 50%;
          left: 50%;
          margin-top:-100px ;   //二分之一的height，width
          margin-left: -100px;
          }
  
      //方法二:未知元素的高宽
  
      #div1{
          width: 200px;
          height: 200px;
          background-color: #6699FF;
  
          margin:auto;
          position: absolute;        //父元素需要相对定位
          left: 0;
          top: 0;
          right: 0;
          bottom: 0;
          }

• 28.px和em的区别

  • px和em都是长度单位，区别是，px的值是固定的，指定是多少就是多少，计算比较容易。em得值不是固定的，并且em会继承父级元素的字体大小
  • 浏览器的默认字体高都是16px。所以未经调整的浏览器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em

• 29.描述一个”reset”的CSS文件并如何使用它。知道normalize.css吗？你了解他们的不同之处

  • 重置样式非常多，凡是一个前端开发人员肯定有一个常用的重置CSS文件并知道如何使用它们。
    他们是盲目的在做还是知道为什么这么做呢？原因是不同的浏览器对一些元素有不同的默认样式，如果你不处理，在不同的浏览器下会存在必要的风险，或者更有戏剧性的性发生
  • 你可能会用Normalize来代替你的重置样式文件。它没有重置所有的样式风格，但仅提供了一套合理的默认样式值。既能让众多浏览器达到一致和合理，但又不扰乱其他的东西（如粗体的标题）
  • 在这一方面，无法做每一个复位重置。它也确实有些超过一个重置，它处理了你永远都不用考虑的怪癖，像HTML的audio元素不一致或line-height不一致

• 30.display:none与visibility:hidden的区别是什么

  • display : 隐藏对应的元素但不挤占该元素原来的空间
  • visibility: 隐藏对应的元素并且挤占该元素原来的空间
  • 即是，使用CSS display:none属性后，HTML元素（对象）的宽度、高度等各种属性值都将“丢失”;而使用visibility:hidden属性后，HTML元素（对象）仅仅是在视觉上看不见（完全透明），而它所占据的空间位置仍然存在

• 31.CSS中link和@import的区别是

  • Link属于html标签，而@import是CSS中提供的
  • 在页面加载的时候，link会同时被加载，而@import引用的CSS会在页面加载完成后才会加载引用的CSS
    +　@import只有在ie5以上才可以被识别，而link是html标签，不存在浏览器兼容性问题
  • Link引入样式的权重大于@import的引用（@import是将引用的样式导入到当前的页面中）

• 32.简介盒子模型

  • CSS的盒子模型有两种：IE盒子模型、标准的W3C盒子模型模型
  • 盒模型：内容、内边距、外边距（一般不计入盒子实际宽度）、边框

• 33.为什么要初始化样式

  • 由于浏览器兼容的问题，不同的浏览器对标签的默认样式值不同，若不初始化会造成不同浏览器之间的显示差异
  • 但是初始化CSS会对搜索引擎优化造成小影响

• 34.html语义化是什么

  • 当页面样式加载失败的时候能够让页面呈现出清晰的结构
  • 有利于seo优化，利于被搜索引擎收录（更便于搜索引擎的爬虫程序来识别）
  • 便于项目的开发及维护，使html代码更具有可读性，便于其他设备解析

• 35.Doctype的作用？严格模式与混杂模式的区别

  • 用于告知浏览器该以何种模式来渲染文档
  • 严格模式下：页面排版及JS解析是以该浏览器支持的最高标准来执行
  • 混杂模式：不严格按照标准执行，主要用来兼容旧的浏览器，向后兼容

• 36.IE的双边距BUG：块级元素float后设置横向margin，ie6显示的margin比设置的较大

  • 加入_display：inline

• 37.HTML与XHTML——二者有什么区别

  • 所有的标记都必须要有一个相应的结束标记
  • 所有标签的元素和属性的名字都必须使用小写
  • 所有的 XML 标记都必须合理嵌套
  • 所有的属性必须用引号 “” 括起来
  • 把所有 < 和 & 特殊符号用编码表示
  • 给所有属性赋一个值
  • 不要在注释内容中使用 “–”
  • 图片必须有说明文字

• 38.html常见兼容性问题

  • 双边距BUG float引起的 使用display
  • 3像素问题 使用float引起的 使用dislpay:inline -3px
  • 超链接hover 点击后失效 使用正确的书写顺序 link visited hover active
  • Ie z-index问题 给父级添加position:relative
  • Png 透明 使用js代码 改
  • Min-height 最小高度 ！Important 解决’
  • select 在ie6下遮盖 使用iframe嵌套
  • 为什么没有办法定义1px左右的宽度容器（IE6默认的行高造成的，使用over:hidden,zoom:0.08 line-height:1px）

  • IE5-8不支持opacity，

     .opacity {
        opacity: 0.4
        filter: alpha(opacity=60); /* for IE5-7 */
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; /* for IE 8*/
      }

  • IE6不支持PNG透明背景，解决办法: IE6下使用gif图片

• 39.对WEB标准以及W3C的理解与认识

  • 标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外 链css和js脚本、结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更广泛的设备所访问、更少的代码和组件，容易维 护、改版方便，不需要变动页面内容、提供打印版本而不需要复制内容、提高网站易用性

• 40.Doctype作用? 严格模式与混杂模式-如何触发这两种模式，区分它们有何意义

  • 声明位于文档中的最前面，处于 标签之前。告知浏览器的解析器，用什么文档类型 规范来解析这个文档
  • 严格模式的排版和 JS 运作模式是 以该浏览器支持的最高标准运行
  • 在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作
  • DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现

• 41.CSS的盒子模型

  • 两种， IE 盒子模型、标准 W3C 盒子模型；IE 的content部分包含了 border 和 pading
  • 盒模型： 内容(content)、填充(padding)、边界(margin)、 边框(border)

• 42.如何居中div,如何居中一个浮动元素

  • 思路：元素定位top：50%，left:50%，然后在margin-top和margin-left 它自身高度的一半就行
  • 方案2：使用css3的transltae(-50%,-50%)，然后left：50%,top:50%

• 43.列出display的值，说明他们的作用

  • block 象块类型元素一样显示
  • none 缺省值。向行内元素类型一样显示
  • inline-block 象行内元素一样显示，但其内容象块类型元素一样显示
  • list-item 象块类型元素一样显示，并添加样式列表标记

• 44.position的值， relative和absolute定位原点是

  • absolute:生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位
  • fixed （老IE不支持）: 生成绝对定位的元素，相对于浏览器窗口进行定位
  • relative: 生成相对定位的元素，相对于其正常位置进行定位
  • static:默认值。没有定位，元素出现在正常的流中
  • (忽略 top, bottom, left, right z-index 声明)
  • inherit 规定从父元素继承 position 属性的值

• 45.absolute的containing block计算方式跟正常流有什么不同

  • lock-level boxes，一个 block-level element (‘display’ 属性值为 ‘block’, ‘list-item’ 或是 ‘table’) 会生成一个 block-level box，这样的盒子会参与到 block-formatting context (一种布局的方式) 中。
  • block formatting context，在这种布局方式下，盒子们自所在的 containing block 顶部起一个接一个垂直排列，水平方向上撑满整个宽度 (除非内部的盒子自己内部建立了新的 BFC)。
  • containing block：一般来说，盒子本身就为其子孙建立了 containing block，用来计算内部盒子的位置、大小，而对内部的盒子，具体采用哪个 containing block 来计算，需要分情况来讨论：
  • 若此元素为 inline 元素，则 containing block 为能够包含这个元素生成的第一个和最后一个 inline box 的 padding box (除 margin, border 外的区域) 的最小矩形；
    否则则由这个祖先元素的 padding box 构成。
    根元素所在的 containing block 被称为 initial containing block，在我们常用的浏览器环境下，指的是原点与 canvas 重合，大小和 viewport 相同的矩形；
    对于 position 为 static 或 relative 的元素，其 containing block 为祖先元素中最近的 block container box 的 content box (除 margin, border, padding 外的区域)；
    对于 position:fixed 的元素，其 containing block 由 viewport 建立；
    对于 position:absolute 的元素，则是先找到其祖先元素中最近的 position 属性非，static 的元素，然后判断：
  • 如果都找不到，则为 initial containing block。

c3 和 h5

• 1.CSS3有哪些新特性

  • CSS3 实现圆角（border-radius）,阴影(box-shadow)
  • 对文字加特效（text-shadow）,线性渐变(gradient),旋转(transform)
  • transform:rotate(9deg)、scale(0.85,0.90)、translate(0px,10px)、skew(-9deg,0deg);->旋转，缩放、定位、倾斜
  • 增加了更多的CSS选择器，多背景 raba
  • 在CSS3 中唯一引入的伪元素是 ::selection.
  • 媒体查询，多栏布局
  • border-image

• 2.html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？

  • 新增加的
    
    • 拖拽释放(Drag and drop) API
    • 语义话更好的内容标签->header,nav,footer,aside,article,section
    • 音频、视频API(audio,video)
    • 画布(canvas)API
    • 地理(Geoloca)
    • 本地离线存储 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://html5shim.googlecode.com/svn/trunk/html5.js"</script>
<![endif]-->

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

• 3.本地存储(Local Storage)和cookies（储存在用户本地终端上的数据）之间的区别是什么？

  • Cookies:服务器和客户端都可以访问；大小只有4KB左右；有有效期，过期后将会删除；
    本地存储：只有本地浏览器端可访问数据，服务器不能访问本地存储直到故意通过POST或者GET的通道发送到服务器；每个域5MB；没有过期数据，它将保留知道用户从浏览器清除或者使用Javascript代码移除

• 4.如何实现浏览器内多个标签页之间的通信?

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

• 5.什么是响应式设计？

  • 它是关于网页制作的过程中让不同的设备有不同的尺寸和不同的功能。响应式设计是让所有的人能在这些设备上让网站运行正常

• 6.新的 HTML5 文档类型和字符集是？

    HTML5文档类型：<!doctype html>
    HTML5使用的编码<meta charset=”UTF-8”>

• 7.HTML5 Canvas 元素有什么用？

  • Canvas 元素用于在网页上绘制图形，该元素标签强大之处在于可以直接在 HTML 上进行图形操作。

• 8.HTML5 存储类型有什么区别？

  • Media API、Text Track API、Application Cache API、User Interaction、Data Transfer API、Command API、Constraint Validation API、History API

• 9.CSS3新增伪类有那些？

  • p:first-of-type 选择属于其父元素的首个

    元素的每个

    元素

  • p:last-of-type 选择属于其父元素的最后

    元素的每个

    元素

  • p:only-of-type 选择属于其父元素唯一的

    元素的每个

    元素

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

    元素

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

    元素

  • :enabled、:disabled 控制表单控件的禁用状态
  • :checked，单选框或复选框被选中

• 10.请描述一下cookies，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仅仅是为了在本地“存储”数据而生

• 11.如何在 HTML5 页面中嵌入音频

  • HTML 5 包含嵌入音频文件的标准方式，支持的格式包括 MP3、Wav 和 Ogg
    

      <audio controls> 
         <source src="jamshed.mp3" type="audio/mpeg"> 
         Your browser does'nt support audio embedding feature. 
      </audio>

• 12.如何在 HTML5 页面中嵌入视频
  
  • 和音频一样，HTML5 定义了嵌入视频的标准方法，支持的格式包括：MP4、WebM 和 Ogg
    
<video width="450" height="340" controls>
<source src="jamshed.mp4" type="video/mp4">
Your browser does'nt support video embedding feature.
</video>


• 13.HTML5 引入什么新的表单属性

  • Datalist datetime output keygen date month week time number range emailurl

• 14.cookie在浏览器和服务器间来回传递,sessionStorage和localStorage区别

  • sessionStorage和localStorage的存储空间更大
  • sessionStorage和localStorage有更多丰富易用的接口
  • sessionStorage和localStorage各自独立的存储空间

移动端开发

• 1.移动端常用类库及优缺点

• 2.Zepto库和JQ区别

  • Zepto相对jQuery更加轻量，主要用在移动端，jQuery也有对应的jQuerymobile移动端框架

javascript 基础面试题

• 1.javascript 的 typeof返回那些数据类型？

  • object、string、boolean、number、undefined、function

• 2.列举3种强制类型转换和2种隐式类型转换？

  • 强制：parseInt、parseFloat、Number
  • 隐式：== ！！

• 3.split()、join的区别

  • split：切割成数组的形式
  • join：将数组转换成字符串

• 4.数组方法 pop、push、unshift、shift

  • push：尾部添加 pop：尾部删除
  • unshift：头部添加 shift：头部删除

• 5.事件绑定和普通事件有什么区别？

  • 普通事件的方法

      var btn = document.getElementById('hello');
      btn.onclick = function(){
          alert('hello');
      }
      btn.onclick = function(){
          alert('2')
      }
      //输出 2

    ==执行上面的代码弹窗2==

  • 事件绑定方式添加事件：

     var btn = document.getElementById('hello');
     btn.addEventListener('click',function(){
         alert(1);
     },false)
     btn.addEventListener('click',function(){
         alert(2);
     },false);
    

    ==执行上面的代码会先 alert1 再 alert2 普通添加事件的方法不支持添加多个事件，最下面的事件会覆盖上面的，而事件绑定（addEventListener）方式添加事件可以添加多个。addEventListener 不兼容低版本IE，普通事件无法取消，addEventLisntener 还支持事件冒泡+事件捕获==

• 6.IE 和 DOM 事件流的区别

  • 执行顺序不一样
  • 参数不一样
  • 事件加不加on
  • this指向问题

• 7.IE 和标准下有哪些兼容性写法

    var ev = ev || window.event;
    document.documentElement.clientWidth || document.body.clientWidth
    var target = ev.srcElement || ev.target;

• 8.call 和 apply 的区别

  • call
    
    • 语法：call(thisObj,Object1,Object2….);
    • 定义：调用一个对象的一个方法，以另一个对象替换当前对象
    • 说明：cll 方法可以用来代替另一个对象调该对象的方法。call 方法可以将一个函数的对象上下文从初始的上下文改变由 thisObj 指定的新对象。如果没有提供 thisObj 参数，那么 Global 对象被用作 thisObj.
  • apply方法
    
    • 语法：apply(thisObj,[argArray]);
    • 定义：应用某一个对象的一个方法，用另一个对象替换当前对象。
    • 说明：如果 argArray 不是一个有效的数组或者不是 arguments 对象，那么将导致一个 TypeError。如果没有提供 argArray 和 thisObj 任何一个参数，那么 Global 对象将被用作 thisObj，并且无法被传递任何参数。

• 9.b 继承 a 的方法

    function A( age, name ){
        this.age = age;
        this.name = name;
    }
    A.prototype.show = function(){
        alert('父级方法');
    }
    function B( age , name ,job ){
        A.apply(this,arguments);
        this.job = job;
    }
    B.prototype = new A();
    var b = new A(14,'遐客行');
    var a = new B(15,'朗霞','侠客');
  

• 10.如何阻止事件冒泡和默认事件
  
  • 阻止事件冒泡
    
//阻止事件冒泡
function stopBubble(e){
//如果提供了事件对象，则这是一个非IE浏览器
if ( e && e.stopPropagation ){
//因此它支持W3C的stopPropagation()
e.stopPropagation();
}else{
//否则，我们需要使用IE的方式来取消冒泡
window.event.cancelBubble = true;
}
}

  • 阻止事件默认行为
    
function stopDefault(e){
//w3c
if ( e && e.preventDefault ){
e.preventDefault();
}else{
//IE
window.event.returnValue = false;
}
return false;
}


• 11.添加、删除、替换、插入到某个节点的方法

  • appendChild()、insertBefore、replaceChild、removeChild

• 12.javascript 的本地对象，内置对象和宿主对象

  • 本地对象为 array obj regexp 等可以new实例化
  • 内置对象为 gload Math 等不可以实例化的
  • 宿主对象为浏览器自带的 document,window 等

• 13.window.onload 和 document ready 的区别

  • window.onload 是在 dom 文档树加载完所有文件之后执行一个函数
  • Document.ready 原生没有这个方法，jquery 中有$().ready(function)，在 dom 文档树加载完后执行一个函数（这里的文档树加载完不代表文件加载完）
  • $(document).ready 要比 window.onload 先执行
  • window.onload 只能执行一次，$(document).ready 可能出现多次

• 14.“= =” 和 “===”的不同

  • 前者会自动转换成类型，后者不会

• 15.javascript 的同源策论

  • 一段脚本只能读取来自同一源的窗口和文档属性，这里的同一个源指的的是主机名、协议和端口号的组合

• 16.javascript 是一门什么样的语言，它有哪些特点？

  • javascript 是一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为 javascript 引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在 html 网页上使用，用来给html网页增加动态功能。 javascript 兼容于ECMA标准，因此也称为 ECMAscript。
  • 基本特点
    
    • 1.是一种解释性脚本语言
    • 主要用来向 HTML 页面添加交互行为
    • 可以直接嵌套 HTML 页面，但写成单独的js 文件有利于结构和行为的分离
    • 跨平台特性，在绝大多数浏览器的支持，可以在多种平台下运行

• 17.javascript 的数据类型都有什么？

  • 基本数据类型：String,Boolean,Number,undefined,null
  • 引用数据类型：Object(Array,Date,RegExp,Function)
  • 如何判断某变量是否为数组类型？
    
    • 1.使用数组方法 slice 的方式
    • 2.obj instanceof Array 在某些IE版本中不正确
    • 3.使用 ECMAScript5 中定义的方法 Array.isArray();
    • 4.最好的方法：
      
if ( typeof Array.isArray === 'undefined' ){
Array.isArray = function(arg){
return Object.prototype.toString.call(arg) === "[object Array]";
}
}


• 18.希望获取到页面中所有的checkbox怎么做？（不使用第三方框架）

      var domList = document.getElementsByTagName(‘input’)
      var checkBoxList = [];
      var len = domList.length;//缓存到局部变量
      while (len--) {　　//使用while的效率会比for循环更高
  　　    if (domList[len].type == ‘checkbox’) {
          　　checkBoxList.push(domList[len]);
      　　}
      }
  

• 19.javascript 的事件流模型都有什么？

  • “事件冒泡”：事件开始由最具体的元素接收，然后逐级向上传播
  • “事件捕捉”：事件由最不具体的节点接收，然后逐级向下，一直到最具体的
  • DOM 事件流：三个阶段：事件捕捉、目标阶段、事件冒泡

• 20.看下列代码输出为何？解释原因

    var a;
    alert(typeof a);//undefind
    alert(b);//报错

  • 解释：undefind 是一个只有一个值得数据类型，这个值就是 undefind，在使用 var 声明变量但未对其赋值进行初始化时，这个变量的值就是 undefind 。而 b 由于未声明将报错。

• 21.看下面代码输出什么？解释原因

  var undefined;
  undefined == null; // true
  1 == true;   // true
  2 == true;   // false
  0 == false;  // true
  0 == '';     // true
  NaN == NaN;  // false
  [] == false; // true
  [] == ![];   // true
  
  var foo = "11"+2-"1";
  console.log(foo);
  console.log(typeof foo);
  执行完后foo的值为111，foo的类型为Number。
  

  • undefined与null相等，但不恒等（=\=\=）
    一个是number一个是string时，会尝试将string转换为number
    尝试将boolean转换为number，0或1
    尝试将Object转换成number或string，取决于另外一个对比量的类型
    所以，对于0、空字符串的判断，建议使用 “=\=\=” 。“\=\=\=”会先判断两边的值类型，类型不匹配时为false。
    那么问题来了，看下面的代码，输出什么，foo的值为什么？

    var foo = "11"+2-"1";
    console.log(foo);
    console.log(typeof foo);

  • 执行完后foo的值为111，foo的类型为Number

• 22.看代码给答案

  var a = new Object();
  a.value = 1;
  b = a;
  b.value = 2;
  alert(a.value)
  

  • 答案：2（考察引用数据类型细节）

• 23.26. 已知数组 var stringArray = [“This”, “is”, “Baidu”, “Campus”]，Alert 出 This is Baidu Campus

  • alert(stringArray.join(“”))

• 24.27. 已知有字符串 foo=”get-element-by-id”,写一个 function 将其转化成驼峰表示法 ”getElementById”

  function combo(msg){
      var arr=msg.split("-");
      for(var i=1;i<arr.length;i++){
          arr[i]=arr[i].charAt(0).toUpperCase()+arr[i].substr(1,arr[i].length-1);
      }
      msg=arr.join("");
      return msg;
      }
  

• 25.var numberArray = [3,6,2,4,1,5]（考察基础API）
  
  • 实现对该数组的倒排，输出[5,1,4,2,6,3]
    
numberArray.reverse()

  • 实现对该数组的降序排列，输出[6,5,4,3,2,1]
    
numberArray.sort(function(a,b){return b-a})


• 26.输出今天的日期，以YYYY-MM-DD的方式，比如今天是2014年9月26日，则输出2014-09-26

  var d = new Date();
  // 获取年，getFullYear()返回4位的数字
  var year = d.getFullYear();
  // 获取月，月份比较特殊，0是1月，11是12月
  var month = d.getMonth() + 1;
  // 变成两位
  month = month < 10 ? '0' + month : month;
  // 获取日
  var day = d.getDate();
  day = day < 10 ? '0' + day : day;
  alert(year + '-' + month + '-' + day);
  

• 27.将字符串”{$id}</td><td>{$name}</td></tr>”中的{$id}替换成10，{$name}替换成Tony （使用正则表达式）

      <tr><td>{$id}</td><td>{$id}_{$name}</td></tr>".replace(/{\$id}/g, '10').replace(/{\$name}/g, 'Tony')

• 28.为了保证页面输出安全，我们经常需要对一些特殊的字符进行转义，请写一个函数escapeHtml，将<, >, &, “进行转义

  function escapeHtml(str) {
      return str.replace(/[<>”&]/g,     function(match) {
          switch (match) {
             case “<”:
                return “&lt;”;
             case “>”:
                return “&gt;”;
             case “&”:
                return “&amp;”;
             case “\””:
                return “&quot;”;
            }
        });
  }

• 29.32. foo = foo||bar ，这行代码是什么意思？为什么要这样写？

  • if(!foo) foo = bar;如果foo存在，值不变，否则把bar的值赋给foo。
    短路表达式：作为”&&”和”||”操作符的操作数表达式，这些表达式在进行求值时，只要最终的结果已经可以确定是真或假，求值过程便告终止，这称之为短路求值。

• 30.看下列代码，将会输出什么?(变量声明提升)

     var foo = 1;
      (function(){
          console.log(foo);
          var foo = 2;
          console.log(foo);
      })()

  ==答案：输出undefined 和 2。上面代码相当于：==

    var foo = 1;
      (function(){
          var foo;
          console.log(foo); //undefined
          foo = 2;
          console.log(foo); // 2;   
      })()
  

  ==函数声明与变量声明会被 javscript 引擎隐式地提升到当前作用域的顶部，但是只是提升名称不会提升赋值部分==

• 31.用 js 实现随机选取 10 - 100 之间的10个数字，存入一个数组，并排序

      function randomNub(aArray, len, min, max) {
          if (len >= (max - min)) {
              return '超过' + min + '-' + max + '之间的个数范围' + (max - min - 1) + '个的总数';
          }
          if (aArray.length >= len) {
              aArray.sort(function (a, b) {
                  return a - b
              });
              return aArray;
          }
          var nowNub = parseInt(Math.random() * (max - min - 1)) + (min + 1);
          for (var j = 0; j < aArray.length; j++) {
              if (nowNub == aArray[j]) {
                  randomNub(aArray, len, min, max);
                  return;
              }
          }
          aArray.push(nowNub);
          randomNub(aArray, len, min, max);
          return aArray;
      }
      var arr = [];
      console.log(randomNub(arr, 10, 10, 100));

• 32.把两个数组合并，并删除第二个元素
  
var array1 = ['a','b','c'];
var array2 = ['d','e','f'];
var array3 = array1.concat(array2);
array3.splice(1,1);


• 33.怎样添加、移除、移动、复制、创建和查找节点（原生JS，）

  • createDocumentFragment():创建新节点，创建一个 DOM 片段
  • createElement():创建一个具体元素
  • createTextNode():创建一个文本节点
  • appendChild():添加节点
  • removeChild():删除节点
  • replaceChild():替换节点
  • insertBefore():插入节点
  • getElementsByTagName():通过标签名称查找节点
  • getElementsByName():通过元素的 Name 属性值查找
  • getElementById():通过元素Id，唯一性

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

    function serilizeUrl(url) {
          var urlObject = {};
          if (/\?/.test(url)) {
              var urlString = url.substring(url.indexOf("?") + 1);
              var urlArray = urlString.split("&");
              for (var i = 0, len = urlArray.length; i < len; i++) {
                  var urlItem = urlArray[i];
                  var item = urlItem.split("=");
                  urlObject[item[0]] = item[1];
              }
              return urlObject;
          }
          return null;
      }
    var obj=  serilizeUrl('http://item.taobao.com/item.htm?a=1&b=2&c=&d=xxx&e');

• 35.正则表达式构造函数var reg=new RegExp(“xxx”)与正则表达字面量var reg=//有什么不同？匹配邮箱的正则表达式？
  
  • 答案：当使用RegExp()构造函数的时候，不仅需要转义引号（即\”表示”），并且还需要双反斜杠（即\表示一个\）。使用正则表达字面量的效率更高。
    
var regMail = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((.[a-zA-Z0-9_-]{2,3}){1,2})$/;

• 36.看下面代码，给出输出结果
  
for (var i = 1; i <= 3; i++) {
setTimeout(function () {
console.log(i);
}, 0);
};

  ==输出：4 4 4==
  ==原因：Javascript事件处理器在线程空闲之前不会运行。追问，如何让上述代码输出1 2 3？==
  
for (var i = 1; i <= 3; i++) {
setTimeout((function (a) { //改成立即执行函数
console.log(a);
})(i), 0);
};

• 37.写一个function，清除字符串前后的空格。（兼容所有浏览器）
  
if (!String.prototype.trim) {
String.prototype.trim = function () {
return this.replace(/^\s+/, "").replace(/\s+$/, "");
}
}
// test the function
var str = " \t\n test string ".trim();
alert(str == "test string"); // alerts "true"

• 38.javascript 中 callee 和 caller 的作用？
  
  • caller 是返回一个函数的引用，该函数调用了当前函数
  • callee 是返回正在被执行的 function 函数，也就是所指定的 function 对象的正文

==那么问题来了!如果一对兔子每月生一对兔子；一对新生兔，从第二个月起就开始生兔子；假定每对兔子都是一雌一雄，试问一对兔子，第n个月能繁殖成多少对兔子？（使用callee完成==

    //典型的斐波那契数列 
    var result = [];
    function fn(n) { 
        if (n == 1) {
            return 1;
        } else if (n == 2) {
            return 1;
        } else {
            if (result[n]) {
                return result[n];
            } else {
                //argument.callee()表示fn()
                result[n] = arguments.callee(n - 1) + arguments.callee(n - 2);
                return result[n];
            }
        }
    }

• 39.Javascript中, 以下哪条语句一定会产生运行错误？

  A、var _变量=NaN;  
  B、var 0bj = []; //命名不对，报错，不用以数字开头  
  C、var obj = //; //运行undefind    
  D、var obj = {};

  ==答案BC，注意：C在有些浏览器上会报错，chrome运行fundefind ==

• 40.以下两个变量a和b，a+b的哪个结果是NaN？

    A、var a=undefined; b=NaN 
    B、var a= ‘123’; b=NaN
    C、var a =undefined , b =NaN
    var a=NaN , b='undefined'
  

• 41.var a=10; b=20; c=4; ++b+c+a++ 以下哪个结果是正确的?

    A、34   B、35  C、36  D、37

  ==答案：B==

• 42.将页面中所有文本框的表单，并将他们全部清空

      //方法1
      for (vari = 0; i < form1.elements.length; i++) {
          if (form1.elements.type == 'text')
              form1.elements.value = '';
      }
      //方法2
      for (vari = 0; i < document.forms.length; i++) {
          if (forms[0].elements.type == 'text')
              forms[0].elements.value = '';
      }
      //方法3
      if (document.form.elements.type == 'text')
          form.elements.value = '';
      //方法4
      for (vari = 0; i < document.forms.length; i++) {
          for (var j = 0; j < document.forms.elements.length; j++) {
              if (document.forms.elements[j].type == 'text')
                  document.forms.elements[j].value = '';
          }
      }

• 43.分析代码，得出正确的结果
  
var a=10, b=20 , c=30;
++a;
a++;
e=++a+(++b)+(c++)+a++;
alert(e);//77

• 44.写出函数 DateDemo 的返回结果，系统时间假定为今天
  
function DateDemo() {
var d, s = "今天日期是：";
d = new Date();
s += d.getMonth() + 1 + "/";
s += d.getDate() + "/";
s += d.getFullYear();
return s;
}

• 45.写出简单描述html标签（不带属性的开始标签和结束标签）的正则表达式，并将以下字符串中的html标签去除掉
  
var str = '<div> 这里是div <p> 里面的段落 </p></div>';
var reg = /<\/?\w+\/?>/gi;
alert(str.replace(reg,''));

• 46.完成foo()函数的内容，要求能够弹出对话框提示当前选中的是第几个单选框
  
//js代码
function foo() {
//在此处添加代码
var rdo = document.form1.radioGroup;
for (var i = 0; i < rdo.length; i++) {
if (rdo.checked) {
alert(“您选择的是第” + (i + 1) + ”个单选框”);
}
}
}
//html代码
<form name=”form1″>
<input type=”radio” name=”radioGroup”/>
<input type=”radio” name=”radioGroup”/>
<input type=”radio” name=”radioGroup”/>
<input type=”radio” name=”radioGroup”/>
<input type=”submit”/>
</form>


• 47.列举浏览器对象模型BOM里常用的至少4个对象，并列举window对象的常用方法至少5个

  • 对象：window,document,location,screen,history,navigator
  • 方法:alert(),confirm(),prompt(),open(),close()

• 48.希望获取到页面中所有的checkbox怎么做？(不使用第三方框架)

      var domList = document.getElementsByTagName('input')
      var checkBoxList = [];
      var len = domList.length;　　 //缓存到局部变量
      while (len--) {　　 //使用while的效率会比for循环更高
          　　
          if (domList[len].type == 'checkbox') {　　
              checkBoxList.push(domList[len]);　　
          }
      }

• 49.简述创建函数的几种方式
  
//第一种（函数声明）：
function sum1(num1,num2){
return num1+num2;
}
//第二种（函数表达式）：
var sum2 = function(num1,num2){
return num1+num2;
}
//第三种（函数对象方式）：
//var sum3 = new Function("num1","num2","return num1+num2");


• 50.iframe 的优缺点

  • 优点
    
    • 解决加载缓慢的第三方内容如图标和广告等的加载问题
    • Security sandbox
    • 并行加载脚本
  • 缺点
    
    • iframe会阻塞主页面的Onload事件
    • 即时内容为空，加载也需要时间
    • 没有语意

• 51.请你谈谈Cookie的弊端？

  • Cookie 数量长度的限制。每个 domain 最多只能有20条cookie，每个cookie长度不能超过 4KB，否则会被截掉
  • 安全性问题。如果cookie被人拦截了，那人就可以取得所有的session信息。即使加密也与事无补，因为拦截者并不需要知道cookie的意义，他只要原样转发cookie就可以达到目的了
  • 有些状态不可能保存在客户端。例如，为了防止重复提交表单，我们需要在服务器端保存一个计数器。如果我们把这个计数器保存在客户端，那么它起不到任何作用

• 52.js延迟加载的方式有哪些？

  • defer 和 async
  • 动态创建 DOM 方式（创建script，插入到DOM中，加载完毕后callBack）
  • 按需异步载入js

• 53.哪些操作会造成内存泄漏？

  • 内存泄漏指任何对象在您不再拥有或需要它之后仍然存在
  • 垃圾回收器定期扫描对象，并计算引用了每个对象的其他对象的数量。如果一个对象的引用数量为0(没有其他对象引用过该对象)，或对该对象的唯一引用是循环的，那么该对象的内存即可回收
  • setTimeout 的第一个参数使用字符串而非函数的话，会引发内存泄漏
  • 闭包
  • 控制台日志
  • 循环（在两个对象彼此引用且彼此保留时，就会产生一个循环）

• 54.判断一个字符串中出现次数最多的字符，统计这个次数

      var str = 'asdfssaaasasasasaa';
      var json = {};
      for (var i = 0; i < str.length; i++) {
          if (!json[str.charAt(i)]) {
              json[str.charAt(i)] = 1;
          } else {
              json[str.charAt(i)]++;
          }
      };
      var iMax = 0;
      var iIndex = '';
      for (var i in json) {
          if (json[i] > iMax) {
              iMax = json[i];
              iIndex = i;
          }
      }
      alert('出现次数最多的是:' + iIndex + '出现' + iMax + '次');

• 55.写一个获取非行间样式的函数
  
function getStyle(obj, attr, value) {
if (!value) {
if (obj.currentStyle) {
return obj.currentStyle[attr];
} else {
window.getComputedStyle(obj, attr)[value];
}
} else {
obj.style[attr] = value;
}
}


• 56.事件委托是什么

  • 让利用事件冒泡的原理，让自己的所触发的事件，让他的父元素代替执行！

• 57.闭包是什么，有什么特性，对页面有什么影响

  • 我的理解是，闭包就是能够读取其他函数内部变量的函数。在本质上，闭包就是将函数内部和函数外部连接起来的一座桥梁。
    

       function outer() {
            var num = 1;
    
            function inner() {
                var n = 2;
                alert(n + num);
            }
            return inner;
        }
        outer()();

• 58.解释 jsonp 的原理，以及优缺点

  • 动态创建 script 标签，回调函数
  • Ajax 是页面无刷新请求数据操作
  • ==优点==
    
    • 1.它不像 XMLHttpRequest 对象实现的 Ajax 请求那样受到同源策略的限制，JSONP 可以跨越同源策略
    • 2.它的兼容性更好，在更加古老的浏览器中都可以运行，不需要 XMLRequest 或 ActiveX的支持
    • 3.在请求完毕后可以通过调用 Callback 的方式回传结果。将回调方法的权限给了调用方。这个就相当于将 controller 层和 view 层终于分开了。
  • ==缺点==
    
    • 1.它只支持 GET 请求而不支持 POST 等其他类型的请求
    • 2.它只支持跨域 HTTP 请求这种情况，不能解决不同域的两个页面之间如何进行 javascript 调用问题
    • 3.jsonp 在调用失败的时候不会返回各种 HTTP 状态码
    • 4.安全性。万一假如提供jsonp 的服务器在页面注入漏洞，即它返回的 javascript 的内容被人控制的。那么结果是什么？所有调用这个jsonp 的网站都会存在漏洞。于是无法把危险控制在一个域名下，所有在使用jsonp的时候必须保持使用的jsonp服务器必须是安全可信的

• 59.字符串反转，如将 ‘12345678’ 变成 ‘87654321

  • 思路：先将字符串转换为数组 split()，利用数组的反序函数 reverse()颠倒数组，再利用 jion() 转换为字符
    

      var str = '12345678';
      str = str.split('').reverse().join('');

• 60.将数字 12345678 转化成 RMB形式 如： 12,345,678
  
function re(str) {
str += '';
return str.split("").reverse().join("");
}
function toRMB(num) {
var tmp = '';
for (var i = 1; i <= re(num).length; i++) {
tmp += re(num)[i - 1];
if (i % 3 == 0 && i != re(num).length) {
tmp += ',';
}
}
return re(tmp);
}
console.log(toRMB('12345678'));

• 61.生成5个不同的随机数
  
//思路：5个不同的数，每生成一次就和前面的所有数字相比较，如果有相同的，则放弃当前生成的数字！
var num1 = [];
for (var i = 0; i < 5; i++) {
num1[i] = Math.floor(Math.random() * 10) + 1; //范围是 [1, 10]
for (var j = 0; j < i; j++) {
if (num1[i] == num1[j]) {
i--;
}
}
}


• 62.去掉数组中重复的数字

    //数组去重
      var arr = [1, 1, 2, 2, 1, 2, 2, 1, 3, 2, 4, 3, 4, 1, 2, 3, 7, 8, 9];
      var j;
      //需求：根据arr，取出所有不重复的元素[1,2,3,4,7,8,9];
      //1 声明结果数组
      var resultArr = [arr[0]];//可以先将arr[0]放入到结果数组中(因为结果数组中现在是空的，不可能重复)
  
      //2 获取arr中的每个元素，到resultArr中进行比較，如果在resultArr中不存在arr[i]，放入即可
      for (var i = 1; i < arr.length; i++) {
      //取出了arr[i],需要与resultArr中每一个元素进行比較，还需要遍历resultArr
  
          for (j = 0; j < resultArr.length; j++) {
          //使用arr[i]与resultArr[j]进行比較，如果每一次比较均不相等，放入即可
          //如果有一个项相等，阻止放入，设置假设条件为false
              if (arr[i] == resultArr[j]) {
                  break;//提高效率，找到一个相等的，后面的就没必要看了
              }
          }
  
          //所以，需要在所有的比較完成后，在判断是否放入
          if (j == resultArr.length) {
              resultArr[resultArr.length] = arr[i];
          }
      }
      console.log(resultArr);

• 63.求质数
  
//假设成立法:
var num = 4;
//1 检测一个数是不是质数，不太确定是不是，可以通过假设的方式
var flag = true;
//2 对假设进行要进行验证
for (var i = 2; i <= num / 2; i++) {
//3 找到可以是假设失败的情况
if (num % i == 0) {
//4 假设失败，设置假设条件为false
flag = false;
//可以添加break，单纯的为了减少执行次数，提高效率(可以省略)
break;
}
}
//5 根据假设判断是否是质数
if (flag == true) {
alert("是质数");
} else {
alert("不是质数");
}

• 64.反转数组
  
var arr = [1,2,3,4,5,6,7];
var temp=[];
for (var i = arr.length-1; i>=0; i--) {
temp[temp.length] = arr[i];
}
console.log(temp);


• 65.冒泡排序

     //第1版
      var arr = [1, 2, 3, 5, 4];
      var temp
      //外层循环控制轮数
      for (var i = 0; i < arr.length - 1; i++) {
      //内层循环控制每一轮的比較次数
      for (var j = 0; j < arr.length - 1 - i; j++) {
      //每一次要做的事情，比較当前项和后项的大小
      if (arr[j] > arr[j + 1]) {
      //交换两个位置的值
      temp = arr[j];
      arr[j] = arr[j + 1];
      arr[j + 1] = temp;
      }
      }
      }
      console.log(arr);

    //第2版
      var arr = [1, 2, 3, 5, 4];
      var temp, flag;
  
      //外层循环控制轮数
      for (var i = 0; i < arr.length - 1; i++) {
      //不确定的是，哪一轮的比較是可以结束的（排好了）
          flag = true;
      //内层循环控制每一轮的比較次数
          for (var j = 0; j < arr.length - 1 - i; j++) {
               //每一次要做的事情，比較当前项和后项的大小
              if (arr[j] > arr[j + 1]) {
              //交换两个位置的值
              temp = arr[j];
              arr[j] = arr[j + 1];
              arr[j + 1] = temp;
  
      //设置假设不成立的条件，如果if被进入，说明排序没有完成
          flag = false;//阻止跳出
          }
      }
      //根据flag，验证假设是否成立
      if (flag == true) {//==true可以省略，原因是flag本身就是bool值
          break;
      }
      }
      console.log(arr);

• 66.window.location.search() 返回的是什么？

  • 查询(参数)部分。除了给动态语言赋值以外，我们同样可以给静态页面,并使用javascript来获得相信应的参数值
  • 返回值：?ver=1.0&id=timlq 也就是问号后面的！

• 67.window.location.hash 返回的是什么？

  • 锚点,返回值：#love

• 68.javascript 中的垃圾回收机制？

  • 在Javascript中，如果一个对象不再被引用，那么这个对象就会被GC回收。如果两个对象互相引用，而不再 被第3者所引用，那么这两个互相引用的对象也会被回收。因为函数a被b引用，b又被a外的c引用，这就是为什么 函数a执行后不会被回收的原因。

• 69.看代码写结果

    function changeObjectProperty(o) {
          o.siteUrl = "http://www.csser.com/";
          o = new Object();
          o.siteUrl = "http://www.popcg.com/";
      }
      var CSSer = new Object();
      changeObjectProperty(CSSer);
      console.log(CSSer.siteUrl); //http://www.csser.com/

==如果CSSer参数是按引用传递的，那么结果应该是”http://www.popcg.com/“，但实际结果却仍是”http://www.csser.com/“。事实是这样的：在函数内部修改了引用类型值的参数，该参数值的原始引用保持不变。我们可以把参数想象成局部变量，当参数被重写时，这个变量引用的就是一个局部变量，局部变量的生存期仅限于函数执行的过程中，函数执行完毕，局部变量即被销毁以释放内存。
（补充：内部环境可以通过作用域链访问所有的外部环境中的变量对象，但外部环境无法访问内部环境。每个环境都可以向上搜索作用域链，以查询变量和函数名，反之向下则不能)==

• 70.代码题

      var a = 6; 
      setTimeout(function(){
          alert(a);
          var a = 66; 
      }, 1000);
      a = 666; 
      alert(a); 
      // 666, undefined;
  

  ==异步处理，一切声明提前==

• 71.什么事同源策略

  • 同协议、端口、域名的安全策略，由王景公司提出来的安全协议！

• 72.为什么不能定义1px左右的div容器？

    IE6下这个问题是因为默认的行高造成的，解决的方法也有很多，例如：
    overflow:hidden | zoom:0.08 | line-height:1px

• 72.计算字符串字节数

      new function(s){ 
          if(!arguments.length||!s) return null;  
          if(""==s) return 0;     
          var l=0;
          for(var i=0;i<s.length;i++){        
              if(s.charCodeAt(i)>255) l+=2; else l+=1;  //charCodeAt()得到的是unCode码   
          }     //汉字的unCode码大于 255bit 就是两个字节
          alert(l); 
      }("hello world!");
  

• 73.请用代码实现 outerHTML
  
Object.prototype.outerHTML = function () {
var innerCon = this.innerHTML, //获得里面的内容
outerCon = this.appendChild(innerCon); //添加到里面
alert(outerCon);
}
function $(id) {
return document.getElementById(id);
}
alert($('outer').innerHTML);
alert($('outer').outerHTML);

• 74.JS中简单继承 call 方法
  
function Parent(name, money) {
this.name = name;
this.money = money;
this.info = function () {
alert('姓名： ' + this.name + ' 钱： ' + this.money);
}
}
//定义孩子类
function Children(name) {
Parent.call(this, name); //继承 姓名属性，不要钱。
this.info = function () {
alert('姓名： ' + this.name);
}
}
//实例化类
var per = new Parent('parent', 800000000000);
var chi = new Children('child');
per.info();
chi.info();


• 75.jquery 中的bind(),live(),delegate()的区别

  • bind:绑定事件，对新添加的事件不起作用，方法用于将一个处理程序附加到每个匹配元素的事件上并返回jquery对象。
  • live:方法将一个事件处理程序附加到当前选择器匹配的所有元素（包含现有的或将来添加的）的指定事件上并返回jQuery对象。
  • delegate:方法基于一组特定的根元素将处理程序附加到匹配器的所有元素（现有的或将来的）的一个或多个事件上

• 76.你如何优化自己的代码

  • 代码重用
  • 避免全局变量（命名空间，封闭空间，模块化mvc）
  • 拆分函数避免函数过于臃肿
  • 注释代码

• 77.怎么样实现两栏等高

      <div id="container" style="display: table;width: 100%;">
          <div id="left" style="background-color: red;display: table-cell;">
              内容<br/>
              内容<br/>
              内容<br/>
              内容<br/>
              内容<br/>
              内容<br/>
          </div>
  
          <div id="right" style="background-color: blue;display: table-cell">
              内容
          </div>
      </div>

• 78.使用js实现这样的效果：在文本域里输入文字时，当按下enter键时不换行，而是替换成“{{enter}}”,(只需要考虑在行尾按下enter键的情况).
  
function back(ele,event){
event = event || window.event;
if(event.keyCode==13){
event.returnValue = false;
ele.value+="{{enter}}"
return false;
}
}
world’

• 79.specify(‘hello,)//=>’h,e,l,l,o,w,o,r,l,d’实现specify函数

      function specify(str) {
          var tempArray = Array.prototype.filter.call(str, function (value, index, array) {
              return value >= 'A' && value <= 'z' && value != "_";
          });
          return tempArray.join(",");
      }
  
      console.log(specify("hedd____df*(%$#a !!!))))))llo,Wo@@@r        ld"));

• 80.简述readyonly与disabled的区别

  • ReadOnly和Disabled的作用是使用户不能够更改表单域中的内容
  • Readonly只针对input(text/password)和textarea有效，而disabled对于所有的表单元素有效，包括select,radio,checkbox,button等
  • 在表单元素使用了disabled后，我们将表单以POST或者GET的方式提交的话，这个元素的值不会被传递出去，而readonly会将该值传递出去

• 81.为什么扩展 javascript 内置对象不是好的做法

  • 因为你不知道哪一天浏览器或javascript本身就会实现这个方法，而且和你扩展的实现有不一致的表现。到时候你的javascript代码可能已经在无数个页面中执行了数年，而浏览器的实现导致所有使用扩展原型的代码都崩溃了

• 82.什么是三元表达式？“三元”表示什么意思？

  • 三元如名字表示的三元运算符需要三个操作数。语法是 条件 ? 结果1 : 结果2;. 这里你把条件写在问号(?)的前面后面跟着用冒号(:)分隔的结果1和结果2。满足条件时结果1否则结果2

• 83.浏览器标准模式和怪异模式之间的区别是什么？

  • 所谓的标准模式是指，浏览器按W3C标准解析执行代码；怪异模式则是使用浏览器自己的方式解析执行代码，因为不同浏览器解析执行的方式不一样，所以我们称之为怪异模式

• 84.如何判断一个js变量是数组类型

  • ES5：Array.isArray();
  • [] instanceof Array;
  • 调用数组的 slice 方法: Object.prototype.toString.call([]);//[object Array]

• 85.请列举 js 数组类型中常用的方法

  • concat():连接两个或更多的数组，并返回结果
  • join(): 把数组的所有元素放入一个字符串，元素通过指定分隔符进行分隔
  • pop():删除并返回数组的最后一个元素
  • push():向数组的末尾添加一个或更多元素，并返回新的长度
  • reverse():颠倒数组中元素的顺序
  • shift():删除并返回数组的第一个元素
  • slice():从某个已有的数组返回选定的元素
  • sort():对数组的元素进行排序
  • splice():删除元素，并向数组添加新元素
  • toSource():返回该对象的源代码
  • toString():把数组转换为字符串，并返回结果
  • toLocaleString():把数组转换为本地数组，并返回结果
  • valueOf():返回对象的原始值

• 86.下面这段代码想要循环输出结果01234，请问输出结果是否正确，如果不正确，请说明为什么，并修改循环内的代码使其输出正确结果

    for (var i = 0; i < 5; ++i) {
          setTimeout(function () {
              console.log(i);
          }, 100 * i);
      }

  ==会输出5个5，因为定时器解析到最后执行（js事件队列==

    for (var i = 0; i < 5; ++i) {
          setTimeout((function (i) {
              console.log(i);
          })(i), 100 * i);
      }

  ==利用局部作用域可以解决这样的问题==

• 87.变量的命名规范以及命名推荐

  • 变量，函数，方法：小写开头，以后的每个单词首字母大写（驼峰）
  • 构造函数，class：每个单词大写开头
  • 基于实际情况，以动词，名词，谓词来命名。尽量言简意骇，以命名代替注释

• 88.只允许使用 + - * / 和 Math.* ，求一个函数 y = f(x, a, b);当x > 100 时返回 a 的值，否则返回 b 的值，不能使用 if else 等条件语句，也不能使用|,?:,数组。

      // Math的 max 和min 方法 可以差文档，temp 返回的值要么是1 要么是0
     function f(x, a, b) {
          var temp = Math.ceil(Math.min(Math.max(x - 100, 0), 1));
          alert(temp);
          return a * temp + b * (1 - temp);
      }
      console.log(f(105, 101, 2));

• 89.JavaScriptalert(0.4*0.2);结果是多少？和你预期的一样吗？如果不一样该如何处理？

  • 有误差，应该比准确结果偏大。现将小数转换成整数进行处理

• 90.主流浏览器内核

  • IE trident、火狐gecko、谷歌苹果 webkit、Opera-》presto
• 1. 列出3条以上ff和IE的脚本兼容问题
     
     • window.event:表示当前的事件对象，IE有这个对象，FF没有，FF通过给事件处理函数传递事件对象
     • 获取事件源：IE 用 srcElement 获取事件源，而FF 用target获取事件源
     • 添加，去除事件：IE->element.attachEvent(‘onclick’,function),element.detachEvent(‘onclick’,function)
     • FF:element.addEventListener(‘click’,function,true); element.removeEventlistener(‘click’,funciton,true);
  2. 获取标签的自定义属性：IE->div1.value 或 div1[‘value’],FF：div1.getAttribute(‘value’)
• 1. 用正则表达式，写出由字母开头，其余由数字、字母、下划线组成的6~30的字符串？
     
     • ^[a-zA-Z]{1}[\w]{5,29}$

• 93.在Javascript中什么是伪数组？如何将伪数组转化为标准数组？

  • 伪数组（类数组）：无法直接调用数组方法或期望length属性有什么特殊的行为，但仍可以对真正数组遍历方法来遍历它们。典型的是函数的argument参数，还有像调用getElementsByTagName,document.childNodes之类的,它们都返回NodeList对象都属于伪数组。可以使用Array.prototype.slice.call(fakeArray)将数组转化为真正的Array对象

• 94.删除与某个字符相邻且相同的字符,比如”fdaffdaaklfjklja”==>”fdafdaklfjklja”

    var str = "fdafffdaaklfjklja";
      var arr = [];
      for (var i = 0; i < str.length; i++) {
          arr[i] = str[i]; //考虑到字符串的不可操作性,没有也能实现
      };
      for (var i = 0; i < arr.length; i++) {
          if (arr[i] === arr[i + 1]) {
              arr.splice(i, 1);
              i--;
          }
      };
      str = arr.join("");
      console.log(str);

• 95.请写出三种以上的Firefox有但InternetExplorer没有的属性和函数

  • 在IE下可通过document.frames[“id”];得到该IFRAME对象，而在火狐下则是通过document.getElementById(“content_panel_if”).contentWindow;
  • IE的写法： _tbody=_table.childNodes[0],在FF中，firefox会在子节点中包含空白则第一个子节点为空白”“， 而ie不会返回空白 可以通过if(“” != node.nodeName)过滤掉空白子对象
  • 模拟点击事件,if(document.all){ //ie下document.getElementById(“a3”).click();}

• 96.将字符串”{$id}</td><td>{$name}</td></tr>”中的{$id}替换成10，{$name}替换成Tony （使用正则表达式

     '<tr><td>{$id}</td><td>{$id}_{$name}</td></tr>'
      .replace(/{\$id}/g, '10')
      .replace(/{\$name}/g, 'Tony')

• 97.数据类型
  
typeof 1; "number"
typeof "hello"; "string"
typeof /[0-9]/; "object"
typeof {}; "object"
typeof null; "object"
typeof undefined; "undefined"
typeof [1,2,3]; "object"
typeof function(){}; //"function"

• 98.数据类型转换
  
parseInt(3.14); //3
parseFloat("3asdf"); //3
parseInt("1.23abc456");
parseInt(true);//"true" NaN


• 99.Ajax的最大的特点是什么

  • Ajax可以实现异步通信效果，实现页面局部刷新，带来更好的用户体验；按需获取数据，节约带宽资源

• 100.ajax的缺点

  • ajax不支持浏览器back按钮
  • 安全问题 AJAX暴露了与服务器交互的细节
  • 对搜索引擎的支持比较弱
  • 破坏了程序的异常机制

• 101.Javascript中，有一个函数，执行时对象查找时，永远不会去查找原型，这个函数是

  • HasOwnProperty

• 102.对 JSON 的了解

  • 轻量级数据交互格式，可以形成复杂的嵌套格式，解析非常方便

• 103.js 延迟加载的方式有哪些

JS面试题高级

js部分

• 1.请将一个URL的search部分参数与值转换成一个json对象
  
//?categoryid=112&pageid=1
function getQueryStringArge(){
//categoryid=112&pageid=1
var qs = location.search.length > 1?location.search.substr(1):"";
//[categoryid=112,pageid=1]
var items = qs.length > 0?qs.split("&"):[];
var obj={},key,value,item;
for ( var i = 0;i<items.length;i++ ){
item = items[i].split("=");
key = item[0];
value = item[1];
obj[key] = value;
}
return obj;
}


• 2.请用原生js实现jquery的get\post功能，以及跨域情况下

       window.$ = {};
      /*在$下面申明一个ajax*/
      $.ajax = function (options) {
          /*options 参数对象*/
          /*如果没有传参 或者 传了但是不是对象*/
          /* 如果判断之后是一句代码 括号可以省略*/
          if (!options || typeof options != 'object') {
              return false;
          }
          /*options 里面的参数 需要处理*/
          var type = options.type === 'post' ? 'post' : 'get';
          /*location 可以获取地址栏相关信息*/
          var url = options.url || location.pathname;
          var async = options.async === false ? false : true;
          var data = options.data || {}; /*{name:xgg,age:18}*/
          /*转换成 xhr 的数据格式*/
          var dataStr = '';
          for (var key in data) {
              dataStr += key + '=' + data[key] + '&';
          }
          /*name=xgg&age=10&*/
          dataStr = dataStr && dataStr.slice(0, -1);
  
          /*beforeSend*/
          /* options.beforeSend && options.beforeSend();*/
          if (options.beforeSend) {
              var flag = options.beforeSend();
              if (flag === false) {
                  return false;
              }
          }
  
          /*ajax编程*/
          var xhr = new XMLHttpRequest();
          /*1.请求*/
          /*1.1 请求行*/
          xhr.open(type, type == 'get' ? (url + '?' + dataStr) : url, async);
          /*1.2 请求头*/
          if (type == 'post') {
              xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
          }
          /*1.3 请求主体 发送*/
          xhr.send(type == 'get' ? null : dataStr);
  
          /*2.响应*/
          xhr.onreadystatechange = function () {
              /*通讯完成*/
              if (xhr.readyState == 4) {
                  /*1.响应成功*/
                  if (xhr.status == 200) {
                      /*获取数据*/
                      var result = null;
                      /*获取什么数据*/
                      /*怎么判断去获取什么数据*/
                      /*可以根据响应的类型去判断获取什么数据*/
                      var contentType = xhr.getResponseHeader('Content-Type');
                      /*如果返回的类型包含 字符串 xml */
                      if (contentType.indexOf('xml') > -1) {
                          result = xhr.responseXML;
                      }
                      /*如果返回的类型包含 字符串 json */
                      else if (contentType.indexOf('json') > -1) {
                          result = JSON.parse(xhr.responseText);
                      }
                      /*如果返回的类型包含 字符串 text */
                      else {
                          result = xhr.responseText;
                      }
  
                      /*调用用户传的 成功回调函数*/
                      options.success && options.success(result);
                  }
                  /*2.响应失败*/
                  else {
                      /*调用用户传的 失败回调函数*/
                      var msg = {
                          status: xhr.status,
                          statusText: xhr.statusText
                      };
                      options.error && options.error(msg);
                  }
  
                  /*通讯完成回调*/
                  options.complete && options.complete();
              }
          }
      };
      $.get = function (options) {
          options.type = 'get';
          $.ajax(options);
      }
      $.post = function (options) {
          options.type = 'post';
          $.ajax(options);
      }

     //jsonp
     function jsonp(options){
      //1. 拼接查询字符串
      var url = options.url || location.pathname;
      var params = options.data||{};
      var queryString = '';
      for ( key in params ){
           queryString += '&'+key +'='+params[key];
       }
        var callback = 'itcast_'+(Math.random()*Math.random()).toString().substr(2);
       url = url+queryString+'&callback='+callback;
      // 动态创建callback name
      //2.动态创建script标签，添加到页面上
      var scriptElement = document.createElement('script');
      scriptElement.src = url;
      document.body.appendChild(scriptElement);
      //3.回调 数据
      window[callback] = function(data){
          options.success && options.success(data);
          document.body.removeChild(scriptElement);
      }
    }

• 3.简要描述web前端性能需要考虑哪方面，你的优化思路是什么？

  • 资源加载
    
    • CSS顶部，JS底部
    • CSS JS 文件压缩
    • 图片尽量使用精灵兔，字体图标
    • 图片加载可以通过懒加载的方式
    • 尽可能减少资源请求次数
  • 代码性能
    
    • 使用CSS缩写，减少代码量
    • 减少查询层级：如 .header.logo 要好过 .header.top.logo
    • 减少查询范围：如.header>li 要好过.header li
    • 避免 Tag 标签 与 class 或 ID 并存。如：a.top、button #submit
    • 删除重复的CSS
  • html
    
    • 减少DOM节点，加速页面渲染
    • 正确的闭合标签，避免使用
      ,浏览器会多一个将它解析成

      的过程
    • 减少页面重绘。比如给图片加上正确的宽高值，可以减少页面的重绘
  • js
    
    • 尽量少用全局变量
    • 使用事件代码绑定事件，如将事件绑定在body上进行代理
    • 避免频繁操作DOM节点
    • 减少对象查找，如a.b.c.d这种查找方式非常消耗性能，尽可能把它定义在变量里

• 4.写出3个 this 的典型应用

  • 做为对象方法调用

      var point = {
            x: 0,
            y: 0,
            moveTo: function (x, y) {
                this.x = this.x + x;
                this.y = this.y + y;
            }
        };
        point.moveTo(1, 1) //this 绑定到当前对象，即 point 对象

  • 作为构造函数调用

        function Point(x, y){ 
          this.x = x; 
          this.y = y; 
       } 

  • 使用 apply 或 call 调用

       function Point(x, y) {
            this.x = x;
            this.y = y;
            this.moveTo = function (x, y) {
                this.x = x;
                this.y = y;
            }
        }
        var p1 = new Point(0, 0);
        var p2 = {
            x: 0,
            y: 0
        };
        p1.moveTo(1, 1);
        p1.moveTo.apply(p2, [10, 10]);

• 5.请尽可能详尽解释 ajax 的工作原理

  • ajax 的工作原理相当于在用户和服务器之间加了一个中间层，是用户操作与服务器响应异步话。这样把以前的一些服务器负担的工作转嫁到客户端，利于客户端闲置的处理能力来处理，减轻服务器和带宽的负担，从而达到节约 ISP 的空间及带宽租用成本的目的
  • 简单来说通过 XMLHttpRequest 对象来向服务器发异步请求，从服务器获取数据，然后用 javascript 来操作 DOM 而更新页面。这其中最关键的一步就是从服务器获取请求数据。

• 6.业界常用的优化WEB页面加载速度的方式(可以分别从页面元素展现,请求连接,css,js,服务器等方面介绍)

  • 优化图像：这个绝对是显而易见的,可以看到图片占据的页面内容分量最重.在现代网页设计中,图片绝对占据了大部分的内容.你需要针对你的页面重新定义图片大小.这能够有效地帮助你减少页面大小
  • 减少 DNS 查询(DNS lookup)：减少DNS查询是一个WEB开发人员可以用了页面加载时间快速有效的方法.DNS查询需要花费很长的时间来返回一个主机名的IP地址.而浏览器在查询结束前不会进行任何操作.对于不同的元素可以使用不同的主机名,如URL、图像、脚本文件、样式文件、FLASH元素等.具有多种网络元素的页面经常需要进行多个DNS查询,因而花费的时间更长.减少不同域名的数量将减少并行下载的数量,加速你的网站
  • 减少HTTP请求：还有一种简单的优化网页速度的方法是,减少HTTP请求.当一个网站一下子收到太多的HTTP请求,它的访客就会有响应时间延迟的体验,这不仅增加了CPU使用率也增加了页面的加载时间.那么,又该如何减少HTTP请求?减少网站上的对象数量;最小化网站上的重定向数量;使用CSS Sprites技术(只要你需要的那部分图片内容)
  • 使用内容分发网路(content Delivery Network CDN)：服务器处理大流量是很困难的,这最终会导致页面加载速度变慢.而使用CDN就可以解决这一问题,提升页面加载速度.CDN是位于全球不同地方的高性能网络服务,复制你网络的静态资源,并以最有效的方式来为访客服务.
  • 把CSS文件放在页面顶部,而JS文件放在底部:把CSS文件在页面底部引入可以禁止逐步渲染,节省浏览器加载和重绘页面元素的资源.JavaScript是用于功能和验证.把JS文件放在页面底部可以避免代码执行前的等待时间,从而提升页面加载速度.这些都是一些减少页面加载时间和提高转换率的方法.在某些情况下,需要JavaScript在页面的顶部加载(如某些第三方跟踪脚本).
  • 压缩 CSS 和 javascript：压缩是通过移除不必要的字符(如TAB、空格、回车、代码注释等),以帮助减少其大小和网页的后续加载时间的过程.这是非常重要的,但是,你还需要保存JS和CSS的原文件,以便更新和修改代码.
  • 利用浏览器缓存：浏览器缓存是允许访客的浏览器缓存你网站页面副本的一个功能.这有助于访客再次访问时,直接从缓存中读取内容而不必重新加载.这节省了向服务器发送HTTP请求的时间.此外,通过优化您的网站的缓存系统往往也会降低您的网站的带宽和托管费用.
  • 启用 GZIP 压缩：在服务器上压缩网站的页面是提升网站访问速度非常有效的一种方法.你可以用gzip压缩做到这一点.Gzip是一个减小发送给访客的HTML文件、JS和CSS体积的工具.压缩的文件减少了HTTP响应时间.据Yahoo报道,这大概可以减少70%的下载时间.而目前90%的通过浏览器的流量都支持Gzip压缩,因此,这是一个提示网站性能有效的选项.

• 7.列举常用的 web 页面开发，调试以及优化工具

  • 常用的 IDE(基础开发环境，integrated development environment):sublime,webstorm,vscode,hbuilder
  • 常用的调试工具：firebug(ff)，web developer(ie),iEtester（ie浏览器兼容性）,浏览器自带控制台
  • 常用的优化工具：Google提供了PageSpeed工具,这是一个浏览器插件,可以很好地应用上文中Google所提到的Web优化实践——帮助你轻松对网站的性能瓶颈进行分析,并为你提供优化建议.
    YSlow是雅虎推出的一款浏览器插件,可以帮助你对网站的页面进行分析,并为你提供一些优化建议,以提高网站的性能.

• 8.解释什么是sql注入，xss漏洞

  • 结构化查询语言(Structured Query Language)简称SQL,是一种特殊目的的编程语言,是一种数据库查询和程序设计语言,用于存取数据以及查询、更新和管理关系数据库系统;同时也是数据库脚本文件的扩展名.
    所谓SQL注入,就是通过把SQL命令插入到Web表单提交或输入域名或页面请求的查询字符串,最终达到欺骗服务器执行恶意的SQL命令.具体来说,它是利用现有应用程序,将(恶意)的SQL命令注入到后台数据库引擎执行的能力,它可以通过在Web表单中输入(恶意)SQL语句得到一个存在安全漏洞的网站上的数据库,而不是按照设计者意图去执行SQL语句.
    XSS攻击:跨站脚本攻击(Cross Site Scripting),为不和层叠样式表(Cascading Style Sheets, CSS)的缩写混淆,故将跨站脚本攻击缩写为XSS.XSS是一种经常出现在web应用中的计算机安全漏洞,它允许恶意web用户将代码植入到提供给其它用户使用的页面中.比如这些代码包括HTML代码和客户端脚本.攻击者利用XSS漏洞旁路掉访问控制——例如同源策略(same origin policy).这种类型的漏洞由于被黑客用来编写危害性更大的网络钓鱼(Phishing)攻击而变得广为人知.对于跨站脚本攻击,黑客界共识是:跨站脚本攻击是新型的”缓冲区溢出攻击”,而JavaScript是新型的”ShellCode”.

• 9.js 中如何实现一个 map

     let arr = [1,2,3,4,5];
     Array.prototype.myMap = function(fn){
      var newArr = [];
       for ( var i = 0; i<this.length;i++ ){
             newArr.push( fn(this[i],i,this));
       }
       return newArr;
      }
      var newArr = arr.myMap(function(x){
           return x * 2;
       });

• 10.js可否实现面向对象编程，如果可以如何实现js对象的继承

• 11.如何获取对象a拥有的所有属性（可枚举的、不可枚举的，不包括继承来的属性）

• 12.同步和异步的区别

  • 同步：阻塞的
    张三叫李四去吃饭，李四一直忙得不停，张三一直等着，直到李四忙完两个人一块去吃饭
    =浏览器向服务器请求数据，服务器比较忙，浏览器一直等着（页面白屏），直到服务器返回数 据，浏览器才能显示页面
    异步：非阻塞的
    -张三叫李四去吃饭，李四在忙，张三说了一声然后自己就去吃饭了，李四忙完后自己去吃
    =浏览器向服务器请求数据，服务器比较忙，浏览器可以自如的干原来的事情（显示页面），服务器返回数据的时候通知浏览器一声，浏览器把返回的数据再渲染到页面，局部更新

• 13.如何解决跨域问题

  • 理解跨域的概念：协议、域名、端口都相同才同域，否则都是跨域
    出于安全考虑，服务器不允许ajax跨域获取数据，但是可以跨域获取文件内容，所以基于这一点，可以动态创建script标签，使用标签的src属性访问js文件的形式获取js脚本，并且这个js脚本中的内容是函数调用，该函数调用的参数是服务器返回的数据，为了获取这里的参数数据，需要事先在页面中定义回调函数，在回调函数中处理服务器返回的数据，这就是解决跨域问题的主流解决方案

• 14.页面编码和被请求的资源编码如果不一致如何处理

  • 对于ajax请求传递的参数，如果是get请求方式，参数如果传递中文，在有些浏览器会乱码，不同的浏览器对参数编码的处理方式不同，所以对于get请求的参数需要使用 encodeURIComponent函数对参数进行编码处理，后台开发语言都有相应的解码api。对于post请求不需要进行编码

• 15.简述ajax 的过程

  • 创建XMLHttpRequest对象,也就是创建一个异步调用对象
  • 创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息
  • 设置响应HTTP请求状态变化的函数
  • 发送HTTP请求
  • 获取异步调用返回的数据
  • 使用JavaScript和DOM实现局部刷新

• 16.阐述一下异步加载

  • 异步加载的方案： 动态插入 script 标签
  • 通过 ajax 去获取 js 代码，然后通过 eval 执行
  • script 标签上添加 defer 或者 async 属性
  • 创建并插入 iframe，让它异步执行 js

• 17.请解释一下 JavaScript 的同源策略

  • 同源策略是客户端脚本（尤其是Javascript）的重要的安全度量标准。它最早出自Netscape Navigator2.0，其目的是防止某个文档或脚本从多个不同源装载。所谓同源指的是：协议，域名，端口相同，同源策略是一种安全协议，指一段脚本只能读取来自同一来源的窗口和文档的属性

• 18.GET和POST的区别，何时使用POST

  • GET：一般用于信息获取，使用URL传递参数，对所发送信息的数量也有限制，一般在2000个字符，有的浏览器是8000个字符
  • POST：一般用于修改服务器上的资源，对所发送的信息没有限制
  • 无法使用缓存文件（更新服务器上的文件或数据库）
  • 向服务器发送大量数据（POST 没有数据量限制）
  • 发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

• 19.什么是Ajax和JSON，它们的优缺点

  • Ajax 是全称是asynchronous JavaScript andXML，即异步JavaScript和xml，用于在Web页面中实现异步数据交互，实现页面局部刷新
  • 优点：可以使得页面不重载全部内容的情况下加载局部内容，降低数据传输量，避免用户不断刷新或者跳转页面，提高用户体验
  • 缺点：对搜索引擎不友好；要实现ajax下的前后退功能成本较大；可能造成请求数的增加跨域问题限制
  • JSON是一种轻量级的数据交换格式，ECMA的一个子集
  • 优点：轻量级、易于人的阅读和编写，便于机器（JavaScript）解析，支持复合数据类型（数组、对象、字符串、数字）

• 20.一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么

  • 当发送一个 URL 请求时，不管这个 URL 是 Web 页面的 URL 还是 Web 页面上每个资源的 URL，浏览器都会开启一个线程来处理这个请求，同时在远程 DNS 服务器上启动一个 DNS 查询。这能使浏览器获得请求对应的 IP 地址
  • 浏览器与远程 Web 服务器通过 TCP 三次握手协商来建立一个 TCP/IP 连接。该握手包括一个同步报文，一个同步-应答报文和一个应答报文，这三个报文在 浏览器和服务器之间传递。该握手首先由客户端尝试建立起通信，而后服务器应答并接受客户端的请求，最后由客户端发出该请求已经被接受的报文
  • 一旦 TCP/IP 连接建立，浏览器会通过该连接向远程服务器发送 HTTP 的 GET 请求。远程服务器找到资源并使用 HTTP 响应返回该资源，值为 200 的 HTTP 响应状态表示一个正确的响应
  • 此时，Web 服务器提供资源服务，客户端开始下载资源

• 21.JQuery一个对象可以同时绑定多个事件，这是如何实现的

  • jQuery可以给一个对象同时绑定多个事件，低层实现方式是使用addEventListner或attachEvent兼容不同的浏览器实现事件的绑定，这样可以给同一个对象注册多个事件

• 22.实现一个函数clone，可以对JavaScript中的5种主要的数据类型（包括Number、String、Object、Array、Boolean）进行值复制

  • 考察点1：对于基本数据类型和引用数据类型在内存中存放的是值还是指针这一区别是否清楚
  • 考察点2：是否知道如何判断一个变量是什么类型的
  • 递归算法的设计
    

        // 方法一：
        Object.prototype.clone = function(){
        var o = this.constructor === Array ? [] : {};
        for(var e in this){
            o[e] = typeof this[e] === "object" ? this[e].clone() : this[e];
        }
        return o;
        }
        //方法二：
            /**
            * 克隆一个对象
            * @param Obj
            * @returns
            */
            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;   
                }   
            }
    

• 23.请评价以下代码并给出改进意见
  
if (window.addEventListener) {
var addListener = function (el, type, listener, useCapture) {
el.addEventListener(type, listener, useCapture);
};
} else if (document.all) {
addListener = function (el, type, listener) {
el.attachEvent("on" + type, function () {
listener.apply(el);
});
}
}

  
  • 不应该在if和else语句中声明addListener函数，应该先声明
  • 不需要使用window.addEventListener或document.all来进行检测浏览器，应该使用能力检测
  • 由于attachEvent在IE中有this指向问题，所以调用它时需要处理一下
    ==改进代码==
    
function addEvent(elem, type, handler) {　　
if (elem.addEventListener) {　　　　
elem.addEventListener(type, handler, false);　　
} else if (elem.attachEvent) {　　　　
elem['temp' + type + handler] = handler;　　　　
elem[type + handler] = function () {　　　　
elem['temp' + type + handler].apply(elem);　　
};　　
elem.attachEvent('on' + type, elem[type + handler]);　
} else {　　
elem['on' + type] = handler;　　
}
}


• 24.用原生JS实现jquery的ready方法

   function ready(fn) {
          if (document.addEventListener) { //标准浏览器
              document.addEventListener('DOMContentLoaded', function () {
                  //注销事件, 避免反复触发
                  document.removeEventListener('DOMContentLoaded', arguments.callee, false);
                  fn(); //执行函数
              }, false);
          } else if (document.attachEvent) { //IE
              document.attachEvent('onreadystatechange', function () {
                  if (document.readyState == 'complete') {
                      document.detachEvent('onreadystatechange', arguments.callee);
                      fn(); //函数执行
                  }
              });
          };
      };
  }
  

• 25.（设计题）想实现一个对页面某个节点的拖曳？如何做？（使用原生JS

  • 给需要拖拽的节点绑定mousedown, mousemove, mouseup事件
  • mousedown事件触发后，开始拖拽
  • mousemove时，需要通过event.clientX和clientY获取拖拽位置，并实时更新位置
  • mouseup时，拖拽结束
  • 需要注意浏览器边界的情况

• 26.Javascript作用链域

  • 理解变量和函数的访问范围和生命周期，全局作用域与局部作用域的区别，JavaScript中没有块作用域，函数的嵌套形成不同层次的作用域，嵌套的层次形成链式形式，通过作用域链查找属性的规则需要深入理解

• 27.谈谈This对象的理解

  • 理解不同形式的函数调用方式下的this指向，理解事件函数、定时函数中的this指向，函数的调用形式决定了this的指向
  • 全局 this 指向的是 window
  • 函数中的 this 指向的是函数所在的对象
  • 对象中的 this 指向其本身

• 28.eval是做什么的

  • 将字符串解析成 JS 代码并运行，应该避免使用 eval，不安全，非常消耗性能

• 29.关于事件，IE与火狐的事件机制有什么区别？ 如何阻止冒泡

  • 在IE中,事件对象是作为一个全局变量来保存和维护的.所有的浏览器事件,不管是用户触发的，还是其他事件,都会更新window.event对象.所以在代码中，只要调用window.event就可以获取事件对象， 再event.srcElement就可以取得触发事件的元素进行进一步处理.
    [2].在FireFox中，事件对象却不是全局对象，一般情况下，是现场发生，现场使用，FireFox把事件对象自动传给事件处理程序.
    关于事件的兼容性处理要熟练掌握，事件对象具体哪些属性存在兼容性问题，IE与标准事件模型事件冒泡与事件捕获的支持要理解

• 30.new操作符具体干了什么呢

  • 创建一个空对象，并且 this 变量引用该对象，同时还继承了该函数的原型
  • 属性和方法被加入到 this 引用的对象中
  • 新创建的对象由 this 所引用，并且最后隐式的返回 this

• 31.模块化开发怎么做

  • 浏览器端requirejs，seajs；服务器端nodejs；ES6模块化；fis、webpack等前端整体模块化解决方案；grunt、gulp等前端工作流的使用

• 32.ECMAScript6 怎么写class么，为什么会出现class这种东西

      class Point {
          constructor(x, y) {
              this.x = x;
              this.y = y;
      }
      toString() {
          return '(' + this.x + ', ' + this.y + ')';
          }
      }

• 33.JavaScript中的作用域与变量声明提升

  • 理解JavaScript的预解析机制，js的运行主要分两个阶段：js的预解析和运行，预解析阶段所有的变量声明和函数定义都会提前，但是变量的赋值不会提前

• 34.javascript对象的几种创建方式

  • 工厂模式
  • 构造函数模式
  • 原型模式
  • 混合构造函数和原型模式
  • 寄生构造函数模式
  • 动态原型原型
  • 稳妥构造函数模式

• 35.javascript 继承的6种方法

  • 原型链继承
  • 借用构造函数继承
  • 组合继承（原型+借用构造）
  • 原型式继承
  • 寄生式继承
  • 寄生组合式继承

• 36.简述一下Sass、Less，且说明区别

  • 他们是动态的样式语言，是CSS预处理期，CSS上的一种抽象层，他们是一种特殊的语法/语言而编译成CSS
  • 变量符不一样，less是@，而sass是$
  • Sass 支持条件语句，可以使用if{} else{},for{}循环等等。而less不支持
  • Sass 是基于 Ruby的，是在服务器端处理的，而less 需要引入less.js来处理less 代码输出css到浏览器

• 37.验证邮箱的正则表达式

    /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/

• 38.谈谈浏览器的内核，并且说一下什么事内核

  • Trident ([‘traɪd(ə)nt])–IE，Gecko ([‘gekəʊ])–Firefox, Presto ([‘prestəʊ])–opera,webkit—谷歌和Safari
  • 浏览器内核又可以分成两部分：渲染引擎和 JS 引擎。它负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入 CSS 等），以及计算网页的显示方式，然后会输出至显示器或打印机。JS 引擎则是解析 Javascript 语言，执行 javascript 语言来实现网页的动态效果。

• 39.javascript 原型、原型链？有什么特点?

  • 原型对象也是普通的对象，是对象一个自带隐式的proto属性，原型也有可能自己的原型，如果一个原型对象的原型不为 null 的话，我们就称之为原型链。
  • 原型链是由一些用来继承和共享属性的对象组成的（有限的）对象链
  • javascript 的数据属性值：writable、configurable、enumerable、value
  • 当我们需要一个属性的时，javascript 引擎会先看当前对象是否有这个属性值，如果没有的话，就会查找他的 prototype 对象是否有这个属性

• 40.写一个通用的事件侦听器函数

      // event(事件)工具集，来源：https://github.com/markyun
      markyun.Event = {
          // 页面加载完成后
          readyEvent: function (fn) {
              if (fn == null) {
                  fn = document;
              }
              var oldonload = window.onload;
              if (typeof window.onload != 'function') {
                  window.onload = fn;
              } else {
                  window.onload = function () {
                      oldonload();
                      fn();
                  };
              }
          },
          // 视能力分别使用dom0||dom2||IE方式 来绑定事件
          // 参数： 操作的元素,事件名称 ,事件处理程序
          addEvent: function (element, type, handler) {
              if (element.addEventListener) {
                  //事件类型、需要执行的函数、是否捕捉
                  element.addEventListener(type, handler, false);
              } else if (element.attachEvent) {
                  element.attachEvent('on' + type, function () {
                      handler.call(element);
                  });
              } else {
                  element['on' + type] = handler;
              }
          },
          // 移除事件
          removeEvent: function (element, type, handler) {
              if (element.removeEnentListener) {
                  element.removeEnentListener(type, handler, false);
              } else if (element.datachEvent) {
                  element.detachEvent('on' + type, handler);
              } else {
                  element['on' + type] = null;
              }
          },
          // 阻止事件 (主要是事件冒泡，因为IE不支持事件捕获)
          stopPropagation: function (ev) {
              if (ev.stopPropagation) {
                  ev.stopPropagation();
              } else {
                  ev.cancelBubble = true;
              }
          },
          // 取消事件的默认行为
          preventDefault: function (event) {
              if (event.preventDefault) {
                  event.preventDefault();
              } else {
                  event.returnValue = false;
              }
          },
          // 获取事件目标
          getTarget: function (event) {
              return event.target || event.srcElement;
          },
          // 获取event对象的引用，取到事件的所有信息，确保随时能使用event；
          getEvent: function (e) {
              var ev = e || window.event;
              if (!ev) {
                  var c = this.getEvent.caller;
                  while (c) {
                      ev = c.arguments[0];
                      if (ev && Event == ev.constructor) {
                          break;
                      }
                      c = c.caller;
                  }
              }
              return ev;
          }
      };

• 41.如何判断一个对象是否属于某个类

    //使用instanceof （待完善）
    if(a instanceof Person){
      alert('yes');
    }

• 42.模块化怎么做

  • 立即执行函数，不暴露私有成员
    

        var module1 = (function(){
    　　　　var _count = 0;
    　　　　var m1 = function(){
    　　　　　　//...
    　　　　};
    　　　　var m2 = function(){
    　　　　　　//...
    　　　　};
    　　　　return {
        　　　　　　m1 : m1,
        　　　　　　m2 : m2
    　　　　};
    　　 })(); 

• 43.php inset和empty的区别，举例说明

  • empty函数
    
    • 用途：检测变量是否为空
    • 判断：如果 var 是非空或非零的值，则 empty() 返回 FALSE。换句话说，”“、0、”0”、NULL、FALSE、array()、var $var; 以及没有任何属性的对象都将被认为是空的，如果 var 为空，则返回 TRUE。注意：empty() 只检测变量，检测任何非变量的东西都将导致解析错误。换句话说，后边的语句将不会起作用
  • isset函数
    
    • 用途：检测变量是否设置
    • 判断：检测变量是否设置，并且不是 NULL。如果已经使用 unset() 释放了一个变量之后，它将不再是 isset()。若使用 isset() 测试一个被设置成 NULL 的变量，将返回 FALSE。同时要注意的是一个NULL 字节（”\0”）并不等同于 PHP 的 NULL 常数

• 44.javascript 怎么实现事件捕获

• 45.js实现深拷贝

      // 当第二次调用的时候， source 是 obj1.subObj
      // target obj.subObj
      // obj.subObj.arr = []
      function deepExtend(source, target) {
        for (var key in source) {
          if (Object.prototype.toString.apply(source[key]) === '[object Object]') {
            // target.subObj = {}
            target[key] = {}
            deepExtend(source[key], target[key])
              // for (var k in source[key]) {
              //   target[key][k] = source[key][k]
              // }
          } else if (Object.prototype.toString.apply(source[key]) === '[object Array]') {
            target[key] = []
            deepExtend(source[key], target[key])
              // for (var i = 0; i < source[key].length; i++) {
              //   target[key].push(source[key][i])
              // }
          } else {
            console.log(++count)
            target[key] = source[key]
          }
        }
      }
      deepExtend(obj1, obj)

• 46.说说你对 WebSocket 的了解

  • webSocket 协议是基于 TCP 的一种新的网络协议。它实现了浏览器与服务器双工(full-duplex)通信，允许服务器主动发送信息给客户端。
  • 传统 web(http) 服务都是请求->响应模型，即客户端（浏览器）请求服务器端（webserver）,服务器收到请求后才能做出响应，客户端才能接收数据，可以理解为’拉’,
    webSocket提供浏览器和服务器之间的长链接，可以实现服务器端直接通知客户端，即’推’，
    你登录给张三发信息，过程应该是这样，你登录有请求发送到服务器，服务器利用websocket’推’ 到客户端。当然不用 websocket 也看模拟 ‘推’,即客户端浏览器写个 timer 定时器去服务器端 ‘取数据’,但这样的效率肯定不好实时性也不高，websocket解决此问题。

框架部分

• 1.前端templating(Mustache, underscore, handlebars)是干嘛的, 怎么用

  • Web 模板引擎是为了使用户界面与业务数据（内容）分离而产生的
  • Mustache 是一个 logic-less （轻逻辑）模板解析引擎，它的优势在于可以应用在 Javascript、PHP、Python、Perl 等多种编程语言中
  • Underscore封装了常用的JavaScript对象操作方法，用于提高开发效率
  • Handlebars 是 JavaScript 一个语义模板库，通过对view和data的分离来快速构建Web模板

• 2.简述一下 Handlebars 的基本用法

• 3.AMD(Modules/Asynchronous-Definition)、CMD(Common Module Definition)规范区别

  • sea.js(AMD)、require.js(CMD/common.js)，这些代表需要着重去了解

• 4.requireJS 的核心原理是是什么？

  • 核心是js 的加载模块，通过正则匹配模块以及模块的依赖关系，保证文件加载的先后顺序，根据文件的路径对加载过的文件做了缓存。

• 5.让你自己设计实现一个requireJS，你会怎么做

  • 核心是实现 js 的加载模块，维护js的依赖关系，控制好文件加载先后顺序

• 6.谈一谈你对ECMAScript6的了解

  • ES6新的语法糖，类，模块化等新特性

• 7.require.js 特性

  • 实现js文件的异步加载，避免网页失去响应
  • 管理模块之间的依赖性，便于代码的编写和维护

• 8.jquery 与 jqueryUI 有啥区别

  • jquery 是一个 js 库，主要提供的功能是选择器，属性修改和事件绑定等等。
  • jquery UI 则是在jquery的基础上，利用jquery的扩展性，设计的插件。提供了一些常用的界面元素，诸如对话框，拖动行为、改变大小行为等等

• 9.jQuery.fn的init方法返回的this指的是什么对象？为什么要返回this

  • this执行init构造函数自身，其实就是jQuery实例对象，返回this是为了实现jQuery的链式操作

• 10.jquery.extend 与 jquery.fn.extend的区别

  • Jquery.extend用来扩展jQuery对象本身；jquery.fn.extend用来扩展jQuery实例

• 11.对 jQuery 的优化方法

  • 优先使用 ID 选择器
  • 在 class 前使用 tag （标签名）
  • 给选择器一个上下文
  • 尽量不要使用 .live()方法
  • 使用 data() 方法存储临时变量

• 12.Zepto的点透问题如何解决

  • 点透主要是由于两个div重合，例如：一个div调用show()，一个div调用hide()；这个时候当点击上面的div的时候就会影响到下面的那个div
  • github上有一个叫做fastclick的库，它也能规避移动设备上click事件的延迟响应，https://github.com/ftlabs/fastclick
    将它用script标签引入页面（该库支持AMD，于是你也可以按照AMD规范，用诸如require.js的模块加载器引入），并且在dom ready时初始化在body上
  • 根据分析，如果不引入其它类库，也不想自己按照上述fastclcik的思路再开发一套东西，需要1.一个优先于下面的“divClickUnder”捕获的事件；2.并且通过这个事件阻止掉默认行为（下面的“divClickUnder”对click事件的捕获，在ios的safari，click的捕获被认为和滚屏、点击输入框弹起键盘等一样，是一种浏览器默认行为，即可以被event.preventDefault()阻止的行为）

• 13.Underscore 对哪些 JS 原生对象进行了扩展以及提供了哪些好用的函数方法

  • 对 underscore 的熟悉度

• 14.angular、vue、react 的熟悉度

• 15.常使用的库有哪些？常用的前端开发工具？开发过什么应用或组件

  • 使用率较高的框架有jQuery、YUI、Prototype、Dojo、Ext.js、Mootools等。尤其是jQuery，超过91%
  • 轻量级框架有Modernizr、underscore.js、backbone.js、Raphael.js等。（理解这些框架的功能、性能、设计原理）
  • 前端开发工具：Sublime Text 、Eclipse、Notepad、Firebug、HttpWatch、Yslow。
  • 开发过的插件：城市选择插件，汽车型号选择插件、幻灯片插件。弹出层。（写过开源程序，加载器，js引擎更好）

• 16.对 BFC 规范的理解

  • formatting Context:指页面中的一个渲染区域，并且拥有一套渲染规则，他决定其子元素如何定位，以及与其他元素的相互关系和作用

• 17.WEB应用从服务器主动推送Data到客户端有那些方式

  • html5 websoket
  • webSocket 通过 Flash
  • XHR长时间连接
  • XHR Multipart Streaming
  • 不可见的Iframe

移动端部分

浏览器部分（HTTP）

• 1.HTTP协议中，GET和POST有什么区别？分别适用什么场景？

  • get 传输的数据长度有限制，post 的没有
  • get 通过url 传递，在浏览器地址栏可见，post是在报文中传递
  • post 一般用于表单提交
  • get 一般用于简单的数据查询，严格要求不是那么高的场景

• 2.HTTP 状态消息 200 302 304 403 404 500 分表表示什么?

  • 200：请求已成功,请求所希望的响应头或数据体将随此响应返回
  • 302：请求的资源临时从不同的URL响应请求.由于这样的重定向是临时的,客户端应当继续向原有地址发送以后的请求,只有在Cache-Control或Expires中进行了指定的情况下,这个响应才是可缓存的.
  • 304:如果客户端发送了一个带条件的GET请求且该请求已被允许,而文档的内容(自上次一来或者根据请求的条件)并没有改变,则服务器应当返回这个状态码.304响应禁止包含消息体,因此始终以消息头后的第一个空行结尾.
  • 403:服务器已经理解请求,但是拒绝执行它.
  • 404:请求失败,请求所希望得到的资源未被在在服务器上发现.
  • 500:服务器遇到了一个未曾预料的状况,导致了它无法完成对请求的处理.一般来说,这个问题都会在服务器端的源代码出现错误时出现.

• 3.HTTP协议中，header信息里面，怎么控制页面失效时间（last-modified,cache-control,Expires分别代表什么）

  • HTTP(HyperTextTransferProtocol)即超文本传输协议,目前网页传输的的通用协议.HTTP协议采用了请求/响应模型,浏览器或其他客户端发出请求,服务器给与响应.就整个网络资源传输而言,包括message-header和message-body两部分.首先传递message-header,即httpheader消息.http header 消息通常被分为4个部分:general header, request header, response header, entity header.但是这种分法就理解而言,感觉界限不太明确.根据维基百科对http header内容的组织形式,大体分为Request和Response两部分.
    last-modified处在Response中,代表请求资源的最后修改时间.客户可以通过If-Modified-Since请求头提供一个日期,该请求将被视为一个条件GET,只有改动时间迟于指定时间的文档才会返回,否则返回一个304(Not Modified)状态.Last-Modified也可用setDateHeader方法来设置.
    Expires处在Response中,代表响应过期的日期和时间.
    cache-control指定请求和响应遵循的缓存机制请求时的缓存指令包括no-cache、no-store、max-age、 max-stale、min-fresh、only-if-cached,响应消息中的指令包括public、private、no-cache、no- store、no-transform、must-revalidate、proxy-revalidate、max-age.各个消息中的指令含义如下:Public指示响应可被任何缓存区缓存.Private指示对于单个用户的整个或部分响应消息,不能被共享缓存处理.这允许服务器仅仅描述当用户的部分响应消息,此响应消息对于其他用户的请求无效.no-cache指示请求或响应消息不能缓存.no-store用于防止重要的信息被无意的发布.在请求消息中发送将使得请求和响应消息都不使用缓存.max-age指示客户机可以接收生存期不大于指定时间(以秒为单位)的响应.min-fresh指示客户机可以接收响应时间小于当前时间加上指定时间的响应.max-stale指示客户机可以接收超出超时期间的响应消息.如果指定max-stale消息的值,那么客户机可以接收超出超时期指定值之内的响应消息.

• 4.HTTP协议目前常用的有哪几个?KEEPALIVE从哪个版本开始出现的?

  • 超文本传输协议已经演化出了很多版本,它们中的大部分都是向下兼容的.在RFC 2145中描述了HTTP版本号的用法.客户端在请求的开始告诉服务器它采用的协议版本号,而后者则在响应中采用相同或者更早的协议版本.
    0.9已过时.只接受 GET 一种请求方法,没有在通讯中指定版本号,且不支持请求头.由于该版本不支持 POST 方法,所以客户端无法向服务器传递太多信息.
    HTTP/1.0这是第一个在通讯中指定版本号的HTTP 协议版本,至今仍被广泛采用,特别是在代理服务器中.
    HTTP/1.1当前版本.持久连接被默认采用,并能很好地配合代理服务器工作.还支持以管道方式同时发送多个请求,以便降低线路负载,提高传输速度.
    HTTP/1.1相较于 HTTP/1.0 协议的区别主要体现在:1 缓存处理,2 带宽优化及网络连接的使用,3 错误通知的管理,4 消息在网络中的发送,5 互联网地址的维护,6 安全性及完整性
    keep-Alive功能使客户端到服务器端的连接持续有效,当出现对服务器的后继请求时,Keep-Alive功能避免了建立或者重新建立连接.市场上的大部分Web服务器,包括iPlanet、IIS和Apache,都支持HTTP Keep-Alive.对于提供静态内容的网站来说,这个功能通常很有用.但是,对于负担较重的网站来说,这里存在另外一个问题:虽然为客户保留打开的连接有一定的好处,但它同样影响了性能,因为在处理暂停期间,本来可以释放的资源仍旧被占用.当Web服务器和应用服务器在同一台机器上运行时,Keep- Alive功能对资源利用的影响尤其突出.此功能为HTTP 1.1预设的功能,HTTP 1.0加上Keep-Alive header也可以提供HTTP的持续作用功能.

• 5.http和https

  • HTTPS（Hypertext Transfer Protocol over Secure Socket Layer），是以安全为目标的HTTP通道，简单来讲是HTTP的安全版 ，即 HTTP 下加入SSL层，HTTPS 的安全基础是SSL,因此加密的详细内容就需要SSL（详细内容可以百度）
  • ==区别==:https 协议需要到 ca 申请证书，一般免费证书很少，需要交费。http是超文本传输协议，信息是明文传输，https 则是具有安全性 ssl 加密传输协议 http 和 https 使用的是完全不同的连接方式用的端口也不一样，前者是80，后者是443。http的连接很简单,是无状态安全HTTPS协议，是由SSL+HTTP 协议构建的可进行加密传输、身份认证的网络协议，要比HTTP协议安全。http和https

服务器（node）部分

• 1.对Node的优点和缺点提出了自己的看法

  • （优点）因为Node是基于事件驱动和无阻塞的，所以非常适合处理并发请求，
    因此构建在Node上的代理服务器相比其他技术实现（如Ruby）的服务器表现要好得多。
    此外，与Node代理服务器交互的客户端代码是由javascript语言编写的，
    因此客户端和服务器端都用同一种语言编写，这是非常美妙的事情
  • （缺点）Node是一个相对新的开源项目，所以不太稳定，它总是一直在变，
    而且缺少足够多的第三方库支持。看起来，就像是Ruby/Rails当年的样子。

• 2.Node.js的适用场景

  • 实时应用：如在线聊天，实时通知推送等等（如socket.io）
  • 分布式应用：通过高效的并行I/O使用已有的数据
  • 工具类应用：海量的工具，小到前端压缩部署（如grunt），大到桌面图形界面应用程序
  • 游戏类应用：游戏领域对实时和并发有很高的要求（如网易的pomelo框架）
  • 利用稳定接口提升Web渲染能力
  • 前后端编程语言环境统一：前端开发人员可以非常快速地切入到服务器端的开发（如著名的纯Javascript全栈式MEAN架构）

• 3.对Node的优点和缺点提出了自己的看法

  • 优点
    
    • 因为Node是基于事件驱动和无阻塞的，所以非常适合处理并发请求，因此构建在Node上的代理服务器相比其他技术实现（如Ruby）的服务器表现要好得多
    • 与Node代理服务器交互的客户端代码是由javascript语言编写的，因此客户端和服务器端都用同一种语言编写，这是非常美妙的事情
  • 缺点
    
    • Node是一个相对新的开源项目，所以不太稳定，它总是一直在变
    • 缺少足够多的第三方库支持。看起来，就像是Ruby/Rails当年的样子（第三方库现在已经很丰富了，所以这个缺点可以说不存在了）

js算法部分

• js快速排序算法

• 写一个multiply 方法支持一下两种调用方式打印出两个数字乘积: multiply(2,3);multiply(2)(3);

      function multiply(x,y){
          var  x = x;
          if(arguments.length == 2){
              return x * y;
          }else{
              return function(y){
                  return x * y;
              }
          }       
      }
      console.log( multiply(2)(10));