节流(throttle): 每隔一段时间后执行一次,也就是降低频率,将高频操作优化成低频操作,通常使用场景: 滚动条事件 或者 resize 事件,通常每隔 100~500 ms执行一次即可。
function throttle(method, context) { clearTimeout(method.tID); method.tID = setTimeout(function () { method.call(context); }, 1000); }用法:
function showTime() { console.log("nowDate:" + new Date().toLocaleDateString()); } setInterval(function () { throttle(showTime); }, 2000); 模块化模块化开发在现代开发中已是必不可少的一部分,它大大提高了项目的可维护、可拓展和可协作性。通常,我们 在浏览器中使用 ES6 的模块化支持,在 Node 中使用 commonjs 的模块化支持。
分类:
es6: import / export
commonjs: require / module.exports / exports
amd: require / defined
require与import的区别
require支持 动态导入,import不支持,正在提案 (babel 下可支持)
require是 同步 导入,import属于 异步 导入
require是 值拷贝,导出值变化不会影响导入值;import指向 内存地址,导入值会随导出值而变化
oAuth实现方案 如何实现单点登录(Single Sign On)https://www.cnblogs.com/ywlaker/p/6113927.html
请解释SPA(单页应用),优缺点是什么?如何使其对SEO友好单页Web应用(single page web application,SPA),就是只有一张Web页面的应用,是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序。
单页应用SPA 多页应用MPA组成 一个外壳页面和多个页面片段组成 多个完整页面构成
资源共用(css,js) 共用,只需在外壳部分加载 不共用,每个页面都需要加载
刷新方式 页面局部刷新或更改 整页刷新
url 模式 a.com/#/pageone
a.com/#/pagetwo a.com/pageone.html
a.com/pagetwo.html
用户体验 页面片段间的切换快,用户体验良好
由于要一次加载所有的资源(html/js),故首屏加载慢 页面切换加载缓慢,流畅度不够,用户体验比较差
首屏加载很快
转场动画 容易实现 无法实现
数据传递 容易 依赖 url传参、或者cookie 、localStorage等
搜索引擎优化(SEO) 需要单独方案、实现较为困难、不利于SEO检索。
Prerender预渲染优化SEO 实现方法简易
试用范围 高要求的体验度、追求界面流畅的应用 适用于追求高度支持搜索引擎的应用
开发成本 较高,常需借助专业的框架 较低,但页面重复代码多
维护成本 相对容易 相对复杂
https://juejin.im/post/5a0ea4ec6fb9a0450407725c
前端性能优化方案以下是移动端的优化方案,大部分Web端也同样适用
https://juejin.im/post/5965943ff265da6c30653879
设计模式举例(实现、应用、优缺点)https://juejin.im/post/5c2e10a76fb9a049c0432697
前端常用框架对比https://cn.vuejs.org/v2/guide/comparison.html
JS编码规范 浏览器相关 浏览器架构用户界面
主进程
内核
渲染引擎
JS 引擎
执行栈
事件触发线程
消息队列
微任务
宏任务
网络异步线程
浏览器下事件循环(Event Loop)事件循环是指: 执行一个宏任务,然后执行清空微任务列表,循环再执行宏任务,再清微任务列表
微任务 microtask(jobs): promise / ajax / Object.observe(该方法已废弃)
宏任务 macrotask(task): setTimout / setInterval / script / IO / UI Rendering
浏览器解析流程https://segmentfault.com/a/1190000010298038
从输入 url 到展示的过程DNS 解析
TCP 三次握手
发送请求,分析 url,设置请求报文(头,主体)
服务器返回请求的文件 (html)
浏览器渲染
HTML parser --> DOM Tree
标记化算法,进行元素状态的标记
dom 树构建
CSS parser --> Style Tree
解析 css 代码,生成样式树
attachment --> Render Tree
结合 dom树 与 style树,生成渲染树
layout: 布局
GPU painting: 像素绘制页面
功能检测、功能推断、navigator.userAgent的区别功能检测(feature detection)