Web前端面试题-1

Web前端面试题

Web前端面试题 1

HTML/CSS部分 4

1、什么是盒子模型？有几种？ 4

2、行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？ 4

3、CSS实现垂直水平居中 4

4、简述一下src与href的区别 5

5、什么是CSS Hack? 5

6、简述同步和异步的区别 6

7、px和em的区别 6

8、 什么叫优雅降级和渐进加强？ 6

9、浏览器的内核分别是什么? 7

10、XHTML和HTML有什么区别 7

12、前端页面有哪三层构成，分别是什么?做用是什么? 8

13、你作的页面在哪些流览器测试过?这些浏览器的内核分别是什么? 8

14、什么是语义化的HTML? 8

15、HTML5 为何只须要写 !DOCTYPE HTML？ 8

16、Doctype做用？标准模式与兼容模式各有什么区别? 9

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

18、请描述一下 cookies，sessionStorage 和 localStorage 的区别？ 10

19、如何实现浏览器内多个标签页之间的通讯? 10

20、CSS隐藏元素的几种方法（至少说出三种） 10

21、CSS清除浮动的几种方法（至少两种） 10

22、CSS居中（包括水平居中和垂直居中）实现方式有那些？ 11

23、写出几种IE6 BUG的解决方法 12

24、页面导入样式时，使用link和@import有什么区别？ 13

26、CSS3有哪些新特性？ 14

27、div+css的布局较table布局有什么优势？ 14

28、超连接访问事后hover样式就不出现的问题是什么？如何解决？ 14

29、rgba()和opacity的透明效果有什么不一样？ 14

30、img的alt与title有何异同？ strong与em的异同？ 15

31、Sass、LESS是什么？你们为何要使用他们？ 15

32、display:none与visibility:hidden的区别是什么？ 16

33、html常见兼容性问题？ 16

34、列出display的值，说明他们的做用。position的值， relative和absolute定位原点是？ 17

35、为何利用多个域名来存储网站资源会更有效？ 17

36、知道的网页制做会用到的图片格式有哪些？ 18

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

38、在css/js代码上线以后开发人员常常会优化性能，从用户刷新网页开始，一次js请求通常状况下有哪些地方会有缓存处理？ 18

39、一个页面上有大量的图片（大型电商网站），加载很慢，你有哪些方法优化这些图片的加载，给用户更好的体验。 19

40、谈谈之前端角度出发作好SEO须要考虑什么？ 19

JavaScript部分 21

1、怎样添加、移除、移动、复制、建立和查找节点？ 21

2、实现一个函数clone，能够对JavaScript中的5种主要的数据类型（包括Number、String、Object、Array、Boolean）进行值复制。 21

3、如何消除一个数组里面重复的元素？ 22

4、在Javascript中什么是伪数组？如何将伪数组转化为标准数组？ 23

5、Javascript中callee和caller的做用？ 23

6、请描述一下cookies，sessionStorage和localStorage的区别 23

7、统计字符串中字母个数或统计最多字母数。 24

8、javascript的typeof返回哪些数据类型 24

9、例举3种强制类型转换和2种隐式类型转换? 24

10、数组方法pop() push() unshift() shift() 24

11、ajax请求的时候get 和post方式的区别? 25

12.ajax请求时，如何解释json数据 25

13、事件委托是什么 25

14、闭包是什么，有什么特性，对页面有什么影响?简要介绍你理解的闭包 25

15、添加 删除 替换 插入到某个接点的方法 25

17、编写一个b继承a的方法; 26

18、如何阻止事件冒泡和默认事件 26

19、下面程序执行后弹出什么样的结果? 26

20、谈谈This对象的理解。 27

21、下面程序的结果 27

22、下面程序的输出结果 27

23、介绍下你最经常使用的一款框架 28

24、对于前端自动化构建工具备了解吗？简单介绍一下 28

其它 28

HTTP 32

1、一次完整的HTTP事务是怎样的一个过程？ 32

2、HTTP的状态码有哪些？ 32

3、HTTPS是如何实现加密？ 32

算法相关 32

1、手写数组快速排序 32

2、JavaScript实现二分法查找 33

Web安全 35

你所了解到的Web攻击技术 35

前端性能 35

如何优化图像、图像格式的区别？ 35

浏览器是如何渲染页面的？ 35

设计模式 35

对MVC、MVVM的理解 35

正则表达式 35

写一个function，清除字符串先后的空格。（兼容全部浏览器） 35

使用正则表达式验证邮箱格式 36

职业规划 36

对前端工程师这个职位你是怎么样理解的？ 36

 

 

HTML/CSS部分

一、什么是盒子模型？有几种？

