zoukankan      html  css  js  c++  java
  • 2019年前端面试题

    CSS选择器有哪些?

    http://www.runoob.com/cssref/css-selectors.html

    CSS中px、em、rem的区别?

    px像素(Pixel)。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。(引自CSS2.0手册)

    PX特点

    1. IE无法调整那些使用px作为单位的字体大小;

    2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位;

    3. Firefox能够调整px和em,rem,但是96%以上的中国网民使用IE浏览器(或内核)。

    em是相对长度单位,相对于当前对象内文本的字体尺寸,如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。(引自CSS2.0手册)

    (任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算,需要在css中的body选择器中声明Font-size=62.5%,这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10,然后换上em作为单位就行了。)

    EM特点 

     1. em的值并不是固定的;

     2. em会继承父级元素的字体大小

    所以我们在写CSS的时候,需要注意两点:

    1. body选择器中声明Font-size=62.5%;

    2. 将你的原来的px数值除以10,然后换上em作为单位;

    3. 重新计算那些被放大的字体的em数值。避免字体大小的重复声明。

    rem是CSS3新增的一个相对单位(root em,根em),这个单位引起了广泛关注。这个单位与em有什么区别呢?区别在于使用rem为元素设定字体大小时,仍然是相对大小,但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身,通过它既可以做到只修改根元素就成比例地调整所有字体大小,又可以避免字体大小逐层复合的连锁反应。目前,除了IE8及更早版本外,所有浏览器均已支持rem。对于不支持它的浏览器,应对方法也很简单,就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小

     

    addClass、removeClass、toggleClass三者的区别?

    .addClass(“className”)方法是用来给指定元素增加类名,也就是说给指定的元素追加样式; 

    .removeClass(“className”)方法是用来给指定的元素移除类名,也就是说给指定元素移除样式; 

    .toggleClass(“className”)方法是用来给脂定的元素增加或移除类名(如果元素的类名存在就移除,如果不存在就增加),也就是说用来给指定的元素进行样式切换(如果元素存在样式则去掉,如果不存在则加上样式)。

    JS有哪些数据类型?

    1,基本类型:字符串类型(string),数字类型(number),布尔类型(boolean)
    2,复杂类型:数组类型(array),对象类型(object),函数类型(function),正则类型(regexp)
    3,空类型:undefine  和 null

    字符串转数字类型方法:1,加减乘除取余 接字符串 隐士转换

                                     2,parseInt(字符串)  转为整数   

                                     3,parseFloat(字符串)  转为浮点数类型  

                                     4,number  (字符串)

     
    数字转字符串类型方法:1,.toString() 

                                     2.string()  一般用于转换NAN和 undefine 

                                     3.连接符+号

    字符串或数字转boolean类型: boolean(字符串)  除false NaN 空字符串  数字0  和undefine   其余转换后都是true

    谈谈document.ready和window.onload的区别?

    最基本的区别:

    1.执行时间

      window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。 
      $(document).ready()是DOM结构绘制完毕后就执行,不必等到加载完毕。

    2.编写个数不同

      window.onload不能同时编写多个,如果有多个window.onload方法,只会执行一个 
      $(document).ready()可以同时编写多个,并且都可以得到执行

    3.简化写法

      window.onload没有简化写法 
      $(document).ready(function(){})可以简写成$(function(){});

    jQuery中.bind() .live() .delegate() .on()区别?

    https://www.cnblogs.com/chenlogin/p/5105710.html

    setTimeout与setInterval的主要区别?

    setTimeout()方法只运行一次,也就是说当达到设定的时间后就出发运行指定的代码,运行完后就结束了,如果还想再次执行同样的函数,可以在函数体内再次调用setTimeout(),可以达到循环调用的效果。

    setInterval()是循环执行的,即每达到指定的时间间隔就执行相应的函数或者表达式,是真正的定时器。

     get和post的区别?

    get把请求的数据放在url上,即HTTP协议头上,其格式为: 以?分割URL和传输数据,参数之间以&相连。 数据如果是英文字母/数字,原样发送, 如果是空格,转换为+, 如果是中文/其他字符,则直接把字符串用BASE64加密,及“%”加上“字符串的16进制ASCII码”。 

    post把数据放在HTTP的包体内(requrest body)。

    get提交的数据最大是2k(原则上url长度无限制,那么get提交的数据也没有限制咯?限制实际上取决于浏览器,(大多数)浏览器通常都会限制url长度在2K个字节,即使(大多数)服务器最多处理64K大小的url。也没有卵用。)。
    post理论上没有限制。实际上IIS4中最大量为80KB,IIS5中为100KB。

    GET产生一个TCP数据包,浏览器会把http header和data一并发送出去,服务器响应200(返回数据);
    POST产生两个TCP数据包,浏览器先发送header,服务器响应100 continue,浏览器再发送data,服务器响应200 ok(返回数据)。

    GET在浏览器回退时是无害的,POST会再次提交请求。

    GET产生的URL地址可以被Bookmark,而POST不可以。

    GET请求会被浏览器主动cache,而POST不会,除非手动设置。

    GET请求只能进行url编码,而POST支持多种编码方式。

    GET请求参数会被完整保留在浏览器历史记录里,而POST中的参数不会被保留。

    GET只接受ASCII字符的参数的数据类型,而POST没有限制

    那么,post那么好为什么还用get?get效率高!。

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

    方法一:localstorge在一个标签页里被添加、修改或删除时,都会触发一个storage事件,通过在另一个标签页里监听storage事件,即可得到localstorge存储的值,实现不同标签页之间的通信。

    方法二:使用cookie+setInterval,将要传递的信息存储在cookie中,每隔一定时间读取cookie信息,即可随时获取要传递的信息。

    token、session的区别?

    session:session 从字面上讲,就是会话。这个就类似于你和一个人交谈,你怎么知道当前和你交谈的是张三而不是李四呢?对方肯定有某种特征(长相等)表明他就是张三。

    session 也是类似的道理,服务器要知道当前发请求给自己的是谁。为了做这种区分,服务器就要给每个客户端分配不同的“身份标识”,然后客户端每次向服务器发请求的时候,都带上这个“身份标识”,服务器就知道这个请求来自于谁了。至于客户端怎么保存这个“身份标识”,可以有很多种方式,对于浏览器客户端,大家都默认采用 cookie 的方式

    服务器使用session把用户的信息临时保存在了服务器上,用户离开网站后session会被销毁。这种用户信息存储方式相对cookie来说更安全,可是session有一个缺陷:如果web服务器做了负载均衡,那么下一个操作请求到了另一台服务器的时候session会丢失。

    token:

    Token的引入:Token是在客户端频繁向服务端请求数据,服务端频繁的去数据库查询用户名和密码并进行对比,判断用户名和密码正确与否,并作出相应提示,在这样的背景下,Token便应运而生。

    Token的定义:Token是服务端生成的一串字符串,以作客户端进行请求的一个令牌,当第一次登录后,服务器生成一个Token便将此Token返回给客户端,以后客户端只需带上这个Token前来请求数据即可,无需再次带上用户名和密码。最简单的token组成:uid(用户唯一的身份标识)、time(当前时间的时间戳)、sign(签名,由token的前几位+盐以哈希算法压缩成一定长的十六进制字符串,可以防止恶意第三方拼接token请求服务器)。

    使用Token的目的:Token的目的是为了减轻服务器的压力,减少频繁的查询数据库,使服务器更加健壮。

     

     cookie,localStorage和sessionStorage的区别?

    共同点:都是保存在浏览器端、且同源的 
    区别: 
    1、cookie数据始终在同源的http请求中携带(即使不需要),即cookie在浏览器和服务器间来回传递,而sessionStorage和localStorage不会自动把数据发送给服务器,仅在本地保存。cookie数据还有路径(path)的概念,可以限制cookie只属于某个路径下 
    2、存储大小限制也不同,cookie数据不能超过4K,同时因为每次http请求都会携带cookie、所以cookie只适合保存很小的数据,如会话标识。sessionStorage和localStorage虽然也有存储大小的限制,但比cookie大得多,可以达到5M或更大 
    3、数据有效期不同,sessionStorage:仅在当前浏览器窗口关闭之前有效;localStorage:始终有效,窗口或浏览器关闭也一直保存,因此用作持久数据;cookie:只在设置的cookie过期时间之前有效,即使窗口关闭或浏览器关闭 
    4、作用域不同,sessionStorage不在不同的浏览器窗口中共享,即使是同一个页面;localstorage在所有同源窗口中都是共享的;cookie也是在所有同源窗口中都是共享的 
    5、web Storage支持事件通知机制,可以将数据更新的通知发送给监听者 
    6、web Storage的api接口使用更方便

    HTTP1.0、HTTP1.1 和 HTTP2.0 的区别?

    1、HTTP的历史

    早在 HTTP 建立之初,主要就是为了将超文本标记语言(HTML)文档从Web服务器传送到客户端的浏览器。也是说对于前端来说,我们所写的HTML页面将要放在我们的 web 服务器上,用户端通过浏览器访问url地址来获取网页的显示内容,但是到了 WEB2.0 以来,我们的页面变得复杂,不仅仅单纯的是一些简单的文字和图片,同时我们的 HTML 页面有了 CSS,Javascript,来丰富我们的页面展示,当 ajax 的出现,我们又多了一种向服务器端获取数据的方法,这些其实都是基于 HTTP 协议的。同样到了移动互联网时代,我们页面可以跑在手机端浏览器里面,但是和 PC 相比,手机端的网络情况更加复杂,这使得我们开始了不得不对 HTTP 进行深入理解并不断优化过程中

    详细介绍:https://mp.weixin.qq.com/s/GICbiyJpINrHZ41u_4zT-A

    http和https的区别?https的原理?

    https://www.cnblogs.com/wqhwe/p/5407468.html

    WebSerivce与WebAPI的区别

    https://www.cnblogs.com/niuniu1985/p/8425709.html

     
    前端性能优化方案有哪些
    https://www.cnblogs.com/MarcoHan/p/5295398.html
    1. 减少 HTTP请求数
    (1). 从设计实现层面简化页面
    (2). 合理设置 HTTP缓存
    (3). 资源合并与压缩
    (4). CSS Sprites
    (5). Inline Images-->使用 data: URL scheme的方式将图片嵌入到页面或 CSS中,如果不考虑资源管理上的问题的话,不失为一个好办法。如果是嵌入页面的话换来的是增大了页面的体积,而且无法利用浏览器缓存。使用在 CSS中的图片则更为理想一些。
    (6). Lazy Load Images(自己对这一块的内容还是不了解)
    2. 将外部脚本置底(将脚本内容在页面信息内容加载后再加载)
    3. 异步执行 inline脚本(其实原理和上面是一样,保证脚本在页面内容后面加载。)
    4. Lazy Load Javascript(只有在需要加载的时候加载,在一般情况下并不加载信息内容。)
    5. 将 CSS放在 HEAD中
    6. 异步请求 Callback(就是将一些行为样式提取出来,慢慢的加载信息的内容)
    7. 减少不必要的 HTTP跳转
    8. 避免重复的资源请求-->这种情况主要是由于疏忽或页面由多个模块拼接而成,然后每个模块中请求了同样的资源时,会导致资源的重复请求
    9. Javascript代码块优化
    10.CSS选择符
    11. HTML优化
    12. Image压缩
     
    各浏览器兼容性问题?
    https://blog.csdn.net/xustart7720/article/details/73604651/
    https://www.cnblogs.com/alongup/p/9018396.html
     
    HTML5和传统HTML的区别?
    https://www.cnblogs.com/jerry666/p/5093526.html
     
    CSS3新特性有哪些?
    https://blog.csdn.net/lxcao/article/details/52797914
     
    ES6新特性有哪些?
    ECMAScript 6 简称 ES6,是 JavaScript 语言的下一代标准,已经在2015年6月正式发布了。它的目标是使得 JavaScript 语言可以用来编写复杂的大型应用程序,成为企业级开发语言。 
    ECMAScript 和 JavaScript 的关系:前者是后者的语法规格,后者是前者的一种实现
    ES7、ES8新特性?

    ES7在ES6的基础上主要添加了两项内容:

    • Array.prototype.includes()方法
    • 求幂运算符(**)

    ES8特性:

    主要新功能:

    • 异步函数 Async Functions(Brian Terlson)
    • 共享内存和Atomics(Lars T. Hansen)

    次要新功能:

    • Object.values / Object.entries(Jordan Harband)
    • String padding(Jordan Harband,Rick Waldron)
    • Object.getOwnPropertyDescriptors() (Jordan Harband,Andrea Giammarchi)
    • 函数参数列表和调用中的尾逗号(Jeff Morrison)

     

    对HTML5 websocket的了解?

    WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。

    WebSocket 使得客户端和服务器之间的数据交换变得更加简单,允许服务端主动向客户端推送数据。在 WebSocket API 中,浏览器和服务器只需要完成一次握手,两者之间就直接可以创建持久性的连接,并进行双向数据传输。

    在 WebSocket API 中,浏览器和服务器只需要做一个握手的动作,然后,浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。

    现在,很多网站为了实现推送技术,所用的技术都是 Ajax 轮询。轮询是在特定的的时间间隔(如每1秒),由浏览器对服务器发出HTTP请求,然后由服务器返回最新的数据给客户端的浏览器。这种传统的模式带来很明显的缺点,即浏览器需要不断的向服务器发出请求,然而HTTP请求可能包含较长的头部,其中真正有效的数据可能只是很小的一部分,显然这样会浪费很多的带宽等资源。

    HTML5 定义的 WebSocket 协议,能更好的节省服务器资源和带宽,并且能够更实时地进行通讯。

    浏览器通过 JavaScript 向服务器发出建立 WebSocket 连接的请求,连接建立以后,客户端和服务器端就可以通过 TCP 连接直接交换数据。

    当你获取 Web Socket 连接后,你可以通过 send() 方法来向服务器发送数据,并通过 onmessage 事件来接收服务器返回的数据。

    http://www.runoob.com/html/html5-websocket.html

    React_Flux入门

    https://blog.csdn.net/i10630226/article/details/54984299

     
  • 相关阅读:
    C# CSV文件读写
    C# 串口通信
    VS项目平台的x86,x64,Any CPU区分
    TcpClient 简单通讯示例
    大龄屌丝自学笔记Java零基础到菜鸟015
    大龄屌丝自学笔记Java零基础到菜鸟011
    大龄屌丝自学笔记Java零基础到菜鸟018
    大龄屌丝自学笔记Java零基础到菜鸟019
    大龄屌丝自学笔记Java零基础到菜鸟017
    大龄屌丝自学笔记Java零基础到菜鸟013
  • 原文地址:https://www.cnblogs.com/cristina-guan/p/10380788.html
Copyright © 2011-2022 走看看