HTML5 CSS3

1. CSS3有哪些新特性?

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

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

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

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

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

6. 媒体查询,多栏布局

7. border-image

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

新特性:

1. 拖拽释放(Drag and drop) API

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

3. 音频、视频API(audio,video)

4. 画布(Canvas) API

5. 地理(Geolocation) API

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

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

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

9. 新的技术webworker, websocket,Geolocation

移除的元素:

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

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

支持HTML5新标签:

1. 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. 你如何对网站的文件和资源进行优化?

文件合并

文件最小化/文件压缩

使用CDN托管

缓存的使用

6. 什么是响应式设计?

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

7. 新的 HTML5 文档类型和字符集是?

答:HTML5文档类型:<!doctype html>

HTML5使用的编码<meta charset=”UTF-8”>

8. HTML5 Canvas 元素有什么用?

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

9. HTML5 存储类型有什么区别?

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

10. 用H5+CSS3解决下导航栏最后一项掉下来的问题

11. CSS3新增伪类有那些?

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

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

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

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

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

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

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

12. 请用CSS实现:一个矩形内容,有投影,有圆角,hover状态慢慢变透明。

css属性的熟练程度和实践经验

13. 描述下CSS3里实现元素动画的方法

动画相关属性的熟悉程度

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

HTML5 现在已经不是 SGML 的子集,主要是关于图像,位置,存储,地理定位等功能的增加。

* 绘画 canvas 元素

用于媒介回放的 video 和 audio 元素

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

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

语意化更好的内容元素,比如 article、footer、header、nav、section

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

CSS3实现圆角,阴影,对文字加特效,增加了更多的CSS选择器 多背景rgba

新的技术webworker, websockt, Geolocation

移除的元素

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

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

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

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

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

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

<!--[if lt IE 9]>

<script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>

<![endif]-->

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

* 首先划分成头部、body、脚部;。。。。。

* 实现效果图是最基本的工作,精确到2px;

与设计师,产品经理的沟通和项目的参与

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

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

针对服务器的优化、拥抱 HTML5。

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

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

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

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

  “优雅降级”观点

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

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

  “渐进增强”观点

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

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

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

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

CDN缓存更方便

突破浏览器并发限制

节约cookie带宽

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

防止不必要的安全问题

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

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

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

20. 知道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 伪类实现。

21. 如何在 HTML5 页面中嵌入音频?

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

<audio controls>

<source src="jamshed.mp3" type="audio/mpeg">

Your browser does'nt support audio embedding feature.

</audio>

22. 如何在 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>

23. HTML5 引入什么新的表单属性?

Datalist datetime output keygen date month week time number range emailurl

24. CSS3新增伪类有那些?

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

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

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

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

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

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

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

25. (写)描述一段语义的html代码吧。

(HTML5中新增加的很多标签(如:<article>、<nav>、<header>和<footer>等)

就是基于语义化设计原则)

< div id="header">

< h1>标题</h1>

< h2>专注Web前端技术< /h2>

< /div>

语义 HTML 具有以下特性:

文字包裹在元素中,用以反映内容。例如:

段落包含在 <p> 元素中。

顺序表包含在<ol>元素中。

从其他来源引用的大型文字块包含在<blockquote>元素中。

HTML 元素不能用作语义用途以外的其他目的。例如:

<h1>包含标题,但并非用于放大文本。

<blockquote>包含大段引述,但并非用于文本缩进。

空白段落元素 ( <p></p> ) 并非用于跳行。

文本并不直接包含任何样式信息。例如:

不使用 <font> 或<center> 等格式标记。

类或 ID 中不引用颜色或位置。

26. cookie在浏览器和服务器间来回传递。 sessionStorage和localStorage区别

sessionStorage和localStorage的存储空间更大;

sessionStorage和localStorage有更多丰富易用的接口;

sessionStorage和localStorage各自独立的存储空间;

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

* 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新标签,

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

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

<!--[if lt IE 9]>

<script>src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>

<![endif]-->

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

29. 语义化的理解?

用正确的标签做正确的事情!

html语义化就是让页面的内容结构化,便于对浏览器、搜索引擎解析;

在没有样式CCS情况下也以一种文档格式显示,并且是容易阅读的。

搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重,利于 SEO。

使阅读源代码的人对网站更容易将网站分块,便于阅读维护理解。

30. HTML5的离线储存?

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

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

31. 写出HTML5的文档声明方式

<DOCYPE html>

32. HTML5和CSS3的新标签

HTML5: nav, footer, header, section, hgroup, video, time, canvas, audio...CSS3: RGBA, opacity, text-shadow, box-shadow, border-radius, border-image, border-color, transform...;

33. 自己对标签语义化的理解

在我看来,语义化就是比如说一个段落, 那么我们就应该用 <p>标签来修饰,标题就应该用 <h?>标签等。符合文档语义的标签。

四、移动web开发

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

知识面宽度,多多益善

2、Zepto库和JQ区别

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

五、Ajax

1、Ajax 是什么? 如何创建一个Ajax?

Ajax并不算是一种新的技术,全称是asychronous javascript and xml,可以说是已有技术的组合,主要用来实现客户端与服务器端的异步通信效果,实现页面的局部刷新,早期的浏览器并不能原生支持ajax,可以使用隐藏帧(iframe)方式变相实现异步效果,后来的浏览器提供了对ajax的原生支持

使用ajax原生方式发送请求主要通过XMLHttpRequest(标准浏览器)、ActiveXObject(IE浏览器)对象实现异步通信效果

基本步骤:

var xhr =null;//创建对象

if(window.XMLHttpRequest){

xhr = newXMLHttpRequest();

}else{

xhr = newActiveXObject("Microsoft.XMLHTTP");

}

xhr.open(“方式”,”地址”,”标志位”);//初始化请求

xhr.setRequestHeader(“”,””);//设置http头信息

xhr.onreadystatechange =function(){}//指定回调函数

xhr.send();//发送请求

js框架(jQuery/EXTJS等)提供的ajax API对原生的ajax进行了封装,熟悉了基础理论,再学习别的框架就会得心应手,好多都是换汤不换药的内容

2、同步和异步的区别?

同步:阻塞的

-张三叫李四去吃饭,李四一直忙得不停,张三一直等着,直到李四忙完两个人一块去吃饭

=浏览器向服务器请求数据,服务器比较忙,浏览器一直等着(页面白屏),直到服务器返回数据,浏览器才能显示页面

异步:非阻塞的

-张三叫李四去吃饭,李四在忙,张三说了一声然后自己就去吃饭了,李四忙完后自己去吃

=浏览器向服务器请求数据,服务器比较忙,浏览器可以自如的干原来的事情(显示页面),服务器返回数据的时候通知浏览器一声,浏览器把返回的数据再渲染到页面,局部更新

3、如何解决跨域问题?

理解跨域的概念:协议、域名、端口都相同才同域,否则都是跨域

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

4、页面编码和被请求的资源编码如果不一致如何处理?

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

5、简述ajax 的过程。

1. 创建XMLHttpRequest对象,也就是创建一个异步调用对象

2. 创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息

3. 设置响应HTTP请求状态变化的函数

4. 发送HTTP请求

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

6. 使用JavaScript和DOM实现局部刷新

6、阐述一下异步加载。

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

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

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

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

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

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

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

GET:一般用于信息获取,使用URL传递参数,对所发送信息的数量也有限制,一般在2000个字符,有的浏览器是8000个字符

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

在以下情况中,请使用 POST 请求:

1. 无法使用缓存文件(更新服务器上的文件或数据库)

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

3. 发送包含未知字符的用户输入时,POST 比GET 更稳定也更可靠

9、ajax 是什么?ajax 的交互模型?同步和异步的区别?如何解决跨域问题?

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

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

3. Ajax在客户端运行,承担了一部分本来由服务器承担的工作,减少了大用户量下的服务器负载。

10、 Ajax的最大的特点是什么。

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

11、ajax的缺点

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

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

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

4、破坏了程序的异常机制。

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

get一般用来进行查询操作,url地址有长度限制,请求的参数都暴露在url地址当中,如果传递中文参数,需要自己进行编码操作,安全性较低。

post请求方式主要用来提交数据,没有数据长度的限制,提交的数据内容存在于http请求体中,数据不会暴漏在url地址中。

