相对定位: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
- flex:1 是flex: 1 1 auto的简写。flex-grow:当有剩余空间的时候,元素放大的比例。默认值为0,不放大。flex-shrink:当剩余空间不够的时候,元素缩小的比例。默认值为1。flex-basis:再给上面两个属性分配剩余空间之前时,默认为项目本身大小,auto;
- 水平垂直方向居中:flex布局、position:absolute+transform
- 1像素问题,可以用伪类元素+transform: scal(0.5)
- rem布局:rem和em两个单位,rem相当于html根节点字体大小,相当于初始字体大小。meta标签,像素比,不断设置根节点字体大小,document.style.fontSize = clientWidth/10
- 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
-
vue-router: hash模式和history模式,hash模式就是通过window.onhashchange方法监听hash的变化,hashHistory有push和replace方法;history模式利用了H5新增的pushState和replaceState;
-
router.push; $route指跳转对象,包括path、参数等;
-
路由中的钩子函数:全局钩子函数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验证