1.什么是盒子模型？

CSS中的思维模型,每一个元素都包含margin,padding,boder,content区域,占一个盒子形状,整体称为盒模型.

2.简述一下src与href的区别?

  • Href 超文本链接,指向网络资源所在位置,如果我们在文档添加​​<link href="common.css" rel="stylesheet"/>​​浏览器会下载资源并且不会停止对当前文档的处理。
  • Src source,指向外部资源的位置,如果我们添加​​<script src ="js.js"></script>​​浏览器会暂停其他资源的下载和处理,直到该资源加载,编译,执行完毕(图片和框架也是如此),这也就是为什么js脚本要放在底部。
    src用于替换当前元素,href用于在当前文档和引入资源之间建立联系。

3.简述同步和异步的区别?

同步强调顺序性,谁先谁后,异步不存在这种顺序性.

同步:用户能看到页面刷新,请求发送,请求完成, 等请求完成,页面刷新,新内容出现,用户看到新内容.

异步:用户正常操作,浏览器进行后端请求,等请求完成,页面不刷新,用户看到新内容

4.怎样添加、移除、移动、复制、创建和查找节点？

createNode,createElement,createDocumentFragment

removeChild

appendChild insertBefore

cloneNode

getElementById,getElementsByNaem,getElementsBytagName,getElementByClassName

2道思考题

1.站点 Logo 是否因出现在 <h1> 标签中?

H1标签是标题标签,一个页面只能出现1次.H1能提升网站seo排名,当你的logo足够有影响力的时候,可以再logo中放入H1,不然最好不要浪费一个页面唯一的一次机会.

h1不要加在header里面，尤其是logo上。

2.是否应该支持 IE6？

看你的网站的受众是谁,做好平稳退化。

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

1.域名解析

2.发起tcp的3次握手

TCP 为什么需要3次握手？

举个例子：

假设一个老外在故宫里面迷路了，看到了小明，于是就有下面的对话：

老外： Excuse me，Can you Speak English?

小明： yes 。

老外： OK,I want ...

在问路之前，老外先问小明是否会说英语，小明回答是的，这时老外才开始问路

3.发起http请求(get post)

4.服务器相应http请求,服务器发送给浏览器html源码

5.浏览器解析html源码,并请求html源码中的资源

6.浏览器对整个页面进行渲染,让用户得到最终的页面

6.你所了解到的Web攻击技术?

（1）XSS（Cross-Site Scripting，跨站脚本攻击）：指通过存在安全漏洞的Web网站注册用户的浏览器内运行非法的HTML标签或者JavaScript进行的一种攻击。

（2）SQL注入攻击

（3）CSRF（Cross-Site Request Forgeries，跨站点请求伪造）：指攻击者通过设置好的陷阱，强制对已完成的认证用户进行非预期的个人信息或设定信息等某些状态更新。

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

通过异步处理,提升用过体验;

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

ajax减少了本应由服务器承担的工作,减少了大量用户下的服务器负载;

ajax特点:

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

ajax缺点:

不支持浏览器back按钮;

对搜索引擎的支持较弱;

不容易调试;

破坏了程序的异常机制;

暴露了与服务器之间的交互细节;

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

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

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

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

2道思考题

3、前端网页制作怎么克服不同分辨率的问题？

使用媒体查询器,结合响应式布局;

4.是否该继续使用 <b> 和 <i> 两个标签?

当只是想要造成粗体或者斜体时,应该使用css

当带有语义情况下,是对文本进行强调时,可以使用

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

无法直接调用数组方法或期望length属性有什么特殊行为,但仍可以使用遍历数组的方法遍历他们.

Array.prototype.slice.call(fakeArr)

10.浏览器本地存储?

H5之前:

cookies,缺点是在请求头上带数据,且大小最多是4k;

Html5之后:

LocalStorage 用于本地的永久存储,除非主动删除,否者永不过期;

SessionStorage 用于会话级别的临时存储,这些数据只有在同一个窗口下才能访问;当窗口关闭时,数据也会随之销毁;

11.线程与进程的区别?

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

多进程拥有独立的内存,多线程共享内存,所以多线程提高了运行效率;

多线程的重要意义在于一个应用程序中,有多个执行程序能够同时执行,但是系统并没有将多线程看成多个独立的应用

12.请说出三种减少页面加载时间的方法。

优化图片,减小其尺寸,尤其是缩略图

减少http请求(合并文件合并图片)

给图片加上width和height,减少计算,可在没加载完成时就留下固定宽高的空白

图片格式的选择(在使用颜色要求不高的地方,使用GIF)

压缩jscss代码

网址后面加上斜杠,对服务器而言,可以减少一个请求计算,直接打开根目录下默认页

2道思考题

5.在链接中应该使用诸如“Click here” 一类的笼统词汇吗？

不应该,应该根据打开链接后的页面详情来描述链接按钮,不然用户只能根据上下文来猜测链接意图.

6.链接是否应该在新窗口打开？

在新窗口打开链接可以让用户不关闭现有页面的情况下,请了解一个未知的页面,以防那个页面不是自己需要的,还丢失了现有页面会话;

13.null和undefined的区别？

Undefined 的值只有一个,就是undefined,当一个申明的变量没有初始化时,它的值就是undefined.

Null 也只有一个值,就是null,用来表示尚未存在的对象,常用来表示函数尝试返回一个不存在的值

14 .new操作符具体干了什么呢?

new共经历了四个过程。

