前端面试中遇到的一些问题总结

Posted by liveipool on September 10, 2017

前端面试中遇到的一些问题总结

在面试中,多少会被问到一些以前不太了解或者了解得不够深入的地方,经常在面试结束后也会下来查阅资料了解一下,但如果不记录,可能以后也会忘记,因此在下文中进行一些,不断总结,不断提高。

业务逻辑是什么

业务逻辑是由客户的需求所决定的。也就是客户的逻辑。

常用的meta头

< meta > 标签提供关于 HTML 文档的元数据。元数据不会显示在页面上,但是对于机器是可读的。元数据可用于浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他 web 服务。属性:name,content,charset.

为什么CSS放前面JS放后面

css和js都是阻塞加载,CSS放在前端是页面渲染时首先是根据DOM结构生成一个DOM树然后加上CSS样式生成一个渲染树,如果CSS放在后面可能页面会出现闪跳的感觉,或者是白屏或者布局混乱样式很丑直到CSS加载完成,而默认情况下,CSS 被视为阻塞渲染的资源,这意味着浏览器将不会渲染任何已处理的内容,直至 CSSOM 构建完毕。 js是阻塞加载,会影响页面加载的速度,如果js文件比较大,算法也比较复杂的话,影响更大。所以js文件一般放在后面。

为什么js必须要阻塞加载:

  1. JS 有可能会修改 DOM. 典型的,可能会有 document.write. 这意味着,在当前 JS 加载和执行完成前,后续所有资源的下载有可能是没必要的。这是 JS 阻塞后续资源下载的根本原因。
  2. JS 的执行有可能依赖最新样式。比如,可能会有 var width = $(‘#id’).width(). 这意味着,JS 代码在执行前,浏览器必须保证在此 JS 之前的所有 css(无论外链还是内嵌)都已下载和解析完成。这是 CSS 阻塞后续 JS 执行的根本原因。

移动Web开发和PC Web开发有何不同:

  1. 手机浏览器是webkit的天下,相对来说需要兼容的东西更少。
  2. 手势不同。
  3. 网络加载速度不同。
  4. 移动web开发主要分为三种:Native App,Web App,Hybrid App

怎么提高移动端页面的渲染性能

针对移动端网络,考察你是否能从减少HTTP请求出发提出解决方案,是否了解GPU渲染(偏进阶)等:其实在现今的市场里,大多数的智能手机都具备有GPU(图形处理器)。原生应用程序Native App之所以能够为用户提供流畅的用户体验是因为它能够直接启动GPU。也就因为这一点,Web应用程序的用户体验大大的落后于Native App。有鉴于此,其实我们可以好好的利用GPU来加速提升Web应用程序里的动画渲染性能。让它跑起来一点都不卡!:使用css3开启gpu硬件加速提升jquery的动画渲染性能

老板反馈页面打开白屏,而你手机上是正常的,怎么办?

问老板手机系统,浏览器类型,版本之类的,查看前端监控日志。

我页面上有个动画一卡一卡的性能不行,怎么优化?

减少reflow,repaint,CPU,GPU分工,函数节流,防抖:防抖技术即是可以把多个顺序地调用合并成一次,也就是在一定时间内,规定事件被触发的次数。

XSS、CSRF

xss主要是注入攻击,用户过度信任网站,放任来自此网站的代码任意执行,如果没有浏览器的安全机制限制,xss代码可以在用户浏览器为所欲为。csrf是身份伪造,网站过分信任用户,放任来自所谓通过访问控制机制的代表合法用户的各种请求。

fetch

了解fetch API。Fetch API 是近年来被提及将要取代 XHR 的技术新标准,是一个 HTML5 的 API。Fetch 并不是 XHR 的升级版本,而是从一个全新的角度来思考的一种设计。Fetch 是基于 Promise 语法结构,而且它的设计足够低阶,这表示它可以在实际需求中进行更多的弹性设计。对于 XHR 所提供的能力来说,Fetch 已经足够取代 XHR ,并且提供了更多拓展的可能性。

浅复制和深复制

浅复制是复制地址,两个变量指向的还是同一个对象,深复制是复制整个栈,两个变量指向两个不同的对象,这两个对象的值完全相同。深复制一般有几种方法:1.递归复制。2.先json.stringify再json.parse。

有哪些缓存机制,头文件字段

写给前端的http缓存详解前后端交互中涉及到的缓存大公司里怎样开发和部署前端代码? 只是看了一些博客,等到看了《http权威指南》后再详细总结一下这里。

js 汉字转拼音,怎样设计字典库使其体积最小

分类,只需要拼音首字母、需不需要音调、是否是常用字等:JS版汉字与拼音互转终极方案,附简单的JS拼音

面试题总结网站

前端开发面试题

赞赏码.jpeg