码迷,mamicode.com
首页 > 其他好文 > 详细

前端面试题总结

时间:2019-02-26 19:30:37      阅读:159      评论:0      收藏:0      [点我收藏+]

标签:避免   第三方   异步   png   语法   interval   append   拖拽   play   

 

html部分

1.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

  处理兼容问题:

       1. IE8/IE7/IE6支持通过 document.createElement 方法产生的标签,可以利用这一特性让这些浏览器支持 HTML5 新标签,浏览器支持新标签后,还需要添加标签默认的样式(当然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架):

  区分:

     1. DOCTYPE声明新增的结构元素、功能元素

 

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

  创建节点:

     1. createDocumentFragment() 创建一个DOM片段

     2. createElement  创建一个具体的元素

     3. createTextNode  创建一个文本节点

  添加节点:

     1. appendChild()

  移除节点:

     1. removeChild()

  替换节点:

     1. replaceChild()

  查找节点:

     1. getElementByTagName 通过标签名称

     2. getElementById  通过元素的Id

     3. getElementByName 通过元素的name

3.IE 8以下版本的浏览器中的盒模型有什么不同

     1. IE8以下的模拟盒子定义的元素宽高不包含内边距和边框

4.浮动元素引起的问题和解决办法?

  引起问题:

     1. 父元素的高度无法撑开,影响和父元素同行元素

     2. 与浮动元素同级的非浮动元素会紧跟随后

     3.若非第一个元素浮动,则该元素之前的元素也需要浮动,否则会影响页面显示的结构

  解决方法:

     1. 额外标签法:css中的 clear :both (会使HTML结构看起来不够简洁)

     2. after伪类法

     3. 浮动外部元素

     4. 设置overflow:auto或者hide

5.常见兼容性问题

     1. 浏览器兼容问题:各种浏览器的margin和padding不一样

                 解决方式:在全局设置margin:0,padding:0

     2. 浏览器兼容问题:块属性标签float后,又有横行的margin情况下,在IE6显示margin比设置的大 (IE6中后面的一块被顶到下一行)

          解决方式:在float中设置display:inline,转化为行内元素

     3. 浏览器兼容问题:设置较小高度标签(一般小于10px),在IE6,IE7,遨游中高度超出自己设置高度

          解决方式:设置overflow:hidden或设置行高linehight小于你设置的高度    

6.HTML与XHTML——二者有什么区别

     1.元素的嵌套: XHTML要求所有元素必须正确嵌套

     2.  XHTML必须嵌套在<html>根元素中

     3.  XHTML必须标签小写

     4.  XHTML标签必须被关闭,空标签也需要结束符

     5.  两者基本概念不同,HTML是超文本标记语言,XHTML是可扩展超文本标记语言

