面试题汇总（精品收录篇）

清疚 2022-07-13 17:36 177阅读 0赞

## 网页性能管理详解 ##

[http://www.ruanyifeng.com/blog/2015/09/web-page-performance-in-depth.html][http_www.ruanyifeng.com_blog_2015_09_web-page-performance-in-depth.html]  
主要包括：  
1. 如何撰写高效的操作DOM的方法，以求降低浏览器重新渲染的频率和成本。  
2. 刷新率  
3. 开发者工具的Timeline面板  
4. window.requestAnimationFrame()方法：在运行时浏览器会自动优化方法的调用，并且如果页面不是激活状态下的话，动画会自动暂停，有效节省了CPU开销。  
5. window.requestIdleCallback()方法：它也可以用来调节重新渲染。它指定只有当一帧的末尾有空闲时间，才会执行回调函数。

--------------------

## 跨域问题的解决方案 \#\# ##

[http://blog.csdn.net/joyhen/article/details/21631833][http_blog.csdn.net_joyhen_article_details_21631833]

--------------------

## 详解AJAX工作原理以及实例讲解 ##

[http://www.tuicool.com/articles/73maU3][http_www.tuicool.com_articles_73maU3]

--------------------

## JavaScript 运行机制详解：再谈Event Loop ##

来自大神阮一峰的博客。  
[http://www.ruanyifeng.com/blog/2014/10/event-loop.html][http_www.ruanyifeng.com_blog_2014_10_event-loop.html]  
主要内容包括：  
1.为什么JavaScript是单线程  
2.任务队列  
3.事件和回调函数

"任务队列"中的事件，除了IO设备的事件以外，还包括一些用户产生的事件（比如鼠标点击、页面滚动等等）。只要指定过回调函数，这些事件发生时就会进入"任务队列"，等待主线程读取。

4.Event Loop

只有栈中的代码执行完毕，主线程才会去读取"任务队列"，依次执行事件所对应的回调函数。

5.定时器

setTimeout(fn,0)的含义是，指定某个任务在主线程最早可得的空闲时间执行，也就是说，尽可能早得执行。它在"任务队列"的尾部添加一个事件，因此要等到同步任务和"任务队列"现有的事件都处理完，才会得到执行。也就是说，并没有办法保证，回调函数一定会在setTimeout()指定的时间执行。

6.Node.js的Event Loop

--------------------

## 在移动浏览器中使用viewport元标签控制布局 ##

[https://developer.mozilla.org/zh-CN/docs/Mobile/Viewport\_meta\_tag][https_developer.mozilla.org_zh-CN_docs_Mobile_Viewport_meta_tag]  
补充知识点另见：  
[http://blog.csdn.net/qq\_16339527/article/details/52996316][http_blog.csdn.net_qq_16339527_article_details_52996316]

--------------------

## 跨域资源共享 CORS 详解 ##

[http://www.ruanyifeng.com/blog/2016/04/cors.html][http_www.ruanyifeng.com_blog_2016_04_cors.html]

简介：
    CORS需要浏览器和服务器同时支持。目前，所有浏览器都支持该功能，IE浏览器不能低于IE10。
    整个CORS通信过程，都是浏览器自动完成，不需要用户参与。对于开发者来说，CORS通信与同源的AJAX通信没有差别，代码完全一样。浏览器一旦发现AJAX请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉。
    因此，实现CORS通信的关键是服务器。只要服务器实现了CORS接口，就可以跨源通信。

CORS vs JSONP：
    CORS与JSONP的使用目的相同，但是比JSONP更强大。
    JSONP只支持GET请求，CORS支持所有类型的HTTP请求。JSONP的优势在于支持老式浏览器，以及可以向不支持CORS的网站请求数据。

--------------------

## 面试总结css精讲篇 ##

如何水平／垂直居中，相邻div之间的margin怎样不覆盖，盒模型讲解，文本溢出显示省略号方法，清除浮动方法。  
[http://www.jianshu.com/p/5abbd210dccd][http_www.jianshu.com_p_5abbd210dccd]

**BFC(Block Formatting Context即块级格式上下文)讲解**：  
[http://www.jianshu.com/p/258a2f734a85][http_www.jianshu.com_p_258a2f734a85]

边界塌陷解决办法：
    为父元素设置 BFC(包括overflow:auto) 或 padding 或 border (解决父子重叠)
    兄弟元素间设置 float 或 inline-block 或 absolute(创建BFC不一定可以，设置overflow就不可以)
    写结构的时候最好用一个方向，要不都top要不都bottom
    
    如何创建BFC，总结一下就是：
    float属性不为none
    overflow不为visible(可以是hidden、scroll、auto)
    position为absolute或fixed
    display为inline-block、table-cell、table-caption
    另外，根元素也是BFC

--------------------

## Flex教程 ##

[http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm\_source=tuicool][http_www.ruanyifeng.com_blog_2015_07_flex-grammar.html_utm_source_tuicool]

--------------------

## 减少页面加载时间的方法 ##

[http://blog.csdn.net/xujie\_0311/article/details/42421547/][http_blog.csdn.net_xujie_0311_article_details_42421547]

--------------------

## Normalize.css ##

[http://jerryzou.com/posts/aboutNormalizeCss/][http_jerryzou.com_posts_aboutNormalizeCss]

Normalize的优势在于：
    保护有用的浏览器默认样式而不是完全去掉它们
    一般化的样式：为大部分HTML元素提供
    修复浏览器自身的bug并保证各浏览器的一致性
    优化CSS可用性：用一些小技巧
    解释代码：有注释和详细的文档

--------------------

## CSS hack技巧 ##

[http://www.duitang.com/static/csshack.html][http_www.duitang.com_static_csshack.html]

--------------------

## 优化网页的打印样式 ##

[http://blog.csdn.net/xujie\_0311/article/details/42271273][http_blog.csdn.net_xujie_0311_article_details_42271273]

--------------------

## Retina屏幕的图片处理办法 ##

[http://www.suoling.net/retina-images-without-a-wordpress-plugin/][http_www.suoling.net_retina-images-without-a-wordpress-plugin]

--------------------

## 详解javascript立即执行函数表达式（IIFE） ##

[http://web.jobbole.com/82520/][http_web.jobbole.com_82520]

--------------------

## undefined与null的区别 ##

[http://www.ruanyifeng.com/blog/2014/03/undefined-vs-null.html][http_www.ruanyifeng.com_blog_2014_03_undefined-vs-null.html]

我的理解是：  
null是一个空对象，而undefined是声明未定义的变量或变量的属性。

--------------------

## 浏览器同源政策及其规避方法 ##

[http://www.ruanyifeng.com/blog/2016/04/same-origin-policy.html][http_www.ruanyifeng.com_blog_2016_04_same-origin-policy.html]

主要介绍的方法有：
    1、两个网页一级域名相同，只是二级域名不同，浏览器允许通过设置document.domain共享 Cookie。
    2、片段识别符，也就是URL的#号后面的部分
    3、利用window.name
    4、window.postMessage：HTML5全新API

--------------------

## 严格模式精讲 ##

[http://www.ruanyifeng.com/blog/2013/01/javascript\_strict\_mode.html][http_www.ruanyifeng.com_blog_2013_01_javascript_strict_mode.html]  
讲得好细致。。。不愧是大神博客。。。

--------------------

## JavaScript中的不可变性(Immutability) ##

[http://blog.csdn.net/alex8046/article/details/51982797][http_blog.csdn.net_alex8046_article_details_51982797]

--------------------

## 【前端性能】高性能滚动 scroll 及页面渲染优化 ##

[http://www.cnblogs.com/coco1s/p/5499469.html][http_www.cnblogs.com_coco1s_p_5499469.html]

主要内容包括了为何需要优化滚动事件，滚动与页面渲染的关系，节流与防抖，pointer-events:none 优化滚动。

--------------------

## jQuery扩展 ##

[http://caibaojian.com/jquery-extend-and-jquery-fn-extend.html][http_caibaojian.com_jquery-extend-and-jquery-fn-extend.html]

主要介绍：
    jQuery.fn
    jQuery.extend(object)
    Object jQuery.extend( target, object1, [objectN])
    jQuery.fn.extend(object);
    jQuery.fn.extend = jQuery.prototype.extend

--------------------

## 再谈Javascript原型继承 ##

[https://segmentfault.com/a/1190000000766541][https_segmentfault.com_a_1190000000766541]

[http_www.ruanyifeng.com_blog_2015_09_web-page-performance-in-depth.html]: http://www.ruanyifeng.com/blog/2015/09/web-page-performance-in-depth.html
[http_blog.csdn.net_joyhen_article_details_21631833]: http://blog.csdn.net/joyhen/article/details/21631833
[http_www.tuicool.com_articles_73maU3]: http://www.tuicool.com/articles/73maU3
[http_www.ruanyifeng.com_blog_2014_10_event-loop.html]: http://www.ruanyifeng.com/blog/2014/10/event-loop.html
[https_developer.mozilla.org_zh-CN_docs_Mobile_Viewport_meta_tag]: https://developer.mozilla.org/zh-CN/docs/Mobile/Viewport_meta_tag
[http_blog.csdn.net_qq_16339527_article_details_52996316]: http://blog.csdn.net/qq_16339527/article/details/52996316
[http_www.ruanyifeng.com_blog_2016_04_cors.html]: http://www.ruanyifeng.com/blog/2016/04/cors.html
[http_www.jianshu.com_p_5abbd210dccd]: http://www.jianshu.com/p/5abbd210dccd
[http_www.jianshu.com_p_258a2f734a85]: http://www.jianshu.com/p/258a2f734a85
[http_www.ruanyifeng.com_blog_2015_07_flex-grammar.html_utm_source_tuicool]: http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool
[http_blog.csdn.net_xujie_0311_article_details_42421547]: http://blog.csdn.net/xujie_0311/article/details/42421547/
[http_jerryzou.com_posts_aboutNormalizeCss]: http://jerryzou.com/posts/aboutNormalizeCss/
[http_www.duitang.com_static_csshack.html]: http://www.duitang.com/static/csshack.html
[http_blog.csdn.net_xujie_0311_article_details_42271273]: http://blog.csdn.net/xujie_0311/article/details/42271273
[http_www.suoling.net_retina-images-without-a-wordpress-plugin]: http://www.suoling.net/retina-images-without-a-wordpress-plugin/
[http_web.jobbole.com_82520]: http://web.jobbole.com/82520/
[http_www.ruanyifeng.com_blog_2014_03_undefined-vs-null.html]: http://www.ruanyifeng.com/blog/2014/03/undefined-vs-null.html
[http_www.ruanyifeng.com_blog_2016_04_same-origin-policy.html]: http://www.ruanyifeng.com/blog/2016/04/same-origin-policy.html
[http_www.ruanyifeng.com_blog_2013_01_javascript_strict_mode.html]: http://www.ruanyifeng.com/blog/2013/01/javascript_strict_mode.html
[http_blog.csdn.net_alex8046_article_details_51982797]: http://blog.csdn.net/alex8046/article/details/51982797
[http_www.cnblogs.com_coco1s_p_5499469.html]: http://www.cnblogs.com/coco1s/p/5499469.html
[http_caibaojian.com_jquery-extend-and-jquery-fn-extend.html]: http://caibaojian.com/jquery-extend-and-jquery-fn-extend.html
[https_segmentfault.com_a_1190000000766541]: https://segmentfault.com/a/1190000000766541