13、解释jsonp的原理,以及为什么不是真正的ajax

  Jsonp并不是一种数据格式,而json是一种数据格式,jsonp是用来解决跨域获取数据的一种解决方案,具体是通过动态创建script标签,然后通过标签的src属性获取js文件中的js脚本,该脚本的内容是一个函数调用,参数就是服务器返回的数据,为了处理这些返回的数据,需要事先在页面定义好回调函数,本质上使用的并不是ajax技术

14、什么是Ajax和JSON,它们的优缺点。

Ajax是全称是asynchronousJavaScript andXML,即异步JavaScript和xml,用于在Web页面中实现异步数据交互,实现页面局部刷新。

优点:可以使得页面不重载全部内容的情况下加载局部内容,降低数据传输量,避免用户不断刷新或者跳转页面,提高用户体验

缺点:对搜索引擎不友好;要实现ajax下的前后退功能成本较大;可能造成请求数的增加跨域问题限制;

JSON是一种轻量级的数据交换格式,ECMA的一个子集

优点:轻量级、易于人的阅读和编写,便于机器(JavaScript)解析,支持复合数据类型(数组、对象、字符串、数字)

15、http常见的状态码有那些?分别代表是什么意思?

200 - 请求成功

301 - 资源(网页等)被永久转移到其它URL

404 - 请求的资源(网页等)不存在

500 - 内部服务器错误

16、一个页面从输入 URL 到页面加载显示完成,这个过程中都发生了什么?

分为4个步骤:

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

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

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

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

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

get一般用来进行查询操作,url地址有长度限制,请求的参数都暴露在url地址当中,如果传递中文参数,需要自己进行编码操作,安全性较低。

post请求方式主要用来提交数据,没有数据长度的限制,提交的数据内容存在于http请求体中,数据不会暴漏在url地址中。

18、ajax请求时,如何解释json数据

使用eval()或者JSON.parse() 鉴于安全性考虑,推荐使用JSON.parse()更靠谱,对数据的安全性更好。

19、.javascript的本地对象,内置对象和宿主对象

本地对象为独立于宿主环境的ECMAScript提供的对象,包括ArrayObjectRegExp等可以new实例化的对象

内置对象为Gload,Math 等不可以实例化的(他们也是本地对象,内置对象是本地对象的一个子集)

宿主对象为所有的非本地对象,所有的BOM和DOM对象都是宿主对象,如浏览器自带的document,window 等对象

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

确保用户在不同地区能用最快的速度打开网站,其中某个域名崩溃用户也能通过其他郁闷访问网站,并且不同的资源放到不同的服务器上有利于减轻单台服务器的压力。

21、请说出三种减低页面加载时间的方法

1、压缩css、js文件 2、合并js、css文件,减少http请求 3、外部js、css文件放在最底下 4、减少dom操作,尽可能用变量替代不必要的dom操作

22、HTTP状态码都有那些。

200 OK //客户端请求成功

400 Bad Request //客户端请求有语法错误,不能被服务器所理解

403 Forbidden //服务器收到请求,但是拒绝提供服务

404 Not Found //请求资源不存在,输入了错误的URL

500 Internal Server Error //服务器发生不可预期的错误

503 Server Unavailable //服务器当前不能处理客户端的请求,一段时间后可能恢复正常

六、JS高级

1、JQuery一个对象可以同时绑定多个事件,这是如何实现的?

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

2、知道什么是webkit么? 知道怎么用浏览器的各种工具来调试和debug代码么?

Webkit是浏览器引擎,包括html渲染和js解析功能,手机浏览器的主流内核,与之相对应的引擎有Gecko(Mozilla Firefox 等使用)和Trident(也称MSHTML,IE 使用)。

对于浏览器的调试工具要熟练使用,主要是页面结构分析,后台请求信息查看,js调试工具使用,熟练使用这些工具可以快速提高解决问题的效率

3、如何测试前端代码? 知道BDD, TDD, Unit Test么? 知道怎么测试你的前端工程么(mocha, sinon, jasmin, qUnit..)?

了解BDD行为驱动开发与TDD测试驱动开发已经单元测试相关概念,

