本人学习积累的一些知识点分享（1）

最新推荐文章于 2022-04-09 11:38:29 发布

jiepp

最新推荐文章于 2022-04-09 11:38:29 发布

阅读量237

点赞数

文章标签：前端干货

本文链接：https://blog.csdn.net/jiepp/article/details/101145497

版权

本人学习积累的一些知识点分享（1）

为什么要初始化CSS样式

为什么要初始化CSS样式

因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。
最简单的初始化方法就是： * {padding: 0; margin: 0;} （不建议）

cookie 和session 的区别

cookie数据存放在客户的浏览器上，session数据放在服务器上
考虑到安全应当使用session,考虑到减轻服务器性能方面,应当使用cookie
cookie数据存储较小,单个cookie保存的数据不能超过4K,session数据存储较大
所以个人建议：
将登陆信息等重要信息存放为session中
其他信息如果需要保留，可以放在cookie 中

cookie虽然在持久保存客户端数据提供了方便，分担了服务器存储的负担(用户多,cookie的作用就体现了)
cookie优点：极高的扩展性和可用性
cookie缺点：
A.cookie数量和长度的限制（优于cookie是由url键值对的形式传递的）
B.安全性问题 (cookie数据存放在客户的浏览器上)

对canvas的理解

canvas是HTML5中新增一个HTML5标签与操作canvas的javascript API
它可以实现在网页中完成动态的2D与3D图像技术
有一个基于 JavaScript 的绘图API
canvas可以完成动画、游戏、图表、图像处理等原来需要Flash完成的一些功能
SVG 和 VML 使用一个 XML 文档来描述绘图。SVG 绘图很容易编辑与生成，但功能明显要弱一些

WebSocket与消息推送

B/S架构(浏览器客户端/服务器端)的系统多使用HTTP协议，HTTP协议的特点：
A.无状态协议（标准的http协议是无状态的，无连接的）
B.用于通过 Internet 发送请求消息和响应消息
C.使用端口接收和发送消息，默认为80端口

http状态

HTTP是无状态协议,无连接协议
HTTP使用TCP的服务,HTTP本身是无状态协议,TCP是有状态协议
为了读网页用，网页取到了你可能花个10分钟来读它，所以这10分钟连接是没有必要的，所以马上就断开了（节省服务器端资源/无连接）
HTTP每次请求都是独立的（无状态）
所以用户是否还在浏览它的网页服务端不知道，因此就出现了cookie，session这类东西来弥补,让使用HTTP的应用有状态

由于HTTP协议是无状态的协议，所以服务端需要记录用户的状态时，就需要用某种机制来识具体的用户，这个机制就是Session （SessionId）
典型的场景比如购物车，当你点击下单按钮时，由于HTTP协议无状态，它并不知道是哪个用户操作的,所以服务端为特定的用户创建了特定的Session,用于标识这个用户，并且跟踪用户，这样才知道购物车里面有几本书。这个Session是保存在服务端的，有一个唯一标识。
udp是为了提高效率，但是tcp已经很高效了，没必要用udp（udp相当于tcp是高效）
TCP的面向连接是传输层的，而HTTP的无状态则是应用层的

src与href的区别

src用于替换当前元素(路径)，href用于在当前文档和引用资源之间确立联系(例如:超链接)
建议使用link方式来加载css（并行下载资源并且不会停止对当前文档的处理），而不是使用@import方式（因为@import需要页面网页完全载入以后加载）
link支持使用Javascript控制DOM去改变样式,而@import不支持

标签种类

自然样式标签
b, i, u, s, pre
语义样式标签
strong, em, ins, del, code

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

可以调用localstorge、cookies等本地存储方式

Label的作用是什么

label标签来定义表单控制间的关系,当用户选择该标签时，浏览器会自动将焦点转到和标签相关的表单控件上

iframe有那些缺点

iframe会阻塞主页面的Onload事件
搜索引擎的检索程序无法解读这种页面,不利于SEO

浏览器内核的理解

渲染引擎：负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等）,浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同
JS引擎：解析和执行javascript来实现网页的动态效果
最开始渲染引擎和JS引擎并没有区分的很明确，后来JS引擎越来越独立，内核就倾向于只指渲染引擎

vertical-align

与vertical-align对应的是text-align

请指出 JQuery中 “.bind()”、".live()" 和 “delegate()” 的区别

A. bind：把函数直接绑定到指定元素的指定事件上
B. live：把函数绑定到document上，接收选择器和事件类型作为参数，当触发一个元素的事件的时候，会利用事件冒泡到document上这一特性，判断事件目标元素和绑定参数中的选择器是否匹配，如果匹配则执行绑定函数的执行
C. delegate：和live有点类似，但是可以指定绑定元素，而不是document，其他和live一致，但是比live更加灵活

请列举三种减低页面加载时间的方法。

（加载时间指感知的时间或者实际加载时间）

减少实际加载时间 (文件传输时间)
B. 减少 http 请求（合并文件、合并图片）
C. 压缩 JavaScript、CSS 代码
D. 启用服务器压缩传输（如 gzip）
减少感知时间 (代码执行时间)
A. script 外部脚本加载放到最后执行
B. 按需加载资源（如：只加载当前能看到的区域的图片）