前端面试题

前端知识点

回顾一些知识点，加深自己的印象。

1. HTML

DOM操作

2. CSS

1. position的值

   • static：默认值，没有定位，元素在正常的文档流中

   • relative：生成相对定位的元素

     1. 相对于自身原有位置进行偏移（会进行堆叠）
     2. 仍处于标准文档流中
     3. 拥有偏移属性和z-index属性

   • absolute：生成绝对定位的元素

     1. 相对于最近的一级的定位不是static的父元素来进行定位或html
     2. 此时元素脱离标准文档流。
     3. 拥有z-index属性和偏移属性。

   • fixed：生成绝对定位的元素

     1. 相对于浏览器窗口进行定位
     2. 此时元素脱离标准文档流。
     3. 拥有z-index属性和偏移属性。

3. JavaScript

基础

框架，库

设计模式

4. 网络传输和数据

如何解决跨域问题

1. JSONP

   原理是：动态插入script标签，通过script标签引入一个js文件，这个js文件载入成功后会执行我们在url参数中指定的函数，并且会把我们需要的json数据作为参数传入。

   优点：兼容性好，简单易用，支持浏览器与服务器双向通信。 缺点：只支持GET请求。

2. CORS

   服务器端对于CORS的支持，主要就是通过设置Access-Control-Allow-Origin来进行的。如果浏览器检测到相应的设置，就可以允许Ajax进行跨域的访问。

3. 通过修改document.domain来跨子域

   将子域和主域的document.domain设为同一个主域的前提条件：这两个域名必须属于同一个基础域名，而且所用的协议，端口都要一致。

4. 使用window.name来进行跨域

   window.name传输技术，原本是Thomas Frank用于解决cookie的一些劣势而发明的。后来Kris Zyp在此方法的基础上强化了window.name传输，并引入到Dojo，用来解决跨域数据传输问题。

   window.name的特点是：name值在不同页面甚至不同域名加载后依旧存在，并且可以支持非常长的name值（2MB）

5. 使用HTML5新引进的window.postMessage方法来跨域传送数据

   event.origin可以进行源控制，通过postMessage方法和添加window.onmessage监听消息的传递。

协议

数据格式

1. XML和JSON的区别

   1. 数据体积方面 JSON相对于XML来讲，数据的体积较小

   2. 数据交互方面 JSON与JavaScript的交互更加方便，更容易解析处理

   3. 数据描述方面 JSON对数据的描述性比XML较差

   4. 传输速度方面 JSON的速度要快很多

1. JSON的操作

   1. eval
   2. JSON.parse()
   3. JSON.stringify():把对象转成json字符串

5. 性能优化

6. 数据结构和算法

7. 安全

8. 其他

1. 渐进增强

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

2. 优雅降级

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

来源

1. https://github.com/hawx1993/Front-end-Interview-questions