1、css兼容性有哪几种处理方案?- 1、css初始化 margin:0;padding:0 2、各自浏览器适应 webkit moz ms 3、css hack 根据不同浏览器写不同的css样式 4、自动化插件(推荐) autoprefixer
2、css新特性 - 1、border-color 设置多种颜色2、border-image3、background-origin 4、text-shadow5、animation transform transition
3、解决margin越界 overflow:hidden 2、加border
4、js的继承方式有哪些? (继承谁谁提供属性)
1、原型链继承 2、借用构造函数继承 call apply 3、组合继承4、寄生继承 5、寄生组合继承
5、深拷贝怎么实现
1、递归2、_obj = jsonstringify(obj); b=jsong.parse(_obj)
6、js的事件轮训机制有了解吗
js单线程的,HTML5提出Web Worker标准,允许JavaScript脚本创建多个线程,但是子线程完全受主线程控制,且不得操作DOM
分同步和异步 同步直接进入主进程 异步放进eventTable 主进程执行结束执行eventtable
for (var i=0;i<=5;i++){
setTimeout(()=>{console.log(i)},1000)
}
先执行完for 然后1秒后输出6个6
但是promise中的是直接执行的
example:
// promise里面的函数是立即执行的
// 分别输出 2 3 5 4 1
setTimeout(function () {
console.log(1)
},0);
new Promise(function executor(resolve) {
console.log(2);
for(var i=0;i<10000;i++){
i==9999 && resolve();
}
console.log(3);
}).then(function () {
console.log(4);
});
console.log(5);
7、apply call
apply 可以接受一个数组作为参数输入, call 则是接受一系列的单独变量。
8、聊聊es6的promise
9、为什么要用async,await
10、http与https的区别
客户端发请求 对称加密 使数据安全 服务端接受请求 ;charles抓包https抓到的都是对称加密过的数据。
11、从输入URL到页面展示发生了什么
浏览器查找域名的 IP 地址 - 浏览器向 web 服务器发送一个 HTTP 请求 - 服务器的永久重定向响应- 浏览器跟踪重定向地址 - 服务器处理请求 - 服务器返回一个 HTTP 响应 - 浏览器解析dom - 解析cssdom - 浏览器显示 HTML
12、移动端适配
meta name="viewport" rem flex布局vw vh
13、vue生命周期
生命周期是从创建到数据初始化挂载更新销毁这个过程(created mounted update destoryed)&before
(methods、computed、data、watch、props)内置
props => methods =>data => computed => watch;触发顺序
14、created和mounted的区别
create在html形成之前执行 不能取到页面dom元素
15、mvvm 框架是什么?
16、vue-router 是什么?它有哪些组件 - route routes router
17、定义动态路由
设置:在router目录下的index.js文件中,对path属性加上/:id
获取:使用router对象的params.id
18、如何减少重绘和回流
使用translate3d开启GPU加速,不要在循环里读取节点的属性值,尽量使用visibility替代display:none
19、service worker
是运行在浏览器背后的独立线程,可用于实现缓存功能,传输协议必须是HTTPS。使用Service-Worker实现缓存功能一般分为三个步骤:首先注册,然后监听install事件缓存需要的文件,最后拦截请求事件,如果缓存中已经有请求的数据就直接使用。
20、性能优化方式
文件压缩,减小资源大小
异步组件,按需加载
小图片转base64,减少请求
雪碧图,减少请求
选择合适的图片格式和尺寸
懒加载,按需加载
css放最上面,js放在body最下面,渲染优化
事件节流,减少操作
减少Dom操作和避免回流,渲染优化
浏览器缓存,减少请求次数或响应数据
减少cookie的使用,减少请求携带大小
21、有哪些方式可以提升webpack的打包速度?
loader:使用include和exclude指定搜索文件的范围。
babel-loader:配置后面加上loader:'babel-loader?cacheDirectory=true'将编译过的文件缓存起来,下次只需要编译更改过的代码文件即可。
HappyPack:使用这个插件开启loader多线程打包。
DllPlugin:将特定的类库提前打包然后引入,减少打包类库的次数,只有当类库更新版本才进行重新打包。
resolve.alias:配置别名,更快找到路径。
module.noParse:确定这个文件没有其他依赖时,让webpack打包时不扫描该文件。
22、LUR -- 先进先出 缓存策略 重复进入排在最前
网友评论