美文网首页
前端常用知识小结

前端常用知识小结

作者: 三寸日光_ | 来源:发表于2018-02-27 17:21 被阅读0次

1.闭包

使用闭包主要是为了设计私有的方法和变量。优点是可以避免全局变量的污染,缺点是闭包会常驻内存,会增大内存使用量,使用不当容易造成内存泄漏。

2.cookie

    一,每个特定于明霞最多生成20个cookie,

            (1)ie6或更低版本最多20个cookie

            (2)ie7和之后的版本最后可以有50个cookie

            (3)firefox最多50个cookie

        (4)chrome和safari没有做硬性限制

    二,cookie的最大 大约为4096字节,为了兼容性,一般不超过4095字节

    优点:极高的扩展性和可用性

        (1)通过良好的编程,控制保存在cookie中的session对象的大小

        (2)通过加密和安全传输技术(ssl),减少cookie被破解的可能性

        (3)只在cookie中存放不敏感数据,即使被盗也不会有重大损失

        (4)控制cookie的生命周期,使之不会永远有效,偷盗者很可能拿到一个       过期的cookie。

    缺点:

        (1)cookie数量和长度的限制,长度超常会被截掉

        (2)安全性问题,如果cookie被人拦截,就可以取得所有的session信息,即使加密也于事无补,因为拦截者原样转发cookie就可以达到目的了。

        (3)有些状态不可能保存在客户端。例如 为了防止重复提交表单会在服   务器保存一个计数器。

    3.浏览器本地存储

        (1)sessionStorage:本地存储一个会话中的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionstorage不是一种持久化的本地存储,仅仅是会话级别的存储。

        (2)localstorage:用于持久化的本地存储,除非主动删除数据,否则数据是永远不会过期的。

    4,webstrage和cookie的区别

        cookie的大小是受限制的,并且每次请求一个新页面的时候cookie都会           被 发送过去,这样无形中浪费了带宽,另外cookie需要指定作用   域,               不  可以跨域调用cookie,需要前端开发者自己封装setcookie,getcookie

3.link和@import的区别

    (1)link是属于html标签,@import是css提供的

    (2)页面被加载时,link会同时被加载,而@import引用的css会等到页面被加载完在加载

    (3)import 只在ie5以上才能识别,而link是html标签,无兼容问题

    (4)link方式的样式的权重高于@import的权重

4.box-sizing属性

    box-sizing:content-box      ------  传统盒模型

    box-sizing:boder-box  -------  宽高包括 border+padding+content

5.BFC(块级格式化上下文)

实例:https://www.jianshu.com/p/fc1d61dace7b

BFC:是css中的一个渲染机制,BFC就相当于一个盒子,内部的元素与外部元素互不干扰。它不会影响外部的布局,外部的布局也不会影响到它。

创建BFC:

    (1)float的值不是none

    (2)position的值不是static或者relative

    (3)display的值是inline-block,table-cell,fex,table-caption,inline-flex

    (4)overflow的值不是visible

BFC的特性

    (1)内部的box会在垂直方向上一个接一个的放值

    (2)与同一个BFC的两个相邻的box的margin会发生重叠,与方向无关

    (3)每个元素的左外边距与包含块的左边界相接触(从左到右),即使浮动元素也是如此

    (4)BFC的区域不会与float的元素区域重叠

    (6)计算BFC的高度时,浮动子元素也参与计算

    (7)BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素,反之亦然。

BFC在布局中的应用:

    (1)要阻止margin重叠,只要将两个元素别放在一个BFC即可

    (2)避免高度塌陷:父元素设置为overflow:hidden,因为在创建BFC时,子浮动元素也会参与高度计算

    (3)与浮动元素相邻的已生成BFC的元素,不能与浮动元素相互覆盖。利用该特性可以作为多栏布局的一种实现方式,特点在于左右两栏的宽度固定,中间栏可以根据浏览器宽度自适应。

6.null和undefined的区别

    undifined : 无 的原始值,转换为数字为NAN

        (1)变量被声明了,但没有被赋值,为undifined

        (2)调用函数时,应该提供的参数没有提供,改参数等于undifined

        (3)对象么有赋值的属性,改属性的值为undifined

        (4)函数没有返回值时,默认返回undifined

    null:一个无的对象 转换为数值时为0

        (1)作为函数的参数,表示该函数的参数不是对象

        (2)作为对象原型链的终点

7.document.write   innerHTML的区别:前者是重绘整个页面,后者是可以重绘页面的一部分

8.

9.css 居中

(1)水平居中

        1.   .parent{ text-align:center}  .child{ display:inline-block}

        2    .child{ display:table;  margin:0 auto}

        3.   .parent{position:relative}   .child{  position:absolute;left:50%;transform:translateX(-50%)}

        4  .   .parent{ display:flex; justify-content: center}

    (2)垂直居中

        1.  .parent{ display:flex; align-items:center}

        2. .parent{ display:table-cell; vertical-align:middle}

        3.   .parent{ display:relative}  .child{position:absolute; top:50%; transform:translateY(-50%)}

相关文章

  • 前端常用知识小结

    1.闭包 使用闭包主要是为了设计私有的方法和变量。优点是可以避免全局变量的污染,缺点是闭包会常驻内存,会增大内存使...

  • 前端知识小结

    学习前端也一段时间了,水平依旧是远远不够,在未来的学习道路上,先停一下,回头看看,梳理下知识点,所理解的,希望能使...

  • 前端charts常用小结

    图表插件 jquery插件使用举例: json数组 JS遍历json对象 或者 通过JS动态添加table的tr,...

  • 前端知识个人总结链接

    各类全总结 常用全总结 链接 全栈练习 链接 前端面试知识总结 链接 工作其它知识学习 链接 前端优化 前端优化 ...

  • 二、flask开发基础与入门

    一、web开发基础 1、前端知识 前端开发基础: HTML CSS JavaScript 前端常用的库与框架: b...

  • 前端常用设计模式小结

    设计模式就高阶程序员必备技巧,下面小结了8种常用模式: 1.单例模式2.构造器模式3.建造者模式4.代理模式5.外...

  • 常用前端知识积累

    闭包的理解 使用闭包主要是为了设计私有的方法和变量。 优点是可以避免全局变量的污染, 缺点是闭包会常驻内存,会增大...

  • 前端常用小知识

    1. css 一行文本超出… 2.多行文本超出显示… 3.IOS 手机容器滚动条滑动不流畅 4.修改滚动条样式 隐...

  • 前端知识HTML常用标签

    什么是结构 表现 行为html 用于描述页面的结构css用于控制页面中元素的样式javascript用于响应用户操...

  • 《为未知而教,为未来而学》[美]戴维.珀金斯

    今观后小结与简评: 1.作者提出,具有生活价值的知识,是指在日常生活中经常用得上的知识,即实用性知识。提倡教学应该...

网友评论

      本文标题:前端常用知识小结

      本文链接:https://www.haomeiwen.com/subject/fdeozxtx.html