在网页中，一个元素占有空间的大小由几个部分构成，其中包括元素的内容（content），元素的内边距（padding），元素的边框（border），元素的外边距（margin）四个部分。这四个部分占有的空间中，有的部分能够显示相应的内容，而有的部分只用来分隔相邻的区域或区域。4个部分一块儿构成了css中元素的盒模型。即盒模型包括： 内容(content)、填充(padding)、边界(margin)、 边框(border)。

盒模型有两种， IE 盒子模型、标准 W3C 盒子模型；IE的content部分包含了 border 和 pading;

 

二、行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？

行内元素：a、b、span、img、input、strong、select、label、em、button、textarea
块级元素：div、ul、li、dl、dt、dd、p、h1-h六、blockquote
空元素：即没有内容的HTML元素，例如：br、meta、hr、link、input、img

三、CSS实现垂直水平居中

一道经典的问题，实现方法有不少种，如下是其中一种实现：
HTML结构：

    <div class="wrapper">

        <div class="content"></div>

    </div>    

CSS：

    .wrapper {

      position: relative;

      width: 500px;

      height: 500px;

      

     }

    .content{

        

        width:200px;

        height:200px;

        position: absolute;        //父元素须要相对定位

        top: 50%;

        left: 50%;

        margin-top:-100px ;   //二分之一的height，width

        margin-left: -100px;

    } 

四、简述一下src与href的区别

href 是指向网络资源所在位置，创建和当前元素（锚点）或当前文档（连接）之间的连接，用于超连接。

src是指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。当浏览器解析到该元素时，会暂停其余资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，相似于将所指向资源嵌入当前标签内。这也是为何将js脚本放在底部而不是头部。

五、什么是CSS Hack?

