html
.行元素与块元素区别
行元素宽高不能设置 padding margin水平方向有效，垂直方向无效。
css
IFC BFC GFC KFC
flex
flex容器属性 felx-direction flex-wrap flex-flow just-content align-items
flex项目属性 flex：flex-grow flex-shink flex-basic
flex-grow：1 会让项目充满空间
flex:1 == flex:1,1,auto 按照内容填充满
flex:1,1,0 根据flex-grow：决定
grid
grid-template-rows：每行的高度
grid-template-cloume：每列的宽度
怎样减少重绘和重排
重绘：部分渲染树（或者整个渲染树）需要重新分析并且节点尺寸需要重新计算。这被称为重排。注意这里至少会有一次重排-初始化页面布局。
重排：由于节点的几何属性发生改变或者由于样式发生改变，例如改变元素背景色时，屏幕上的部分内容需要更新。这样的更新被称为重绘。
具体措施：
1.不要逐个操作样式，最好通过添加类名
2.先display none在display block
3.复制你即将更新的节点，在副本上工作，然后将之前的节点和新节点交换。
响应式正方形
1.<div id="div"></div>
position: absolute;
border: 1px solid red;
padding: 0 20% 20% 0;
}
2. .container{
width:100%;
position:relative;
display: inline-block;
}
.container:after{
content:'';
display: block;
margin-top: 100%;
}
.content{
position:absolute;
left:0;
right:0;
top:0;
bottom: 0;
background-color: silver;
}
JS
函数的节流与防抖
const debounce = function(handle, time) {
let timer = null;
return function() {
let _self = this;
let _args = arguments;
clearTimeout(timer)
timer = setTimeout(function() {
handle.apply(_self, _args);
}, time);
}
}
var throttle = function(handle, time) {
var lastTime = 0;
return function() {
var nowTime = new Date().getTime();
if (nowTime - lastTime > time) {
handle.apply(this, arguments);
lastTime = nowTime;
}
}
}
ajax
function ajax(params) {
var params = params || {};
var data = params.data || {};
var async = params.async || true;
var url = params.url || "";
var success = params.success || function() {};
var type = (params.type || "GET").toUpperCase();
var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP") ?
xhr.open(type, url, async);
xhr.setRequetHeader("Content-type", "applicetion/x-www-form-urlcoded");
xhr.send(data);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
success(xhr.resposeText);
}
}
}
}
get和post区别
1.get发送请求在url后面数据 post则在请求头部（安全）
2.set要设置请求头部 set（数据量）
3.效率 get比post快
4.缓存 get默认缓存 post不会
.闭包
闭包概念：函数在定义时的词法作用域以外的地方被调用，依然保留了对原来词法作用域的引用，该引用就叫做闭包；
产生闭包的原因：函数可以记住并访问所在的词法作用域时，就产生了闭包。
词法作用域：定义词法阶段的作用域；
闭包作用：
手写bind函数
Function.prototype.newbind = function(target){
target = target||window;
var self = this;
var args = [].slice.call(arguments,1);
var tmp = function (){}
var F = function(){
var _arg = [].slice.call(arguments)
return self.apply(this instanceof tmp?this:target,args.concat(_arg));
}
tmp.prototype = this.prototype;
F.prototype = new tmp();
return F;
}
promise、setTimeout、async/await的执行顺序
async function async1() {
console.log("async1 start");
await async2();
console.log("async1 end");
}
async function async2() {
console.log( 'async2');
}
console.log("script start");
setTimeout(function () {
console.log("settimeout");
},0);
async1();
new Promise(function (resolve) {
console.log("promise1");
resolve();
}).then(function () {
console.log("promise2");
});
console.log('script end');
script start
async1 start
async2
promise1
script end
async1 end
promise2
settimeout
先同步 遇见awit让出线程 让后面的同步走 promise对象是同步 then catch是异步》setimeout
BOM
window location navigator screen open close console alert confirm setinterval sertimeout
DOM
DOM是由节点组成的。节点又分为标签节点、属性节点、文本节点。
通过JavaScript，我们可以重构整个HTML页面文档。可以添加、移除、改变或重排页面上的项目。要改变页面的某个东西（即动态改变），JavaScript就需要获得对HTML文档中所有元素进行访问的入口。这个入口，连同对HTML元素进行添加、移动、改变或移除的方法和属性，都是通过文档对象模型（DOM）来获得的。
建议
1.语法糖
2.promise怎么实现
3.反射和代理
4css 如何减少重绘和重排 普通层 iframe跨域 houdini ifc bfc
5.node.js socket.io
6.函数时编程 响应式编程
7.virture Dom dom def angular 依赖服务 IOC SSR
8.webpack4 gulp webpack原理 loader ast
9.http code
10 前端安全 XSS
网友评论