前端知识点汇总—面试看这一篇就够了 (6)

节流(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)

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wpxszg.html