其实就是在代码执行过程中,为其确定一个适当的执行顺序
- 全局环境下的变量定义、函数声明
- 局部环境下的变量定义、函数声明,this和arguments的确定
this的值在执行时才能确认值,定义时无法确认
- a. 前后端之间通过HTTP请求进行交互,前端获取到数据后,进行页面的渲染
- c. 前后端互相不依赖,并行开发
- a. 拆分:将JS代码按功能逻辑拆分成多个可复用的JS代码模块
- b. 加载:如何将模块进行按需加载和输出,实现各个模块之间通信
- c. 依赖管理:管理模块之间的依赖
- a. 此技术在业内是否已开始普及
- b. 是否有很好的被维护,生命周期要长
业务:根据业务选择对应的技术 - a. 初创企业要求“灵活”
- b. 成熟企业要求“可靠”
- c. 有一个暂时性死区
- a. 用来声明常量,声明后必须初始化赋值
- d. 有一个暂时性死区
- a. 对于缓存的JS文件通过后缀来设置独一无二的版本标识
- b. 后端每次传一份资源配置文件,前端根据这个配置文件和LS中缓存的文件进行版本标识匹配,从而决定是利用LS缓存还是重新请求
- absolute:绝对定位,相对于static定位以外的第一个父元素定位
- fixed:绝对定位,相对于浏览器窗口进行定位
- relative:相对定位,相对于其正常位置进行定位
- static:默认值,没有定位,元素出现在正常的流中
- a. 发送端首先发送一个数据包给接收端
- b. 接收端收到后回传一个数据包确认收到
- c. 发送端发送一个数据包给接收端表示握手结束
- a. 页面样式调试麻烦,出现多个滚动条
- b. 浏览器后退按钮失效
- c. 过多会增加服务器的HTTP请求;
- a. 加载顺序:link遇到即加载,@import等到页面全部被下载才加载
- 1,使用import方法导入样式表。
- 2,将样式表放在页面底部
- 3,有几个样式表,放在html结构的不同位置。其实原理很清楚:当样式表晚于 结构性html 加载,当加载到此样式表时,页面将停止之前的渲染。此样式表被下载和解析后,将重新渲染页面,也就出现了短暂 的 花屏现象。解决方法:使用LINK标签将样式表放在文档HEAD中更多
- b. 将构造函数的作用域赋给新对象(this指向这个新对象)
- c. 执行构造函数中代码(为这个对象添加属性)
- b. 被观察者管理内部pending,fulfilled和rejected的状态转变,同时通过构造函数中传递的resolve和reject方法以主动触发状态转变和通知观察者
- a. 首先会将所有需要加载的资源进行分类
- b. 根据浏览器相关安全策略,决定资源的加载权限(通过页面HTTP请求头的Content-Security-Policy字段来限制)
- c. 对各个资源的加载优先顺序进行计算和排序(核心)
- d. 根据加载优先顺序来加载资源
(23) 手写一个深度遍历
影响 DomContentLoad和load时间,进而影响依赖他们的代码的执行的开始时间
(25) 你怎么看待前后端分离?
前后端分离,是为了批次更好!
其实,它是一种web应用的架构模式
(26) 为什么要前后端分离?
提升代码开发效率,解耦前后端
(28) 怎么做的技术选型?
作用相同,区别仅仅在于接收参数的方式不同,call()的第二个参数必须逐个列举出来
(32) 水平垂直居中方案:
使用弹性布局(不定高)
可视区域渲染完毕,对于用户来说可用时,必须加载的资源请求队列,叫做关键请求链
利用 LocalStorage 对部分请求的数据和结果进行缓存
(34) 找到数组中的最大值
(35) 可以在某个整数范围内随机选择一个值
defer
: 是早 HTML4 中提出的,用于开启新的线程下载脚本文件,并使脚本在文档解析完(所有元素解析完成之后,DOMContentLoaded事件触发之前)成后执行
async
:是 HTML5 标准中提出的,用于异步下载脚本文件,下载完毕立即解释执行代码
(39) 通过匿名函数来模拟块级作用域
(40) 创建一个作用域安全的构造函数
(45) 原型链和继承
不借助临时变量,进行两个整数的交换:
找出下列正数组的最大差值比如:
随机生成指定长度的字符串
caller
是返回一个对函数的引用,该函数调用了当前函数;
callee
是返回正在被执行的function函数,也就是所指定的function对象的正文。
的非标准行为。为了支持在网络标准被广泛采用前,就已经建好的网站,这么做是必要的。在标准模式下,行为即(但愿如此)由 HTML 与 CSS 的规范描述的行为。在接近标准模式下,只有少数的怪异行为被实现。
那么所谓标准模式,就一定都“标准”吗?答案当然是否定的,因为各个浏览器厂商实现标准的阶段不同,所以各个浏览器的“标准模式”之间也会有很大的不同。
Firefox、Safari、Chrome、Opera (自 7.5 以后)、 IE8 和 IE9 都有一个准标准模式。那么既然标准模式都不那么标准,准标准的模式肯定就更不标准了。
(52) 如何要求容器在宽度自由很缩的情况下,A/B/C的宽度始终是1:1:1,
浏览器会使渲染树中受到影响的部分失效,并重新构造渲染树。这个过程称为“重排”。完成重排后,浏览器会重新绘制受影响的部分到屏幕中,该过程称为重绘。
改变颜色只会引起重绘,因为其没有改变元素的几何属性。
(57) 数据双向绑定原理:常见数据绑定的方案
(58) 监听数组的变化:
(59) Vue 之所以引入了 Virtual DOM,更重要的原因是为了解耦 HTML 依赖,这带来两个非常重要的好处是:
不再依赖 HTML 解析器进行模版解析,可以进行更多的 AOT 工作提高运行时效率:通过模版 AOT 编译,Vue 的运行时体积可以进一步压缩,运行时效率可以进一步提升;
可以渲染到 DOM 以外的平台,实现 SSR、同构渲染这些高级特性,Weex 等框架应用的就是这一特性。
综上,Virtual DOM 在性能上的收益并不是最主要的,更重要的是它使得 Vue 具备了现代框架应有的高级特性。
(63):如果需要手动写动画,你认为最小时间间隔是多久,为什么?(阿里)
多数显示器默认频率是60Hz,即1秒刷新60次,所以理论上最小间隔为1/60*1000ms = 16.7ms
(65) 事件代理/事件委托
本质是为了减少DOM操作来提高性能,原理:利用事件的冒泡原理来实现
ajax的工作原理相当于在用户和服务器之间加了一个中间层(AJAX引擎),使用户操作与服务器响应异步化。并不是所有的用户请求都提交给服务器,像—些数据验证和数据处理等都交给Ajax引擎自己来做, 只有确定需要从服务器读取新数据时再由Ajax引擎代为向服务器提交请求。
Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求,从服务器获得数据,然后用javascript来操作DOM而更新页面。这其中最关键的一步就是从服务器获得请求数据。要清楚这个过程和原理,我们必须对 XMLHttpRequest有所了解。
(68) 异步加载JS的方式有哪些
(69)通用事件侦听器函数
(70) 介绍一下你对浏览器内核的理解
渲染引擎:取得页面上内容进行展示
S引擎:解释和执行JS来实现网页的动态效果
最开始渲染引擎和JS引擎并没有区分的很明确,后来JS引擎越来越独立,内核就倾向于只指渲染引擎
(71) JS有哪几种数据类型
webpack.ensure:把一些js模块给独立出一个个js文件,然后需要用到的时候,在创建一个script对象,加入到document.head对象中即可,浏览器会自动帮我们发起请求,去请求这个js文件,在写个回调,去定义得到这个js文件后,需要做什么业务逻辑操作
require.ensure这个函数是一个代码分离的分割线,表示 回调里面的require
是我们想要进行分割出去的
统计一个字符串出现最多的字母:
随便从数组中拿一位数和后一位比较,如果是想从小到大排序,那么就把小的那一位放到前面,大的放在后面,简单来说就是交换它们的位置,如此反复的交换位置就可以得到排序的效果。
也为折半查找。首先要找到一个中间值,通过与中间值比较,大的放又,小的放在左边。再在两边中寻找中间值,持续以上操作,直到找到所在位置为止。
首先在未排序序列中找到最小(大)元素,存放到排序序列的起始位置,然后,再从剩余未排序元素中继续寻找最小(大)元素,然后放到已排序序列的末尾
//因为一次循环只能交换一个最大的值,所以需要再套一层for循环。
主要使用了观察者模式:
就是一个事件如果频繁触发,会隔一段时间执行一次。
函数节流背后的思想是指某些代码不可以在没有间断的情况下连续重复执行。第一次调用函数,创建一个定时器,在指定的时间间隔之后运行代码。当第二次调用该函数时,它会清除前一次的定时器并设置另一个。如果前一个定时器已经执行过了,这个操作就没有任何意义。然而,如果前一个定时器尚未执行,其实就是将其替换为一个新的定时器。目的是只有在执行函数的请求停止了一段时间之后才执行
(77) 浏览器页面资源加载优化过程与优化
当一个浏览器截获到一个页面请求后,将会按照顺序做下面事情
为跨浏览器而生的一种布局方式
我这个元素里的子孙元素,不会影响外部元素的布局
产生 BFC 方式如下:
- 2xx:表示成功处理:如 200
- 3xx:需要重定向,浏览器直接跳转
- 4xx:客户端请求错误,如404
行内元素和块元素区别:
- b. 对margin仅设置左右方向有效,上下无效;padding设置上下左右都有效,即会撑大空间
- c. 不会自动进行换行
- c. 默认排列方式为从左到右
border-box:IE盒子模型,通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。
那么,元素最终宽度:100px
设置的padding只会向内挤压内容区域的宽度
柯里化是这样的一个转换过程,把接受多个参数的函数变换成接受一个单一参数(注:最初函数的第一个参数)的函数,如果其他的参数是必要的,返回接受余下的参数且返回结果的新函数。
前端需要注意哪些SEO?
- (3) 重要内容HTML代码放在最前:搜索引擎抓取HTML顺序是从上到下,有的搜索引擎对抓取长度有限制,保证重要内容一定会被抓取
- (4) 重要内容不要用js输出:爬虫不会执行JS获取内容
- (6) 提高网站速度,网站速度是搜索引擎排序的一个重要指标
Web开发中会话跟踪的方法:
什么是web语义化,有什么好处?
web语义化包含了 HTML标签的语义化和CSS命名的语义化
- (1) 去掉样式后页面呈现清晰的结构
- (2) 盲人使用读屏器更好的阅读
- (3) 搜索引擎更好的理解页面,有利于收录
- (4) 使团队项目的可持续运作和维护
- (1) GET: 请求服务器发送某个资源
- (2) PUT: 让服务器用请求的主体部分来创建一个由所请求的URL命名的新文档,或者,如果那个URL已经存在的话,就用这个主体替代它。
- (4) Options: 请求服务器告知其支持的各种功能。
CSS 有哪些继承属性:
JS 有哪些方法定义对象
// 原生事件监听函数
TypeScript 的价值并不是在于编写更少的代码,其价值在于编写更加安全的代码。从长远看来,它能帮我我们利用其工具识别问题并自动填充参数、属性、函数以及更多的东西,从而更有效率的编写出代码。
怎么管理异步: 回调函数、事件监听、观察者模式、promise、队列函数
Session是在服务端保存的一个数据结构,用来跟踪用户的状态,这个数据可以保存在集群、数据库、文件中;
Cookie是客户端保存用户信息的一种机制,用来记录用户的一些信息,也是实现Session的一种方式。
Session保存在服务器端。为了获得更高的存取速度,服务器一般把Session放在内存里。每个用户都会有一个独立的Session。如果Session内容过于复杂,当大量客户访问服务器时可能会导致内存溢出。因此,Session里的信息应该尽量精简。
Session在用户第一次访问服务器的时候自动创建
Session生成后,只要用户继续访问,服务器就会更新Session的最后访问时间,并维护该Session。用户每访问服务器一次,无论是否读写Session,服务器都认为该用户的Session“活跃(active)”了一次。
由于会有越来越多的用户访问服务器,因此Session也会越来越多。为防止内存溢出,服务器会把长时间内没有活跃的Session从内存删除。这个时间就是Session的超时时间。如果超过了超时时间没访问过服务器,Session就自动失效了。
虽然Session保存在服务器,对客户端是透明的,它的正常运行仍然需要客户端浏览器的支持。这是因为Session需要使用Cookie作为识别标志。HTTP协议是无状态的,Session不能依据HTTP连接来判断是否为同一客户,因此服务器向客户端浏览器发送一个名为JSESSIONID的Cookie,它的值为该Session的id(也就是HttpSession.getId()的返回值)。Session依据该Cookie来识别是否为同一用户。
如果客户端浏览器将Cookie功能禁用,或者不支持Cookie怎么办?例如,绝大多数的手机浏览器都不支持Cookie。Java Web提供了另一种解决方案:URL地址重写。
- 最初的时代——web1.0
- 前端的春天——Ajax
对于强制缓存,服务器通知浏览器一个缓存时间,在缓存时间内,下次请求,直接用缓存,不在时间内,执行比较缓存策略。
对于比较缓存,将缓存信息中的Etag和Last-Modified通过请求发送给服务器,由服务器校验,返回304状态码时,浏览器直接使用缓存。
不同之处在于,一是 +0不等于-0,二是NaN等于自身
Set数据结构:类似数组,但是成员的值都是唯一的,没有重复的值(add添加新值)
(1) WeakSet 的成员只能是对象,而不能是其他类型的值
(2) WeakSet 里面的引用不计入垃圾回收机制,如果其他对象不再引用该对象,那么垃圾回收机制会自动回收该对象所占用的内存。
WeakSet 不能遍历,是因为成员都是弱引用,随时可能消失,遍历机制无法保证成员的存在,很可能刚刚遍历结束,成员就取不到了。WeakSet的一个用处,是储存DOM节点,而不用担心这些节点从文档移除时,会引发内存泄漏
Map: 类似于对象,提供了 “值-值”的对应,让对象的键不止可以用字符串,可以使用任何值
Map 的键实际上是跟内存地址绑定的,只要内存地址不一样,就视为两个键。这就解决了同名属性碰撞(clash)的问题,
WeakMap 和Map类似,也是用于生成键值对的集合
(1) WeakMap 只接受对象作为键名(null除外),不接受其他类型的值作为键名
(2) 其次,WeakMap 的键名所指向的对象,不计入垃圾回收机制
(4) 无法清空,即不支持clear方法。
webpack-dev-server主要是启动了一个使用express的Http服务器。它的作用主要是用来伺服资源文件。此外这个Http服务器和client使用了websocket通讯协议,原始文件作出改动后,webpack-dev-server会实时的编译,但是最后的编译的文件并没有输出到目标文件夹