Web前端面试题-1

Posted 2020-10-13

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部分

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

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

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

 

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

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

3、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;

    } 

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

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

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

5、什么是CSS Hack?

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

    // 1、条件Hack

   <!--[if IE]>

      <style>

            .test{color:red;}

      </style>

   <![endif]-->

   // 2、属性Hack

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

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

    }

   // 3、选择符Hack

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

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

   

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

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

7、px和em的区别

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

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

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

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

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

“优雅降级”观点

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

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

“渐进增强”观点

“渐进增强”观点则认为应关注于内容本身。

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

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

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

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、你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么?

14、什么是语义化的HTML?

15、HTML5 为什么只需要写 !DOCTYPE HTML？

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

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

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

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

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

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

22、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标签，无兼容问题;

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

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

25、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 比 内联优先级高

 

26、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

 

 

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

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

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

表现与结构相分离。

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

 

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

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

 

29、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:斜体强调标签，更强烈强调，表示内容的强调点

 

31、Sass、LESS是什么？大家为什么要使用他们？

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

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

为什么要使用它们？

结构清晰，便于扩展。

可以方便地屏蔽浏览器私有语法差异。这个不用多说，封装对浏览器语法差异的重复处理，减少无意义的机械劳动。

 

可以轻松实现多重继承。

完全兼容 CSS 代码，可以方便地应用到老项目中。LESS 只是在 CSS 语法上做了扩展，所以老的 CSS 代码也可以与 LESS 代码一同编译。

 

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

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

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

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

 

33、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图片

 

34、列出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 属性的值。

 

 

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

CDN缓存更方便

突破浏览器并发限制

节约cookie带宽

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

防止不必要的安全问题

 

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

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

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

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

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

 

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

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

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

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

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

 

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

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

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

如果图片为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、怎样添加、移除、移动、复制、创建和查找节点？

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

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

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

2、实现一个函数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;}

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

// 方法一：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

4、在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);};

5、Javascript中callee和caller的作用？

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

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

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

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

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 }   

 

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

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

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

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

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

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

13、事件委托是什么

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

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

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

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

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

17、编写一个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)}; }

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

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

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

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就是指这个对象

21、下面程序的结果

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

22、下面程序的输出结果

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);     } })();

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

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

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

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 1、语义有误，当前请求无法被服务器理解。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

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

基本流程：

a. 域名解析

b. 发起TCP的3次握手

c. 建立TCP连接后发起http请求

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

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

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

2、HTTP的状态码有哪些？

3、HTTPS是如何实现加密？

算法相关

1、手写数组快速排序

关于快排算法的详细说明，可以参考阮一峰老师的文章快速排序
"快速排序"的思想很简单，整个排序过程只需要三步：
（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));};

2、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 = "[email protected]";

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

职业规划

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

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

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

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

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

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

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