前端的一些理论知识

最新推荐文章于 2023-06-13 15:12:07 发布

哼唧怪的嘤嘤怪

最新推荐文章于 2023-06-13 15:12:07 发布

阅读量285

点赞数

分类专栏：前端 html 文章标签： html

前端同时被 2 个专栏收录

24 篇文章 1 订阅

订阅专栏

html

17 篇文章 0 订阅

订阅专栏

渐进增强&优雅降级

优雅降级：一开始就构建站点的完整功能，然后针对浏览器测试和修复；

.transition { /*优雅降级写法*/
          transition: all .5s;
       -o-transition: all .5s;
     -moz-transition: all .5s;
  -webkit-transition: all .5s;
}

渐进增强：一开始只构建站点的最少特性，然后不断针对各浏览器追加功能。

.transition { /*渐进增强写法*/
  -webkit-transition: all .5s;
     -moz-transition: all .5s;
       -o-transition: all .5s;
          transition: all .5s;
}

浏览器兼容问题

 CCS:   *{margin:0; padding:0}

图片默认有间距：
几个img标签放在一起的时候，有些浏览器会有默认的间距，加了问题一中提到的通配符也不起作用。解决: 使用float（浮动）属性为img布局

前端开发的优化问题

(1) 减少http请求次数：css spirit,data uri
(2) JS，CSS源码压缩
(3) 前端模板 JS+数据，减少由于HTML标签导致的带宽浪费，前端用变量保存AJAX请求结果，每次操作本地变量，不用请求，减少请求次数
(4) 用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能
(5) 用setTimeout来避免页面失去响应
(6) 用hash-table来优化查找
(7) 当需要设置的样式很多时设置className而不是直接操作style
(8) 少用全局变量
(9) 缓存DOM节点查找的结果
(10) 避免使用CSS Expression
(11) 图片预载
(12) 避免在页面的主体布局中使用table，table要等其中的内容完全下载之后才会显示出来，显示比div+css布局慢

说说什么是FOUC（无样式内容闪烁）？你如何来避免FOUC？

由于css引入使用了@import 或者存在多个style标签以及css文件在页面底部引入使得css文件加载在html之后导致页面闪烁、花屏用link加载css文件，放在head标签里面

display:none 和 visibility: hidden的区别

display:none 隐藏对应的元素，在文档布局中不再给它分配空间，就当他从来不存在。
visibility:hidden 隐藏对应的元素，但是在文档布局中仍保留原来的空间。

src和href的区别

src 指向外部资源的位置, 用于替换当前元素, 比如js脚本, 图片等元素
href 指向网络资源所在的位置, 用于在当前文档和引用资源间确定联系, 加载css

ajax

$.ajax({  
    type : "POST",  //提交方式  
    url : "……",//路径  
    data : {  
        "org.id" : "${org.id}"  
    },//数据，这里使用的是Json格式进行传输  
    success : function(result) {//返回数据根据结果进行相应的处理  
      
    }  
});

JS闭包

闭包是指有权访问另一个函数作用域中的变量的函数. 创建闭包常见方式,就是在一个函数内部创建另一个函数.
作用: 匿名自执行函数 (function (){ … })(); 创建了一个匿名的函数，并立即执行它，由于外部无法引用它内部的变量，因此在执行完后很快就会被释放，关键是这种机制不会污染全局对象。缓存, 可保留函数内部的值实现封装实现模板