前端知识点十

一世迷离
113 阅读4分钟

91、nexttick

在数据变化后要执行的某个操作，而这个操作需要使用随数据改变而改变的DOM结构的时候，这个操作都应该放进Vue.nextTick()的回调函数中。 先更新数据，后更新视图节点，用于解决数据已经赋值，但是进行dom操作的时候拿到的还是之前的值

92、require.js

  1. 首先，加载的时候，浏览器会停止网页渲染，加载文件越多，网页失去响应的时间就会越长；
  2. 其次，由于js文件之间存在依赖关系，因此必须严格保证加载顺序,依赖性最大的模块一定要放到最后加载，当依赖关系很复杂的时候，代码的编写和维护都会变得困难。
//IE不识别async属性，需要添加 defer
<script src="js/require.js" defer async="true"  data-main="js/main"></script>
// math.js
define(function (){
  var add = function (x,y){
    return x+y;
  };
  return {
    add: add
  };
});
//main.js
require(['math'], function (math){
  alert(math.add(1,1));
});

93、CommonJs

一个单独文件就是一个模块，通过require方法来同步加载要依赖的模块，然后通过extports或则module.exports来导出需要暴露的接口。

  1. 优点：服务器端模块重用，NPM中模块包多，有将近20万个。
  2. 缺点：加载模块是同步的，只有加载完成后才能执行后面的操作，也就是当要用到该模块了，现加载现用，不仅加载速度慢，而且还会导致性能、可用性、调试和跨域访问等问题。Node.js主要用于服务器编程，加载的模块文件一般都存在本地硬盘，加载起来比较快，不用考虑异步加载的方式，因此,CommonJS规范比较适用。然而，这并不适合在浏览器环境，同步意味着阻塞加载，浏览器资源是异步加载的，因此有了AMD CMD解决方案。
  3. 实现：服务器端的 Node.js；Browserify，浏览器端的 CommonJS 实现，可以使用 NPM 的模块，但是编译打包后的 文件体积可能很大；modules-webmake，类似Browserify，还不如 Browserify 灵活；wreq，Browserify 的前身；

94、AMD

  1. 优点：在浏览器环境中异步加载模块；并行加载多个模块；
  2. 缺点：开发成本高，代码的阅读和书写比较困难，模块定义方式的语义不顺畅；不符合通用的模块化思维方式，是一种妥协的实现；
  3. 实现：RequireJS； curl；

95、CMD

  1. 优点：依赖就近，延迟执行 可以很容易在 Node.js 中运行；
  2. 缺点：依赖 SPM 打包，模块的加载逻辑偏重；
  3. 实现：Sea.js ；coolie

96、calc, support, media各自的含义及用法？

  1. @support主要是用于检测浏览器是否支持CSS的某个属性，其实就是条件判断，如果支持某个属性，你可以写一套样式，如果不支持某个属性，你也可以提供另外一套样式作为替补。
@supports (display: flex) { div { display: flex; }}
  1. calc() 函数用于动态计算长度值。 calc()函数支持 "+", "-", "*", "/" 运算；
width: calc(100% - 100px);
  1. @media 查询，你可以针对不同的媒体类型定义不同的样式。
@media screen and (max-width: 300px) {
    body {
        background-color:lightblue;
    }
}

97、页面渲染html的过程？

  1. 浏览器解析html源码，然后创建一个 DOM树。在DOM树中并行请求 css/image/js。
  2. 浏览器解析CSS代码，计算出最终的样式数据。构建CSSOM树。
  3. DOM Tree + CSSOM --> layout树（重排） --> painting树（重绘） --> 渲染树（rendering tree）。渲染树和DOM树有点像，但是是有区别的。 DOM树完全和html标签一一对应，但是渲染树会忽略掉不需要渲染的元素，比如head、display:none的元素等。
  4. 一旦渲染树创建好了，浏览器就可以根据渲染树直接把页面绘制到屏幕上。

98、如何中断ajax请求？

一种是设置超时时间让ajax自动断开，另一种是手动停止ajax请求，其核心是调用XML对象的abort方法，ajax.abort()

99、解构赋值是深拷贝还是浅拷贝

基础类型深拷贝，引用类型浅拷贝

100、css3新增

transition:all 2s ;
transform:translate(100px, 100px);
transform:rotate(30deg, 30deg);
transform:skew(100px, 100px);
transform:scale(1.2, 1.2);

animation:myfirst 3s;
@keyframes myfirst
{
    from {background: red;}
    to {background: yellow;}
}
avatar
文章
阅读
粉丝