通常来讲是针对不一样的浏览器写不一样的CSS,就是 CSS Hack。
IE浏览器Hack通常又分为三种，条件Hack、属性级Hack、选择符Hack（详细参考CSS文档：css文档）。例如：

    // 一、条件Hack

   <!--[if IE]>

      <style>

            .test{color:red;}

      </style>

   <![endif]-->

   // 二、属性Hack

    .test{    color:#090\9; /* For IE8+ */

    *color:#f00;  /* For IE7 and earlier */    _color:#ff0;  /* For IE6 and earlier */

    }

   // 三、选择符Hack

    * html .test{color:#090;}       /* For IE6 and earlier */

    * + html .test{color:#ff0;}     /* For IE7 */

   

六、简述同步和异步的区别

同步是阻塞模式，异步是非阻塞模式。
同步就是指一个进程在执行某个请求的时候，若该请求须要一段时间才能返回信息，那么这个进程将会一直等待下去，直到收到返回信息才继续执行下去；
异步是指进程不须要一直等下去，而是继续执行下面的操做，无论其余进程的状态。当有消息返回时系统会通知进程进行处理，这样能够提升执行的效率。

七、px和em的区别

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

八、什么叫优雅降级和渐进加强？

渐进加强 progressive enhancement：针对低版本浏览器进行构建页面，保证最基本的功能，而后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

优雅降级 graceful degradation：一开始就构建完整的功能，而后再针对低版本浏览器进行兼容。

区别：优雅降级是从复杂的现状开始，并试图减小用户体验的供给，而渐进加强则是从一个很是基础的，可以起做用的版本开始，并不断扩充，以适应将来环境的须要。降级（功能衰减）意味着往回看；而渐进加强则意味着朝前看，同时保证其根基处于安全地带。

“优雅降级”观点

“优雅降级”观点认为应该针对那些最高级、最完善的浏览器来设计网站。而将那些被认为“过期”或有功能缺失的浏览器下的测试工做安排在开发周期的最后阶段，并把测试对象限定为主流浏览器（如 IE、Mozilla 等）的前一个版本。

在这种设计范例下，旧版的浏览器被认为仅能提供“简陋却无妨 (poor, but passable)” 的浏览体验。你能够作一些小的调整来适应某个特定的浏览器。但因为它们并不是咱们所关注的焦点，所以除了修复较大的错误以外，其它的差别将被直接忽略。

“渐进加强”观点

“渐进加强”观点则认为应关注于内容自己。

内容是咱们创建网站的诱因。有的网站展现它，有的则收集它，有的寻求，有的操做，还有的网站甚至会包含以上的种种，但相同点是它们全都涉及到内容。这使得“渐进加强”成为一种更为合理的设计范例。这也是它当即被 Yahoo! 所采纳并用以构建其“分级式浏览器支持 (Graded Browser Support)”策略的缘由所在。

那么问题来了。如今产品经理看到IE6,7,8网页效果相对高版本现代浏览器少了不少圆角，阴影（CSS3），要求兼容（使用图片背景，放弃CSS3），你会如何说服他？

九、浏览器的内核分别是什么?

IE: trident内核
Firefox：gecko内核
Safari：webkit内核
Opera：之前是presto内核，Opera现已改用Google Chrome的Blink内核
Chrome：Blink(基于webkit，Google与Opera Software共同开发)

10、XHTML和HTML有什么区别

HTML是一种基本的WEB网页设计语言，XHTML是一个基于XML的置标语言
最主要的不一样：

XHTML 元素必须被正确地嵌套。

XHTML 元素必须被关闭。

标签名必须用小写字母。

XHTML 文档必须拥有根元素。

12、前端页面有哪三层构成，分别是什么?做用是什么?

• 结构层 Html 表示层 CSS 行为层 js;
• Ie(Ie内核) 火狐（Gecko） 谷歌（webkit,Blink） opera(Presto),Safari(wbkit)
• 直观的认识标签 对于搜索引擎的抓取有好处，用正确的标签作正确的事情！
• html语义化就是让页面的内容结构化，便于对浏览器、搜索引擎解析；
  在没有样式CCS状况下也以一种文档格式显示，而且是容易阅读的。搜索引擎的爬虫依赖于标记来肯定上下文和各个关键字的权重，利于 SEO。
• 使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。
• HTML5 不基于 SGML，所以不须要对DTD进行引用，可是须要doctype来规范浏览器的行为（让浏览器按照它们应该的方式来运行）；而HTML4.01基于SGML,因此须要对DTD进行引用，才能告知浏览器文档所使用的文档类型。
• !DOCTYPE声明位于位于HTML文档中的第一行，处于html 标签以前。告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会致使文档以兼容模式呈现。
• 标准模式的排版 和JS运做模式都是以该浏览器支持的最高标准运行。在兼容模式中，页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点没法工做。
• HTML5 如今已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增长。
• 绘画 canvas
• 用于媒介回放的 video 和 audio 元素
• 本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；
• sessionStorage 的数据在浏览器关闭后自动删除
• 语意化更好的内容元素，好比 article、footer、header、nav、section
• 表单控件，calendar、date、time、email、url、search
• 新的技术webworker, websockt, Geolocation
  移除的元素
• 纯表现的元素：basefont，big，center，font, s，strike，tt，u；
• 对可用性产生负面影响的元素：frame，frameset，noframes；
  支持HTML5新标签：
• IE8/IE7/IE6支持经过document.createElement方法产生的标签，
• 能够利用这一特性让这些浏览器支持HTML5新标签，
• 浏览器支持新标签后，还须要添加标签默认的样式：
• cookie在浏览器和服务器间来回传递。 sessionStorage和localStorage不会
• sessionStorage和localStorage的存储空间更大；
• sessionStorage和localStorage有更多丰富易用的接口；
• sessionStorage和localStorage各自独立的存储空间；
• 调用localstorge、cookies等本地存储方式
• Opacity:元素自己依然占据它本身的位置并对网页的布局起做用。它也将响应用户交互;
• Visibility:与 opacity 惟一不一样的是它不会响应任何用户交互。此外，元素在读屏软件中也会被隐藏;
• Display:display 设为 none 任何对该元素直接打用户交互操做都不可能生效。此外，读屏软件也不会读到元素的内容。这种方式产生的效果就像元素彻底不存在;
• Position:不会影响布局，能让元素保持能够操做;
• Clip-path:clip-path 属性尚未在 IE 或者 Edge 下被彻底支持。若是要在你的 clip-path 中使用外部的 SVG 文件，浏览器支持度还要低;
• 使用带clear属性的空元素
• 使用CSS的overflow属性；
• 使用CSS的:after伪元素；
• 使用邻接元素处理；

13、你作的页面在哪些流览器测试过?这些浏览器的内核分别是什么?

1四、什么是语义化的HTML?

15、HTML5 为何只须要写 !DOCTYPE HTML？

16、Doctype做用？标准模式与兼容模式各有什么区别?

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

18、请描述一下 cookies，sessionStorage 和 localStorage 的区别？

1九、如何实现浏览器内多个标签页之间的通讯?

20、CSS隐藏元素的几种方法（至少说出三种）

2一、CSS清除浮动的几种方法（至少两种）

2二、CSS居中（包括水平居中和垂直居中）实现方式有那些？

内联元素居中方案

水平居中设置：
1.行内元素

• 设置 text-align:center；

2.Flex布局

• 设置display:flex;justify-content:center;(灵活运用,支持Chroime，Firefox，IE9+)

垂直居中设置：
1.父元素高度肯定的单行文本（内联元素）

• 设置 height = line-height；

2.父元素高度肯定的多行文本（内联元素）

a:插入 table （插入方法和水平居中同样），而后设置 vertical-align:middle；

b:先设置 display:table-cell 再设置 vertical-align:middle；

块级元素居中方案

水平居中设置：
1.定宽块状元素

• 设置 左右 margin 值为 auto；

2.不定宽块状元素

• a:在元素外加入 table 标签（完整的，包括 table、tbody、tr、td），该元素写在 td 内，而后设置 margin 的值为 auto；
• b:给该元素设置 displa:inine 方法；
• c:父元素设置 position:relative 和 left:50%，子元素设置 position:relative 和 left:50%；

垂直居中设置：

• 使用position:absolute（fixed）,设置left、top、margin-left、margin-top的属性;
• 利用position:fixed（absolute）属性，margin:auto这个必须不要忘记了;
• 利用display:table-cell属性使内容垂直居中;
• 使用css3的新属性transform:translate(x,y)属性;
• 使用:before元素;
• 双边距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）
• link属于XHTML标签，除了加载CSS外，还能用于定义RSS, 定义rel链接属性等做用；而@import是CSS提供的，只能用于加载CSS;
• 页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;
• import是CSS2.1 提出的，只在IE5以上才能被识别，而link是XHTML标签，无兼容问题;

2三、写出几种IE6 BUG的解决方法

2四、页面导入样式时，使用link和@import有什么区别？

2五、CSS 选择符有哪些？哪些属性能够继承？优先级算法如何计算？ CSS3新增伪类有那些？

• id选择器（ # myid）
• 类选择器（.myclassname）
• 标签选择器（div, h1, p）
• 相邻选择器（h1 + p）
• 子选择器（ul > li）
• 后代选择器（li a）
• 通配符选择器（ * ）
• 属性选择器（a[rel = “external”]）
• 伪类选择器（a: hover, li: nth – child）
• 可继承的样式： font-size font-family color, UL LI DL DD DT;
• 不可继承的样式：border padding margin width height ;
• 优先级就近原则，同权重状况下样式定义最近者为准;

优先级为:

1 2	!important >  id > class > tag important 比 内联优先级高

 

2六、CSS3有哪些新特性？

• CSS3实现圆角（border-radius:8px），阴影（box-shadow:10px），
  对文字加特效（text-shadow、），线性渐变（gradient），旋转（transform）
• transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//旋转,缩放,定位,倾斜
  增长了更多的CSS选择器 多背景 rgba

 

 

2七、div+css的布局较table布局有什么优势？

改版的时候更方便 只要改css文件。

页面加载速度更快、结构化清晰、页面显示简洁。

表现与结构相分离。

易于优化（seo）搜索引擎更友好，排名更容易靠前。

 

2八、超连接访问事后hover样式就不出现的问题是什么？如何解决？

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

 

2九、rgba()和opacity的透明效果有什么不一样？

rgba()和opacity都能实现透明效果，但最大的不一样是opacity做用于元素，以及元素内的全部内容的透明度，

而rgba()只做用于元素的颜色或其背景色。（设置rgba透明的元素的子元素不会继承透明效果！）

 

 

30、img的alt与title有何异同？ strong与em的异同？

a:alt(alt text):为不能显示图像、窗体或applets的用户代理（UA），alt属性用来指定替换文字。替换文字的语言由lang属性指定。(在IE浏览器下会在没有title时把alt当成 tool tip显示)

title(tool tip):该属性为设置该属性的元素提供建议性的信息。

strong:粗体强调标签，强调，表示内容的重要性

em:斜体强调标签，更强烈强调，表示内容的强调点

 

3一、Sass、LESS是什么？你们为何要使用他们？

他们是CSS预处理器。他是CSS上的一种抽象层。他们是一种特殊的语法/语言编译成CSS。

例如Less是一种动态样式语言. 将CSS赋予了动态语言的特性，如变量，继承，运算， 函数. LESS 既能够在客户端上运行 (支持IE 6+, Webkit, Firefox)，也可一在服务端运行 (借助 Node.js)。

为何要使用它们？

结构清晰，便于扩展。

能够方便地屏蔽浏览器私有语法差别。这个不用多说，封装对浏览器语法差别的重复处理，减小无心义的机械劳动。

 

能够轻松实现多重继承。

彻底兼容 CSS 代码，能够方便地应用到老项目中。LESS 只是在 CSS 语法上作了扩展，因此老的 CSS 代码也能够与 LESS 代码一同编译。

 

3二、display:none与visibility:hidden的区别是什么？

display : 隐藏对应的元素但不挤占该元素原来的空间。

visibility: 隐藏对应的元素而且挤占该元素原来的空间。

便是，使用CSSdisplay:none属性后，HTML元素（对象）的宽度、高度等各类属性值都将“丢失”;而使用visibility:hidden属性后，HTML元素（对象）仅仅是在视觉上看不见（彻底透明），而它所占据的空间位置仍然存在。

 

3三、html常见兼容性问题？

1.双边距BUG float引发的  使用display

2.3像素问题 使用float引发的 使用dislpay:inline-3px

3.超连接hover 点击后失效  使用正确的书写顺序 linkvisited hover active

4.Iez-index问题 给父级添加position:relative

5.Png 透明 使用js代码 改

6.Min-height最小高度 ！Important 解决’

7.select在ie6下遮盖 使用iframe嵌套

8.为何没有办法定义1px左右的宽度容器（IE6默认的行高形成的，使用over:hidden,zoom:0.08 line-height:1px）

9.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图片

 

3四、列出display的值，说明他们的做用。position的值， relative和absolute定位原点是？

  1. block 象块类型元素同样显示。

  none 缺省值。向行内元素类型同样显示。

  inline-block 象行内元素同样显示，但其内容象块类型元素同样显示。

  list-item 象块类型元素同样显示，并添加样式列表标记。

  2. position的值

  *absolute

        生成绝对定位的元素，相对于 static 定位之外的第一个父元素进行定位。

  *fixed （老IE不支持）

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

  * relative

        生成相对定位的元素，相对于其正常位置进行定位。

  * static 默认值。没有定位，元素出如今正常的流中

  *（忽略 top, bottom, left, right z-index 声明）。

  * inherit 规定从父元素继承 position 属性的值。

 

 

3五、为何利用多个域名来存储网站资源会更有效？

CDN缓存更方便

突破浏览器并发限制

节约cookie带宽

节约主域名的链接数，优化页面响应速度

防止没必要要的安全问题

 

3六、知道的网页制做会用到的图片格式有哪些？

png-8，png-24，jpeg，gif，svg。

可是上面的那些都不是面试官想要的最后答案。面试官但愿听到是Webp。（是否有关注新技术，新鲜事物）

科普一下Webp：WebP格式，谷歌（google）开发的一种旨在加快图片加载速度的图片格式。图片压缩体积大约只有JPEG的2/3，并能节省大量的服务器带宽资源和数据空间。Facebook Ebay等知名网站已经开始测试并使用WebP格式。

在质量相同的状况下，WebP格式图像的体积要比JPEG格式图像小40%

 

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

微格式（Microformats）是一种让机器可读的语义化XHTML词汇的集合，是结构化数据的开放标准。是为特殊应用而制定的特殊格式。

优势：将智能数据添加到网页上，让网站内容在搜索引擎结果界面能够显示额外的提示。（应用范例：豆瓣，有兴趣自行google）

38、在css/js代码上线以后开发人员常常会优化性能，从用户刷新网页开始，一次js请求通常状况下有哪些地方会有缓存处理？

答案：dns缓存，cdn缓存，浏览器缓存，服务器缓存。

 

3九、一个页面上有大量的图片（大型电商网站），加载很慢，你有哪些方法优化这些图片的加载，给用户更好的体验。

图片懒加载，在页面上的未可视区域能够添加一个滚动条事件，判断图片位置与浏览器顶端的距离与页面的距离，若是前者小于后者，优先加载。

若是为幻灯片、相册等，可使用图片预加载技术，将当前展现图片的前一张和后一张优先下载。

若是图片为css图片，可使用CSSsprite，SVGsprite，Iconfont、Base64等技术。

若是图片过大，可使用特殊编码的图片，加载时会先加载一张压缩的特别厉害的缩略图，以提升用户体验。

若是图片展现区域小于图片的真实大小，则因在服务器端根据业务须要先行进行图片压缩，图片压缩后大小与展现一致。

 

 

40、谈谈之前端角度出发作好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（“冲浪”）。其它网站到你的网站的连接越多，你也就会得到更多的访问量。更重要的是，你的网站的外部连接数越多，会被搜索引擎认为它的重要性越大，从而给你更高的排名。

合理的标签使用

 

 

 

 

JavaScript部分

一、怎样添加、移除、移动、复制、建立和查找节点？

1）建立新节点
createDocumentFragment() //建立一个DOM片断
createElement() //建立一个具体的元素
createTextNode() //建立一个文本节点

2）添加、移除、替换、插入
appendChild() //添加
removeChild() //移除
replaceChild() //替换
insertBefore() //插入

3）查找
getElementsByTagName() //经过标签名称
getElementsByName() //经过元素的Name属性的值
getElementById() //经过元素Id，惟一性

二、实现一个函数clone，能够对JavaScript中的5种主要的数据类型（包括Number、String、Object、Array、Boolean）进行值复制。

    /** * 对象克隆 * 支持基本数据类型及对象 * 递归方法 */function clone(obj) {

    var o;

    switch (typeof obj) {

        case "undefined":

            break;

        case "string":

            o = obj + "";

            break;

        case "number":

            o = obj - 0;

            break;

        case "boolean":

            o = obj;

            break;

        case "object": // object 分为两种状况 对象（Object）或数组（Array）

            if (obj === null) {

                o = null;

            } else {

                if (Object.prototype.toString.call(obj).slice(8, -1) === "Array") {

                    o = [];

                    for (var i = 0; i < obj.length; i++) {

                        o.push(clone(obj[i]));

                    }

                } else {

                    o = {};

                    for (var k in obj) {

                        o[k] = clone(obj[k]);

                    }

                }

            }

            break;

        default:

            o = obj;

            break;

    }

    return o;}

三、如何消除一个数组里面重复的元素？

// 方法一：var arr1 =[1,2,2,2,3,3,3,4,5,6],

    arr2 = [];for(var i = 0,len = arr1.length; i< len; i++){

    if(arr2.indexOf(arr1[i]) < 0){

        arr2.push(arr1[i]);

    }}document.write(arr2); // 1,2,3,4,5,6

四、在Javascript中什么是伪数组？如何将伪数组转化为标准数组？

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

function log(){

      var args = Array.prototype.slice.call(arguments);  //为了使用unshift数组方法，将argument转化为真正的数组

      args.unshift('(app)');

 

      console.log.apply(console, args);};

五、Javascript中callee和caller的做用？

caller是返回一个对函数的引用，该函数调用了当前函数；

callee是返回正在被执行的function函数，也就是所指定的function对象的正文。

六、请描述一下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仅仅是为了在本地“存储”数据而生。

七、统计字符串中字母个数或统计最多字母数。

var str = "aaaabbbccccddfgh";var obj  = {};for(var i=0;i<str.length;i++){

    var v = str.charAt(i);

    if(obj[v] && obj[v].value == v){

        obj[v].count = ++ obj[v].count;

    }else{

        obj[v] = {};

        obj[v].count = 1;

        obj[v].value = v;

    }}for(key in obj){

    document.write(obj[key].value +'='+obj[key].count+' '); // a=4  b=3  c=4  d=2  f=1  g=1  h=1 }   

 

八、javascript的typeof返回哪些数据类型

• Ｏbject number function boolean underfind;
• 强制（parseInt,parseFloat,number）隐式（== – ===）；
• Push()尾部添加 pop()尾部删除
• Unshift()头部添加 shift()头部删除
• 一个在url后面 一个放在虚拟载体里面
  有大小限制
• 安全问题
  应用不一样 一个是论坛等只须要请求的，一个是相似修改密码的;
• 使用eval parse,鉴于安全性考虑 使用parse更靠谱;
• 让利用事件冒泡的原理，让本身的所触发的事件，让他的父元素代替执行！
• 闭包就是可以读取其余函数内部变量的函数。

九、例举3种强制类型转换和2种隐式类型转换?

十、数组方法pop() push() unshift() shift()

十一、ajax请求的时候get 和post方式的区别?

12.ajax请求时，如何解释json数据

1三、事件委托是什么

1四、闭包是什么，有什么特性，对页面有什么影响?简要介绍你理解的闭包

1五、添加 删除 替换 插入到某个接点的方法

obj.appendChidl()
obj.innersetBefore
obj.replaceChild
obj.removeChild

1六、说一下什么是javascript的同源策略？

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

1七、编写一个b继承a的方法;

JavaScript

 

1 2 3 4 5 6 7 8 9 10 11

function A(name){     this.name = name;     this.sayHello = function(){alert(this.name+” say Hello!”);}; } function B(name,id){     this.temp = A;     this.temp(name);        //至关于new A();     delete this.temp;            this.id = id;       this.checkId = function(ID){alert(this.id==ID)}; }

1八、如何阻止事件冒泡和默认事件

JavaScript

 

1 2 3 4 5 6 7 8

function stopBubble(e) {     if (e && e.stopPropagation)         e.stopPropagation()     else         window.event.cancelBubble=true } return false

1九、下面程序执行后弹出什么样的结果?

JavaScript

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

function fn() {     this.a = 0;     this.b = function() {         alert(this.a)     } } fn.prototype = {     b: function() {         this.a = 20;         alert(this.a);     },     c: function() {         this.a = 30;         alert(this.a);     } } var myfn = new fn(); myfn.b(); myfn.c();

20、谈谈This对象的理解。

this是js的一个关键字，随着函数使用场合不一样，this的值会发生变化。
可是有一个总原则，那就是this指的是调用函数的那个对象。
this通常状况下：是全局对象Global。 做为方法调用，那么this就是指这个对象

2一、下面程序的结果

JavaScript

 

1 2 3 4 5 6 7 8 9 10 11

function fun(n,o) {   console.log(o)   return {     fun:function(m){       return fun(m,n);     }   }; } var a = fun(0);  a.fun(1);  a.fun(2);  a.fun(3); var b = fun(0).fun(1).fun(2).fun(3); var c = fun(0).fun(1);  c.fun(2);  c.fun(3);

//答案：

//a: undefined,0,0,0
//b: undefined,0,1,2
//c: undefined,0,1,1

2二、下面程序的输出结果

JavaScript

 

1 2 3 4 5 6 7 8 9

var name = 'World!'; (function () {     if (typeof name === 'undefined') {         var name = 'Jack';         console.log('Goodbye ' + name);     } else {         console.log('Hello ' + name);     } })();

2三、介绍下你最经常使用的一款框架

• jquery,rn,angular等;
• Gulp,Grunt等；

2四、对于前端自动化构建工具备了解吗？简单介绍一下

20.介绍一下你了解的后端语言以及掌握程度

其它

1.对Node的优势和缺点提出了本身的见解？

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

2.你有哪些性能优化的方法？

（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） 图片预加载，将样式表放在顶部，将脚本放在底部 加上时间戳。
（8） 避免在页面的主体布局中使用table，table要等其中的内容彻底下载以后才会显示出来，显示div+css布局慢。对普通的网站有一个统一的思路，就是尽可能向前端优化、减小数据库操做、减小磁盘IO。向前端优化指的是，在不影响功能和体验的状况下，能在浏览器执行的不要在服务端执行，能在缓存服务器上直接返回的不要到应用服务器，程序能直接取得的结果不要到外部取得，本机内能取得的数据不要到远程取，内存能取到的不要到磁盘取，缓存中有的不要去数据库查询。减小数据库操做指减小更新次数、缓存结果减小查询次数、将数据库执行的操做尽量的让你的程序完成（例如join查询），减小磁盘IO指尽可能不使用文件系统做为缓存、减小读写文件次数等。程序优化永远要优化慢的部分，换语言是没法“优化”的。

3.http状态码有那些？分别表明是什么意思？
100-199 用于指定客户端应相应的某些动做。
200-299 用于表示请求成功。
300-399 用于已经移动的文件而且常被包含在定位头信息中指定新的地址信息。
400-499 用于指出客户端的错误。400 一、语义有误，当前请求没法被服务器理解。401 当前请求须要用户验证 403 服务器已经理解请求，可是拒绝执行它。
500-599 用于支持服务器错误。 503 – 服务不可用
4.一个页面从输入 URL 到页面加载显示完成，这个过程当中都发生了什么？（流程说的越详细越好）

• 查找浏览器缓存
• DNS解析、查找该域名对应的IP地址、重定向（301）、发出第二个GET请求
• 进行HTTP协议会话
• 客户端发送报头(请求报头)
• 文档开始下载
• 文档树创建，根据标记请求所需指定MIME类型的文件
• 文件显示
• 浏览器这边作的工做大体分为如下几步：
• 加载：根据请求的URL进行域名解析，向服务器发起请求，接收文件（HTML、JS、CSS、图象等）。
• 解析：对加载到的资源（HTML、JS、CSS等）进行语法解析，建议相应的内部数据结构（好比HTML的DOM树，JS的（对象）属性表，CSS的样式规则等等）

5.你经常使用的开发工具是什么，为何？

• Sublime,Atom,Nodepad++;

6.说说最近最流行的一些东西吧？常去哪些网站？

• Node.js、MVVM、React-native,Angular,Weex等
• CSDN,Segmentfault,博客园,掘金,Stackoverflow,伯乐在线等

7.介绍下你的项目（若是有的话）？并说一下在作这个项目中运用的技术以及遇到的难题是如何解决的

 

 

HTTP

一、一次完整的HTTP事务是怎样的一个过程？

基本流程：

a. 域名解析

b. 发起TCP的3次握手

c. 创建TCP链接后发起http请求

d. 服务器端响应http请求，浏览器获得html代码

e. 浏览器解析html代码，并请求html代码中的资源

f. 浏览器对页面进行渲染呈现给用户

二、HTTP的状态码有哪些？

三、HTTPS是如何实现加密？

算法相关

一、手写数组快速排序

关于快排算法的详细说明，能够参考阮一峰老师的文章快速排序
"快速排序"的思想很简单，整个排序过程只须要三步：
（1）在数据集之中，选择一个元素做为"基准"（pivot）。
（2）全部小于"基准"的元素，都移到"基准"的左边；全部大于"基准"的元素，都移到"基准"的右边。
（3）对"基准"左边和右边的两个子集，不断重复第一步和第二步，直到全部子集只剩下一个元素为止。
参考代码：

 var quickSort = function(arr) {

　　if (arr.length <= 1) { return arr; }

　　var pivotIndex = Math.floor(arr.length / 2);

　　var pivot = arr.splice(pivotIndex, 1)[0];

　　var left = [];

　　var right = [];

　　for (var i = 0; i < arr.length; i++){

　　　　if (arr[i] < pivot) {

　　　　　　left.push(arr[i]);

　　　　} else {

　　　　　　right.push(arr[i]);

　　　　}

　　}

　　return quickSort(left).concat([pivot], quickSort(right));};

二、JavaScript实现二分法查找

二分法查找，也称折半查找，是一种在有序数组中查找特定元素的搜索算法。查找过程能够分为如下步骤：
（1）首先，从有序数组的中间的元素开始搜索，若是该元素正好是目标元素（即要查找的元素），则搜索过程结束，不然进行下一步。
（2）若是目标元素大于或者小于中间元素，则在数组大于或小于中间元素的那一半区域查找，而后重复第一步的操做。
（3）若是某一步数组为空，则表示找不到目标元素。
参考代码:

     // 非递归算法

        function binary_search(arr, key) {

            var low = 0,

                high = arr.length - 1;

            while(low <= high){

                var mid = parseInt((high + low) / 2);

                if(key == arr[mid]){

                    return  mid;

                }else if(key > arr[mid]){

                    low = mid + 1;

                }else if(key < arr[mid]){

                    high = mid -1;

                }else{

                    return -1;

                }

            }

        };

        var arr = [1,2,3,4,5,6,7,8,9,10,11,23,44,86];

        var result = binary_search(arr,10);

        alert(result); // 9 返回目标元素的索引值       

 

    // 递归算法

        function binary_search(arr,low, high, key) {

            if (low > high){

                return -1;

            }

            var mid = parseInt((high + low) / 2);

            if(arr[mid] == key){

                return mid;

            }else if (arr[mid] > key){

                high = mid - 1;

                return binary_search(arr, low, high, key);

            }else if (arr[mid] < key){

                low = mid + 1;

                return binary_search(arr, low, high, key);

            }

        };

        var arr = [1,2,3,4,5,6,7,8,9,10,11,23,44,86];

        var result = binary_search(arr, 0, 13, 10);

        alert(result); // 9 返回目标元素的索引值  

Web安全

你所了解到的Web攻击技术

（1）XSS（Cross-Site Scripting，跨站脚本攻击）：指经过存在安全漏洞的Web网站注册用户的浏览器内运行非法的HTML标签或者JavaScript进行的一种攻击。
（2）SQL注入攻击
（3）CSRF（Cross-Site Request Forgeries，跨站点请求伪造）：指攻击者经过设置好的陷阱，强制对已完成的认证用户进行非预期的我的信息或设定信息等某些状态更新。

前端性能

如何优化图像、图像格式的区别？

浏览器是如何渲染页面的？

设计模式

对MVC、MVVM的理解

正则表达式

写一个function，清除字符串先后的空格。（兼容全部浏览器）

function trim(str) {

    if (str && typeof str === "string") {

        return str.replace(/(^\s*)|(\s*)$/g,""); //去除先后空白符

    }}

使用正则表达式验证邮箱格式

    var reg = /^(\w)+(\.\w+)*@(\w)+((\.\w{2,3}){1,3})$/;

    var email = "example@qq.com";

    console.log(reg.test(email));  // true  

职业规划

对前端工程师这个职位你是怎么样理解的？

a. 前端是最贴近用户的程序员，前端的能力就是能让产品从 90分进化到 100 分，甚至更好

b. 参与项目，快速高质量完成实现效果图，精确到1px；

c. 与团队成员，UI设计，产品经理的沟通；

d. 作好的页面结构，页面重构和用户体验；

e. 处理hack，兼容、写出优美的代码格式；

f. 针对服务器的优化、拥抱最新前端技术。