4、前端templating(Mustache,underscore, handlebars)是干嘛的, 怎么用?

Web 模板引擎是为了使用户界面与业务数据(内容)分离而产生的,

Mustache 是一个 logic-less (轻逻辑)模板解析引擎,它的优势在于可以应用在Javascript、PHP、Python、Perl 等多种编程语言中。

Underscore封装了常用的JavaScript对象操作方法,用于提高开发效率。

Handlebars 是 JavaScript 一个语义模板库,通过对view和data的分离来快速构建Web模板。

5、简述一下Handlebars 的基本用法?

没有用过的话说出它是干什么的即可

6、简述一下Handlerbars 的对模板的基本处理流程, 如何编译的?如何缓存的?

学习技术不仅要会用,还有熟悉它的实现机制,这样在开发中遇到问题时才能更好的解决

7、用js实现千位分隔符?

原生js的熟练度,实践经验,实现思路

8、检测浏览器版本版本有哪些方式?

IE与标准浏览器判断,IE不同版本的判断,userAgent var ie = /*@cc_on !@*/false;

9、我们给一个dom同时绑定两个点击事件,一个用捕获,一个用冒泡,你来说下会执行几次事件,然后会先执行冒泡还是捕获

对两种事件模型的理解

10、实现一个函数clone,可以对JavaScript中的5种主要的数据类型(包括Number、String、Object、Array、Boolean)进行值复制

· 考察点1:对于基本数据类型和引用数据类型在内存中存放的是值还是指针这一区别是否清楚

· 考察点2:是否知道如何判断一个变量是什么类型的

· 考察点3:递归算法的设计

// 方法一: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; } }

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

var arr=[1,2,3,3,4,4,5,5,6,1,9,3,25,4]; function deRepeat(){ var newArr=[]; var obj={}; var index=0; var l=arr.length; for(var i=0;i<l;i++){ if(obj[arr[i]]==undefined) { obj[arr[i]]=1; newArr[index++]=arr[i]; } else if(obj[arr[i]]==1) continue; } return newArr; } var newArr2=deRepeat(arr); alert(newArr2); //输出1,2,3,4,5,6,9,25

12、小贤是一条可爱的小狗(Dog),它的叫声很好听(wow),每次看到主人的时候就会乖乖叫一声(yelp)。从这段描述可以得到以下对象:

function Dog() { this.wow = function() { alert(’Wow’); } this.yelp = function() { this.wow(); }}

小芒和小贤一样,原来也是一条可爱的小狗,可是突然有一天疯了(MadDog),一看到人就会每隔半秒叫一声(wow)地不停叫唤(yelp)。请根据描述,按示例的形式用代码来实。(继承,原型,setInterval)

function MadDog() { this.yelp = function() { var self = this; setInterval(function() { self.wow(); }, 500); }}MadDog.prototype = new Dog(); //for testvar dog = new Dog();dog.yelp();var madDog = new MadDog();madDog.yelp();

13、下面这个ul,如何点击每一列的时候alert其index?(闭包)

<ul id=”test”><li>这是第一条</li><li>这是第二条</li><li>这是第三条</li></ul>

// 方法一:var lis=document.getElementById('2223').getElementsByTagName('li');for(var i=0;i<3;i++){ lis[i].index=i; lis[i].onclick=function(){ alert(this.index); };}//方法二:var lis=document.getElementById('2223').getElementsByTagName('li');for(var i=0;i<3;i++){ lis[i].index=i; lis[i].onclick=(function(a){ return function() { alert(a); } })(i);}

14、编写一个JavaScript函数,输入指定类型的选择器(仅需支持id,class,tagName三种简单CSS选择器,无需兼容组合选择器)可以返回匹配的DOM节点,需考虑浏览器兼容性和性能。

/*** @param selector {String} 传入的CSS选择器。* @return {Array}*/