var fn = function () { };
var fnObj = new fn();


1、创建了一个空对象

var obj = new object();


2、设置原型链

obj._proto_ = fn.prototype;


3、让fn的this指向obj，并执行fn的函数体

var result = fn.call(obj);


4、判断fn的返回值类型，如果是值类型，返回obj。如果是引用类型，就返回这个引用类型的对象。

if (typeof(result) == "object"){ 
fnObj = result;
 } else { 
fnObj = obj;}


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

内存泄露是指当你不在拥有或者需要它的时候仍然存在;

垃圾回收器定期扫描对象，并计算引用了每个对象的其他对象的数量。如果一个对象的引用数量为 0（没有其他对象引用过该对象），或对该对象的惟一引用是循环的，那么该对象的内存即可回收。

setTimeout 的第一个参数使用字符串而非函数的话，会引发内存泄漏。

闭包、控制台日志、循环（在两个对象彼此引用且彼此保留时，就会产生一个循环）

16.对Node的优点和缺点提出了自己的看法？

优点：

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

两道思考题

7.时至今日前端canvas还是否有深入学习的必要？​

8.你如何对网站的文件和资源进行优化?

1.尽可能减少http请求次数，将css, js, 图片各自合并

2.使用CDN资源托管，降低通信距离

3.添加Expire/Cache-Control头

4.Gzip压缩文件jscss代码

5.将css放在页面最上面

6.将script放在页面最下面

7.避免在css中使用表达式

8.将css, js都放在外部文件中

9.减少DNS查询

10.最小化css, js，减小文件体积

11.避免重定向

12.移除重复脚本

13.配置实体标签ETag

14.使用AJAX缓存，让网站内容分批加载，局部更新

15.优化网站图片

16.css精灵合并图片

16.对Node的优点和缺点提出了自己的看法？

优点：

  2. 因为Node是基于事件驱动和无阻塞的，所以非常适合处理并发请求
  3. 客户端和服务器端都使用JavaScript编写
    缺点：
  4. Node是一个相对新的开源项目，所以不太稳定，它总是一直在变。
  5. 缺少足够多的第三方库支持。看起来，就像是Ruby/Rails当年的样子（第三方库现在已经很丰富了，所以这个缺点可以说不存在了）。

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

详细版：

1、浏览器会开启一个线程来处理这个请求，对URL 分析判断如果是 http 协议就按照 Web 方式来处理;

2、调用浏览器内核中的对应方法，比如 WebView 中的 loadUrl 方法;

3、通过DNS解析获取网址的IP地址，设置 UA 等信息发出第二个GET请求;

4、进行HTTP协议会话，客户端发送报头(请求报头);

5、进入到web服务器上的 WebServer，如 Apache、Tomcat、Node.js 等服务器;

6、进入部署好的后端应用，如PHP、Java、JavaScript、Python 等，找到对应的请求处理;

7、处理结束回馈报头，此处如果浏览器访问过，缓存上有对应资源，会与服务器最后修改时间对比，一致则返回304;

8、浏览器开始下载html文档(响应报头，状态码200)，同时使用缓存;

9、文档树建立，根据标记请求所需指定MIME类型的文件（比如css、js）,同时设置了cookie;

10、页面开始渲染DOM，JS根据DOM API操作DOM,执行事件绑定等

页面显示完成。

简洁版：

浏览器根据请求的URL交给DNS域名解析，找到真实IP，向服务器发起请求；

服务器交给后台处理完成后返回数据，浏览器接收文件（HTML、JS、CSS、图象等）；
浏览器对加载到的资源（HTML、JS、CSS等）进行语法解析，建立相应的内部数据结构（如HTML的DOM）；
载入解析到的资源文件，渲染页面，完成。


18.HTTP状态码

当浏览者访问一个网页时，浏览器会向服务器发出请求。当浏览器接收并显示网页前，此网页所在的服务器会返回一个包含HTTP状态码的信息头（server header）用以响应浏览器的请求。

下面是常见的HTTP状态码：

200 - 请求成功

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

404 - 请求的资源（网页等）不存在

一下 JavaScript 的同源策略。

同源策略是指一段脚本只能读取来自同一来源的窗口和文档的属性。

同源策略是一种安全协议，是客户端脚本（尤其是Javascript）的重要的安全度量标准。它最早出自Netscape Navigator2.0，其目的是防止某个文档或脚本从多个不同源装载。

这里的同源策略指的是：协议，域名，端口相同。

20.GET和POST的区别，何时使用POST？

  • GET：一般用于信息获取，使用URL传递参数，对所发送信息的数量也有限制，一般在2000个字符。当请求无副作用时（如进行搜索），便可使用GET方法。
  • POST：一般用于修改服务器上的资源，对所发送的字符长度没有限制。当请求有副作用时（如添加数据行），则用POST方法。
    GET方式需要使用Request.QueryString来取得变量的值；

而POST方式通过Request.Form来获取变量的值。

也就是说Get是通过地址栏来传值，而Post是通过提交表单来传值。

在以下情况中，请使用 POST 请求：

  2. 无法使用缓存文件（更新服务器上的文件或数据库）
  3. 向服务器发送大量数据（POST 没有数据量限制）
  4. 发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

两道思考题

9.ajax请求的时候get 和post方式的区别是什么？

1.使用Get请求时,参数在URL中显示,而使用Post方式,则不会显示出来

2.使用Get请求发送数据量小,Post请求发送数据量大​