7.Doctype作用? 严格模式与混杂模式如何区分?它们有何意义?

  作用:

     1. DOCTYPE声明处于文档最前面,处于标签之前,告知浏览器以何种模式渲染文档

  严格模式和混杂模式区分:

     1. 文档包含严格的 DOCTYPE ,那么它一般以严格模式呈现。(严格 DTD ——严格模式)

     2. 包含过渡 DTD 和 URI 的 DOCTYPE ,也以严格模式呈现,但有过渡 DTD 而没有 URI (统一资源标识符,就是声明最后的地址)会导致页面以混杂模式呈现。(有 URI 的过渡 DTD ——严格模式;没有 URI 的过渡 DTD ——混杂模式

     3. DOCTYPE 不存在或形式不正确会导致文档以混杂模式呈现。(DTD不存在或者格式不正确——混杂模式)

     4. HTML5 没有 DTD ,因此也就没有严格模式与混杂模式的区别,HTML5 有相对宽松的语法,实现时,已经尽可能大的实现了向后兼容。( HTML5 没有严格和混杂之分)

  意义:

     1. 严格模式与混杂模式存在的意义与其来源密切相关,如果说只存在严格模式,那么许多旧网站必然受到影响,如果只存在混杂模式,那么会回到当时浏览器大战时的混乱,每个浏览器都有自己的解析模式。   

 

8.说说你对语义化的理解

       1. 去掉或丢失样式还可以让页面呈现清晰的结构

     2. 有利于SEO:和搜索引擎建立良好沟通,有助于爬虫抓取更多的有效信息

     3. 方便其他设备解析

     4. 便于团队开发和维护,语义化更具有可读性,遵循W3C标准团队,可减少差异化

 

9.iframe的优缺点

  优点:

     1. 解决第三方内容图片或广告加载缓慢问题

     2. 并行加载脚本

  缺点:

     1. 会阻塞主页面Onload事件

     2. 无内容,也会出现加载

     3.无语义

10.如何实现浏览器内多个标签页之间的通信

 调用localstorge,cookies等本地存储方式

     1. localstorage

      localstorage在一个标签被添加,修改或删除时,都会触发一个storage事件,通过另一个标签进行监听storage事件,便可获得localstorge存储的值,从而实现不同标签页之间的通信。

     2. cookies

      使用cookies+setInterval,将要传递的信息存储在cookie中,每隔一段时间读取cookie信息,即可随机获得传递的信息。

 

11.webSocket如何兼容低浏览器

  webSocket类似HTTP协议,是为了弥补HTTP协议的缺陷:通信只能服务端发起,HTTP不能做到服务端主动向客服端推送信息。

  解决兼容问题

     1. 使用flash

     2. 使用轮询或长连接的方式实现伪websocket的通信

 

12.线程与进程的区别

  一个程序至少一个进程,一个进程至少一个线程。

     1. 进程拥有独立的堆栈空间和数据段,每启动一个新的进程就要分配一个独立的地址空间;线程有独立的堆栈空间,但是共享数据段。

     2. 通信机制上,进程之间互不干扰,互相独立,通信机制相当复杂;但线程共享数据,通信机制方便。

     3. 同一个进程的所有线程共享该进程的所有资源,不同进程相互独立。

 

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

     1. 文件合并

     2. 文件压缩

     3. cdn托管

     4. 多个域名缓存

 

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

     1. 图片优化

     2. 图像格式选择

     3. CSS优化

     4. 网址后面加斜杆

     5. 标明宽高度

     6. 减少HTTP请求

 

15.你都使用哪些工具来测试代码的性能

    1. JSPerf

    2. Dromaeo

 

16.什么是 FOUC(无样式内容闪烁)?你如何来避免 FOUC?  

    1. 如果使用import方法对CSS进行导入,会导致某些页面在Windows 下的Internet Explorer出现一些奇怪的现象:以无样式显示页面内容的瞬间闪烁,这种现象称之为文档样式短暂失效(Flash of Unstyled Content),简称为FOUC。

    2. 使用LINK标签将样式表放在文档HEAD中。

 

17.null和undefined的区别

    1. null是一个表示"无"的对象,转为数值时为0;undefined是一个表示"无"的原始值,转为数值时为NaN

    2. 当声明的变量还未被初始化时,变量的默认值为undefined

    3. null用来表示尚未存在的对象,常用来表示函数企图返回一个不存在的对象。
      

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

    1. 创建一个空对象,并用this指向该对象,同时继承函数

    2. 属性和方法加入this引用的对象

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

    

19.JSON 的了解

  是一种轻量级的数据交换格式,它基于JavaScript的一个子集,数据格式简单,易于读写,占用带宽小

 

20.js延迟加载的方式有哪些

    1. defer

       HTML4.01为script标签定义了的defer属性,告诉浏览器立即下载,但延迟执行。但只适合外部脚本文件

    2. async

      HTML5为script定义了async属性,和defer一样,只适合外部脚本文件,不让页面等待脚本的下载和执行,从而异步加载页面其他内容

    3. 动态创建DOM

    4. 使用jQuery的getScript

$.getScript("outer.js",function(){//回调函数,成功获取文件后执行的函数  
      console.log("脚本加载完成")  
});

    5. setTimeOut延时

    6. js放最底部,最后加载

 

21. 如何解决跨域问题

  跨域是指一个域下面的文档或脚本试图请求另一个域下的资源

  常见跨域场景

    技术图片

  解决方式

    1. JSONP

    2. NGINX反向代理

      nginx支持配置反向代理,通过反向代理实现网站的负载均衡,通过配置proxy_pass_http配置代理站点,upstream实现负载均衡

    

22.documen.write和 innerHTML的区别

  document.write只会绘制整个页面,innerHTML可以重绘页面的一部分。

 

23. .call() 和 .apply() 的区别和作用?

  JavaScript中的每一个function对象都有一个apply()方法和一个call()方法。

  apply:调用一个对象的一个方法,用另一个对象替换当前对象,例:B.apply(A, arguments);即A对象应用B对象的方法。

  call:调用一个对象的一个方法,用另一个对象替换当前对象,例:B.call(A, ag1,ag2);即A对象调用B对象的方法。   

  相同之处:

    1. 都可以代替另一个对象调用一个方法

  不同之处:

    1. apply最多只能有两个参数,新的this对象和一个数组argArray。

    2. call可以接受多个参数,新的this对象和一串参数列表,主要用于js对象各方法的相互调用。

 

24.js哪些操作会造成内存泄漏?

  内存泄露是指一个分配的内存既不使用,也不能回收,直到浏览器运行结束。

  标记清除:js中最常见的垃圾清除器

  导致内存泄漏的操作:

    1. 意外的全局变量

    2. 闭包

    3. 没有清理的DOM元素引用

    4. 定时器  

 

25.JavaScript中的作用域与变量声明提升

  JavaScript是函数级作用域,不是块级作用域。

  块级作用域:一对花括号{}中的语句集都属于一个块,在其中定义的变量块外都不可见

  变量提升:当一个函数外定义了一个全局变量,而想在函数内改变这个变量的值,可以通过声明一个局部变量。

  

var name="haha";
 function changeName(){
     console.log(name);
     var name="xixi";
 }
 changeName();
 console.log(name);

变量提升

var name="haha";
  function changeName(){
      var name;
      console.log(name);
      name="xixi";
 }
 changeName();
 console.log(name);

26. 如何判断当前脚本运行在浏览器还是node环境中?

  通过判断Global对象是否为window,如果不为window,当前脚本没有运行在浏览器中。

 

27. 什么叫优雅降级和渐进增强?

  优雅降级:以最低要求,实现最基础的功能,向上兼容

  渐进增强:开始先针对较高版本浏览器构建页面,完善功能,再进行各种不同浏览器适配

 

28.WEB应用从服务器主动推送Data到客户端有那些方式

    1. 轮询

    2. 长连接

    3. WebSocket

 

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

  优点:

    1. node基于时间驱动和无阻塞,便于处理并发事件

    2. 交互的客户端用的是相同的语言

  缺点:

    1. node是一个相对新的开源项目,不太稳定

    2. 缺乏较多的第三方库支持

 

30.你有哪些性能优化的方法

    1. 减少http请求次数:CSS源码压缩,图片适当大小,data缓存,图片服务器。

    2. 前端模板js+数据,减少HTML标签导致的带宽浪费,前端使用变量保存ajax请求结果,每次操作本地变量,不用请求,减少请求次数。

    3. 用innerHTML代替DOM,减少DOM的操作次数,优化JavaScript性能

    4. 不要直接设置style,而是通过classname设置

    5. 少用全局变量,缓存DOM节点查找结果,减少IO读取操作(IO指的是input和output)

    6. 图片预加载

 

31.http状态码有那些?分别代表是什么意思?

    1. 200 OK

    2. 301  临时跳转

    3. 304 永久跳转

    4. 400 error

    5. 401 未授权

    6. 403 禁止访问

    7. 404 not found

    8. 500 服务器错误

    9. 503 服务器无法使用

 

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

    1. 当发送一个URL请求,浏览器会开一个线程处理这个请求,同时远程dns服务器启动dns查询,使得浏览器获得相对应的ip。

    2. 浏览器和远程web服务器通过TCP三次握手建立TCP/IP连接。

    3. 一旦TCP/IP建立,浏览器会通过该连接向服务器发送http的get请求,远程服务器找到资源后通过http响应该资源,值为200是一个正确的响应。

    4. web服务器提供资源服务,客户端下载资源,请求返回后,就进入前端模块,浏览器解析HTML生成DOM tree。

 

33.javascript对象的几种创建方式

    1. 工厂模式

    2. 原型模式

    3. 构造函数模式

    4. 混合原型模式和构造函数模式

    5. 动态原型模式

    6. 寄生构造函数模式

    7. 稳妥构造函数模式

 

34.javascript继承的6种方法

    1. 原型链继承 (将父类的实例作为子类的原型)

    2. 借用构造函数继承 ()

    3. 组合继承(原型+借用构造)

    4. 原型式继承

    5. 寄生式继承

    6. 寄生组合式继承

 

35.ajax过程

  ajax = async javascript and xml 异步JavaScript和XML

  ajax是一种创建动态页面,通过后台和服务器进行少量数据交互,ajax可以实现异步更新,实现页面某部分更新。

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

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

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

    4. 发送HTTP请求

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

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

 

36.异步加载和延迟加载

  异步加载:又称非阻塞模式,浏览器下载执行js的同时,还可以进行后续的处理

  实现方法

    1. script DOM Element(async)

    2. onload

  延迟加载:有些js代码在某些情况才需要使用,并不是页面初始化的时候才用到,延迟加载就是为了解决这个问题,js将分成许多模块,初始化只需加载需要立即执行的js,其他js等到第一次使用的时候再加载。

  

前端面试题总结

标签:避免   第三方   异步   png   语法   interval   append   拖拽   play   

原文地址:https://www.cnblogs.com/xx929/p/10439173.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!