var query = function(selector) {var reg = /^(#)?(\.)?(\w+)$/img;var regResult = reg.exec(selector);var result = [];//如果是id选择器if(regResult[1]) {if(regResult[3]) {if(typeof document.querySelector === "function") {result.push(document.querySelector(regResult[3])); }else { result.push(document.getElementById(regResult[3])); } } } //如果是class选择器 else if(regResult[2]) { if(regResult[3]) { if(typeof document.getElementsByClassName === 'function') { var doms = document.getElementsByClassName(regResult[3]); if(doms) { result = converToArray(doms); } } //如果不支持getElementsByClassName函数 else { var allDoms = document.getElementsByTagName("*") ; for(var i = 0, len = allDoms.length; i < len; i++) { if(allDoms[i].className.search(new RegExp(regResult[2])) > -1) { result.push(allDoms[i]); } } } }} //如果是标签选择器 else if(regResult[3]) { var doms = document.getElementsByTagName(regResult[3].toLowerCase()); if(doms) { result = converToArray(doms); } } return result; } function converToArray(nodes){ var array = null; try{ array = Array.prototype.slice.call(nodes,0);//针对非IE浏览器 }catch(ex){ array = new Array(); for( var i = 0 ,len = nodes.length; i < len ; i++ ) { array.push(nodes[i]) } } return array;}

15、请评价以下代码并给出改进意见。

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

16、给String对象添加一个方法,传入一个string类型的参数,然后将string的每个字符间价格空格返回,例如:

addSpace(“hello world”) // -> ‘h e l l o w o r l d’

String.prototype.spacify = function(){ return this.split('').join(' '); };

接着上述问题答案提问,1)直接在对象的原型上添加方法是否安全?尤其是在Object对象上。(这个我没能答出?希望知道的说一下。) 2)函数声明与函数表达式的区别?

答案:在js中,解析器在向执行环境中加载数据时,对函数声明和函数表达式并非是一视同仁的,解析器会率先读取函数声明,并使其在执行任何代码之前可用(可以访问),至于函数表达式,则必须等到解析器执行到它所在的代码行,才会真正被解析执行。

17、定义一个log方法,让它可以代理console.log的方法。

可行的方法一:

function log(msg) { console.log(msg);}log("hello world!") // hello world!

如果要传入多个参数呢?显然上面的方法不能满足要求,所以更好的方法是:

function log(){ console.log.apply(console, arguments);};

到此,追问apply和call方法的异同。

对于apply和call两者在作用上是相同的,即是调用一个对象的一个方法,以另一个对象替换当前对象。将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。

但两者在参数上有区别的。对于第一个参数意义都一样,但对第二个参数: apply传入的是一个参数数组,也就是将多个参数组合成为一个数组传入,而call则作为call的参数传入(从第二个参数开始)。 如 func.call(func1,var1,var2,var3)对应的apply写法为:func.apply(func1,[var1,var2,var3]) 。

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

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

假设接第八题题干,我们要给每个log方法添加一个”(app)”前缀,比如’hello world!’ ->’(app)helloworld!’。方法如下:

function log(){ var args = Array.prototype.slice.call(arguments); //为了使用unshift数组方法,将argument转化为真正的数组 args.unshift('(app)'); console.log.apply(console, args); };

19、对作用域上下文和this的理解,看下列

代码:

var User = { count: 1, getCount: function() { return this.count; }};console.log(User.getCount()); // what?var func = User.getCount;console.log(func()); // what?

问两处console输出什么?为什么?

答案是1和undefined。

func是在winodw的上下文中被执行的,所以会访问不到count属性。

继续追问,那么如何确保Uesr总是能访问到func的上下文,即正确返回1。正确的方法是使用Function.prototype.bind。兼容各个浏览器完整代码如下:

Function.prototype.bind = Function.prototype.bind || function(context){ var self = this; return function(){ return self.apply(context, arguments); };}var func = User.getCount.bind(User);console.log(func());

20、原生JS的window.onload与Jquery的$(document).ready(function(){})有什么不同?如何用原生JS实现Jq的ready方法?

window.onload()方法是必须等到页面内包括图片的所有元素加载完毕后才能执行。

$(document).ready()是DOM结构绘制完毕后就执行,不必等到加载完毕。

/* * 传递函数给whenReady() * 当文档解析完毕且为操作准备就绪时,函数作为document的方法调用 */var whenReady = (function() { //这个函数返回whenReady()函数 var funcs = []; //当获得事件时,要运行的函数 var ready = false; //当触发事件处理程序时,切换为true //当文档就绪时,调用事件处理程序 function handler(e) { if(ready) return; //确保事件处理程序只完整运行一次 //如果发生onreadystatechange事件,但其状态不是complete的话,那么文档尚未准备好 if(e.type === 'onreadystatechange' && document.readyState !== 'complete') { return; } //运行所有注册函数 //注意每次都要计算funcs.length //以防这些函数的调用可能会导致注册更多的函数 for(var i=0; i<funcs.length; i++) { funcs[i].call(document); } //事件处理函数完整执行,切换ready状态, 并移除所有函数 ready = true; funcs = null; } //为接收到的任何事件注册处理程序 if(document.addEventListener) { document.addEventListener('DOMContentLoaded', handler, false); document.addEventListener('readystatechange', handler, false); //IE9+ window.addEventListener('load', handler, false); }else if(document.attachEvent) { document.attachEvent('onreadystatechange', handler); window.attachEvent('onload', handler); } //返回whenReady()函数 return function whenReady(fn) { if(ready) { fn.call(document); } else { funcs.push(fn); } }})();

如果上述代码十分难懂,下面这个简化版:

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();//函数执行 } }); }};

21、(设计题)想实现一个对页面某个节点的拖曳?如何做?(使用原生JS)

回答出概念即可,下面是几个要点

1.给需要拖拽的节点绑定mousedown, mousemove, mouseup事件

2.mousedown事件触发后,开始拖拽

3.mousemove时,需要通过event.clientX和clientY获取拖拽位置,并实时更新位置

4.mouseup时,拖拽结束

5.需要注意浏览器边界的情况

22、请实现如下功能

function setcookie(name,value,days){ //给cookie增加一个时间变量  var exp = new Date();   exp.setTime(exp.getTime() + days*24*60*60*1000); //设置过期时间为days天  document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString(); } function getCookie(name){  var result = "";  var myCookie = ""+document.cookie+";";   var searchName = "+name+"=";  var startOfCookie = myCookie.indexOf(searchName);  var endOfCookie;  if(satrtOfCookie != -1){    startOfcookie += searchName.length;    endOfCookie = myCookie.indexOf(";",startOfCookie);    result = (myCookie.substring(startOfCookie,endOfCookie));  }  return result;}(function(){  var oTips = document.getElementById('tips');//假设tips的id为tips  var page = {  check: function(){//检查tips的cookie是否存在并且允许显示    var tips = getCookie('tips');    if(!tips || tips == 'show') return true;//tips的cookie不存在    if(tips == "never_show_again") return false;  },  hideTip: function(bNever){    if(bNever) setcookie('tips', 'never_show_again', 365);    oTips.style.display = "none";//隐藏  },  showTip: function(){  oTips.style.display = "inline";//显示,假设tips为行级元素  },  init: function(){    var _this = this;    if(this.check()){    _this.showTip();    setcookie('tips', 'show', 1);  }  oTips.onclick = function(){    _this.hideTip(true);  };  }  }; page.init();})();

23、说出以下函数的作用是?空白区域应该填写什么?

//define (function(window){ function fn(str){ this.str=str; } fn.prototype.format = function(){ var arg = ______; return this.str.replace(_____,function(a,b){ return arg[b]||""; }); } window.fn = fn;})(window); //use(function(){ var t = new fn('<p><a href="{0}">{1}</a><span>{2}</span></p>'); console.log(t.format('http://www.alibaba.com','Alibaba','Welcome'));})();

答案:访函数的作用是使用format函数将函数的参数替换掉{0}这样的内容,返回一个格式化后的结果:

第一个空是:arguments

第二个空是:/\{(\d+)\}/ig

24、Javascript作用链域?

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

25、谈谈This对象的理解。

理解不同形式的函数调用方式下的this指向,理解事件函数、定时函数中的this指向,函数的调用形式决定了this的指向。

26、eval是做什么的?

它的功能是把对应的字符串解析成JS代码并运行;应该避免使用eval,不安全,非常耗性能(2个步骤,一次解析成js语句,一次执行)

27、关于事件,IE与火狐的事件机制有什么区别?如何阻止冒泡?

[1].在IE中,事件对象是作为一个全局变量来保存和维护的.所有的浏览器事件,不管是用户触发的,还是其他事件,都会更新window.event对象.所以在代码中,只要调用window.event就可以获取事件对象, 再event.srcElement就可以取得触发事件的元素进行进一步处理.

[2].在FireFox中,事件对象却不是全局对象,一般情况下,是现场发生,现场使用,FireFox把事件对象自动传给事件处理程序.

关于事件的兼容性处理要熟练掌握,事件对象具体哪些属性存在兼容性问题,IE与标准事件模型事件冒泡与事件捕获的支持要理解

28、什么是闭包(closure),为什么要用它?

简单的理解是函数的嵌套形成闭包,闭包包括函数本身已经它的外部作用域

使用闭包可以形成独立的空间,延长变量的生命周期,报存中间状态值

29、javascript 代码中的"use strict";是什么意思 ? 使用它区别是什么?

意思是使用严格模式,使用严格模式,一些不规范的语法将不再支持

30、如何判断一个对象是否属于某个类?

Instanceof constructor

31、new操作符具体干了什么呢?

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

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

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

32、用原生JavaScript的实现过什么功能吗?

主要考察原生js的实践经验

33、Javascript中,有一个函数,执行时对象查找时,永远不会去查找原型,这个函数是?

HasOwnProperty

34、对JSON的了解?

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

35、js延迟加载的方式有哪些?

方案一:<script>标签的async="async"属性(详细参见:script标签的async属性)

方案二:<script>标签的defer="defer"属性

方案三:动态创建<script>标签

方案四:AJAX eval(使用AJAX得到脚本内容,然后通过eval_r(xmlhttp.responseText)来运行脚本)

方案五:iframe方式

36、模块化开发怎么做?

理解模块化开发模式:浏览器端requirejs,seajs;服务器端nodejs;ES6模块化;fis、webpack等前端整体模块化解决方案;grunt、gulp等前端工作流的使用

37、AMD(Modules/Asynchronous-Definition)、CMD(Common ModuleDefinition)规范区别?

理解这两种规范的差异,主要通过requirejs与seajs的对比,理解模块的定义与引用方式的差异以及这两种规范的设计原则

38、requireJS的核心原理是什么?(如何动态加载的?如何避免多次加载的?如何缓存的?)

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

39、让你自己设计实现一个requireJS,你会怎么做?

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

40、谈一谈你对ECMAScript6的了解?

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

41、ECMAScript6 怎么写class么,为什么会出现class这种东西?

class Point {

constructor(x, y) {

this.x = x;

this.y = y;

}

toString() {

return '('+this.x+', '+this.y+')';

}

}

42、异步加载的方式有哪些?

方案一:<script>标签的async="async"属性(详细参见:script标签的async属性)

方案二:<script>标签的defer="defer"属性

方案三:动态创建<script>标签

方案四:AJAX eval(使用AJAX得到脚本内容,然后通过eval_r(xmlhttp.responseText)来运行脚本)

方案五:iframe方式

43、documen.write和 innerHTML的区别?

document.write是重写整个document, 写入内容是字符串的html

innerHTML是HTMLElement的属性,是一个元素的内部html内容

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

(1)创建新节点

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

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

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

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

appendChild()

removeChild()

replaceChild()

insertBefore()

(3)查找

getElementsByTagName() //通过标签名称

getElementsByName() //通过元素的Name属性的值

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

每一天,你将受到才哥的理论,结合历史、政治、文化、艺术、商业故事,令人防不胜防的高纯度无死角知识轰炸。以及,不间断的私藏书籍、电影推荐。

有时候,某件事虽记不清楚,但总感觉这样的事在很久很久以前发生过...

有时候,某个人虽从未见过,但总感觉面前的人在另一个时空里曾遇见...

那时候相忘于江湖的事,或许穿越了时光,有了新的世界

那时候不远万里追寻的梦,也许穿行过人海,也有了新的意义

而对于我们来说,那个惦念的江湖,那个执着的梦,其核心都是在偌大的世界里,寻找到更真实更好的自己!

原文发布于微信公众号 - 李才哥(liqi13695515224)

原文发表时间:2019-07-05

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券