前端日常梳理

117 阅读3分钟

相对定位:static(默认值)、relative、absolute、fixed。

1、relative:相对于原来位置移动,元素设置此属性之后仍然处在文档流中,不影响其他元素的布局

**2、absolute:**定位是相对于离元素最近的设置了绝对或相对定位的父元素决定的,如果没有父元素设置绝对或相对定位,则元素相对于根元素即html元素定位

容器属性:

flex-direction flex-wrap align-item justify-content align-content

项目属性:

order(数字越小,越靠前) flex-grow flex-shrink flex-basis align-self
  1. flex:1 是flex: 1 1 auto的简写。flex-grow:当有剩余空间的时候,元素放大的比例。默认值为0,不放大。flex-shrink:当剩余空间不够的时候,元素缩小的比例。默认值为1。flex-basis:再给上面两个属性分配剩余空间之前时,默认为项目本身大小,auto;
  2. 水平垂直方向居中:flex布局、position:absolute+transform
  3. 1像素问题,可以用伪类元素+transform: scal(0.5)
  4. rem布局:rem和em两个单位,rem相当于html根节点字体大小,相当于初始字体大小。meta标签,像素比,不断设置根节点字体大小,document.style.fontSize = clientWidth/10
  5. BFC是块级格式上下文,它是页面中的一块渲染区域,并且有一套渲染规则,它决定了其子元素将如何定位,以及和其他元素的关系和相互作用。可以使用float position: absolte fixed定位实现。

js相关:

call applay bind: 

// ES6 call 实现
Function.prototype.es6Call = function (context) {
  var context = context || window;
  context.fn = this;
  var args = [];
  for (var i = 1, len = arguments.length; i < len; i++) {
    args.push('arguments[' + i + ']');
  }
  const result = context.fn(...args);
  return result;
}
----------------
Function.prototype.es6Bind = function(context, ...rest) {
  if (typeof this !== 'function') throw new TypeError('invalid invoked!');
  var self = this;
  return function F(...args) {
    if (this instanceof F) {
      return new self(...rest, ...args)
    }
    return self.apply(context, rest.concat(args))
  }
}

var func = foo.es3Bind({a: 1}, '1st');
func('2nd');  // 1 100 1st 2nd
func.call({a: 2}, '3rd'); // 1 100 1st 3rd
new func('4th');  //undefined 100 1st 4th

Vue相关知识点

参考资料zhuanlan.zhihu.com/p/101330697

  1.  vue-router: hash模式和history模式,hash模式就是通过window.onhashchange方法监听hash的变化,hashHistory有push和replace方法;history模式利用了H5新增的pushState和replaceState;

  2. router是路由实例,this.router是路由实例,this.router.push; $route指跳转对象,包括path、参数等;

  3. 路由中的钩子函数:全局钩子函数router.beforeEach(to, from, next),单独组件的钩子函数 beforeRouteEnter、afterEnter、beforeRouterUpdate、beforeRouteLeave

webpack优化

  • 缩小文件的搜索范围,配置loader中,include,exclude 
  • 缓存之前构建的js, loader: 'babel-loader?cacheDirectory=true'
  • 提前构建第三方库,dllPlugin:原理是将网页依赖的基础模块抽离出来打包到dll文件中,当需要导入的模块存在于某个dll中时,这个模块不再被打包,而是去dll中获取,而且通常都是第三方库
  • 采用HappyPack开启多线程Loader
  • 压缩代码体积 1、使用treeShaking方式; 2、压缩代码,比如压缩css new OptimizeCssAssetWebpackPlugin();3、代码分割,按需加载。

事件循环

js主线程不断地循环重复从任务队列中读取任务,执行任务,这种执行机制叫做事件循环。任务队列分为微任务队列: process.nextTick,promise ;宏任务队列:setInterval, setTimeout, ui渲染,微任务的优先级要优先于宏任务

HTTP

  • https和http的区别:http协议传输的数据是未加密的,明文传输,因此http传输信息是不安全的; https协议是有ssl+http协议构建的可进行加密传输,更加安全

  • 常见的状态码:301:永久重定向302:临时重定向,401:请求需要验证403:请求的资源禁止被访问500:服务器内部错误

  • 从输入url到页面渲染,发生了什么,1、dns解析,tcp链接,发送http请求,服务处理请求返回http报文,浏览器解析渲染页面

安全方面

  • XSS(跨域脚本攻击)CSRF(跨站请求伪造),xss是向网站A注入JS代码,比如输入框等,a网站如果把这些脚本就执行的话就会遭到脚本的攻击,过滤特殊字符;csrf可以进行同源检测,token验证