Interview Points

Web前端面试
（一）
（二）前端最强面经汇总
（三）互联网大厂的面经大全 （阿里、头条、腾讯、美团等）
牛客网做题

HTML & CSS
理解语义化HTML
利用CSS进行网页布局
CSS3动画
CSS - 定位属性position使用详解（static、relative、fixed、absolute）

（面试题一）腾讯QQ音乐前端面经（已offer）--2021/7

1、前端开发需要了解哪些Linux命令
（一）夯实基础系列四：Linux 知识总结
重点：
端口被哪些进程占用：lsof -i tcp:9527
杀死端口号对应进程：kill pid
shell编程: 第一行 #!/bin/bash

2、Flutter有了解过吗？为什么说他的性能可以媲美原生？它有什么优缺点？
Flutter是谷歌的开源的移动UI框架，可以快速在iOS和Android上构建高质量的原生用户界面。
（一）Flutter 是如何做到性能直逼 native 的?
重点：

2.1、有接触过哪些移动端跨平台框架？说下jsBridge？
（一）最火移动端跨平台方案盘点：React Native、weex、Flutter
（二）简易理解JSBridge实现原理
重点：
JSBridge的作用就是让native可以调用web的js代码，让web可以调用原生的代码，实现数据通信，它在做native代码和js代码相互转换的事情。实现数据间的通讯关键是以下两点：
将Native端的接口封装成js接口
将Web端js接口封装成原生接口

3、Vue和React的区别是什么？你觉得哪个好？
Vue官网介绍: 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。
React官网介绍：React 是一个用于构建用户界面的 JavaScript 库。
（一）Vue和React的区别是什么
（二）Vue设计者尤雨溪亲自答
重点：
使用上，Vue 使用的是 web 开发者更熟悉的模板与特性，比如Vue的单文件组件是以模板+JavaScript+CSS的组合模式呈现，Vue 比起 React 更容易被前端工程师接受，这是一个直观的感受；React 的特色在于函数式编程的理念和丰富的技术选型，React 则更容易吸引在 FP 上持续走下去的开发者。
实现上，Vue跟React的最大区别在于数据的reactivity，就是反应式系统上。Vue提供反应式的数据，当数据改动时，界面就会自动更新，而React里面需要调用方法SetState。我把两者分别称为Push-based和Pull-based。

4、同源策略及解决同源策略的方法？crsf（Cross-site request forgery：跨站请求伪造）和xss（Cross Site Scripting：跨站脚本攻击）原理，分别举例说明，如何预防？
（一）Web 安全总结(面试必备良药)
反射型xss实战演示
DOM-XSS攻击原理与防御
（二）跨域资源共享 CORS 详解
（三）Content Security Policy 入门教程
Cookie 的 SameSite 属性
（四）HTML 字符实体
重点：
非简单请求是那种对服务器有特殊要求的请求，比如请求方法是PUT或DELETE，或者Content-Type字段的类型是application/json。
非简单请求的CORS请求，会在正式通信之前，增加一次HTTP查询请求，称为"预检"请求（preflight）。

5、什么是Chrome火焰图
（一）前端性能优化之利用 Chrome Dev Tools 进行页面性能分析

6、说下浏览器的进程、线程模型，chrome浏览器有多少个进程？线程模型中的每个线程都是干嘛用的？
(一）浏览器进程/线程模型及JS运行机制
重点：
浏览器是多进程的，有一个主控进程，以及每一个tab页面都会新开一个进程（某些情况下多个tab会合并进程）。
进程可能包括主控进程，插件进程，GPU，tab页（浏览器内核）等等。
Browser进程：浏览器的主进程（负责协调、主控），只有一个
第三方插件进程：每种类型的插件对应一个进程，仅当使用该插件时才创建
GPU进程：最多一个，用于3D绘制
浏览器渲染进程（内核）：默认每个Tab页面一个进程，互不影响，控制页面渲染，脚本执行，事件处理等（有时候会优化，如多个空白tab会合并成一个进程）

每一个tab页面可以看作是浏览器内核进程，然后这个进程是多线程的，它有几大类子线程：
GUI线程
JS引擎线程
事件触发线程
定时器线程
网络请求线程

7、 假设有一个非常复杂耗时的逻辑，代码逻辑已经最优了前提下要你优化，你有哪些办法？（这题其实是考察WebWorker）
（一）Web Worker 使用教程

8、 自己的项目做了哪些性能优化？除了webpack打包之类的优化外，http层面有做了哪些优化？gzip如何开启？gzip有多少个级别（1-9个级别）？
（一）性能优化（一）
性能优化（二）
（一）漫谈 HTTP 性能优化
（一）你真的了解 gzip 吗？

9、cookie的字段有哪些？
（一）cookie的字段有哪些
（二）Cookie 的 SameSite 属性
重点：
Chrome 51 开始，浏览器的 Cookie 新增加了一个SameSite属性，用来防止 CSRF 攻击和用户追踪。

10、输入URL地址后的全过程？

11、为什么说HTTPS是安全的？HTTPS一定是安全的吗？有什么解决办法？HTTPS的证书校验过程是怎样的？（这里一定要说的非常详细）证书校验用到了哪些算法？

12、说出HTTP2至少三个新特性？
（一）浅析HTTP/2的多路复用

13、HTTP缓存机制问题？浏览器的默认缓存时间是多久？
（一）Interview Point (Common Used)
(二)Etag & If-None-Match 专题

（面试题二）社招一年半前端面试记录及思考（阿里、腾讯、百度 offer）--2021/5

14、Vue 模板编译原理

15、Vue 基础知识之 Vue.extend

16、Curriculum Skills：
（1）修改Swig源码：swig-loader支持swig-loader?a/b/index.html?cdn=abc&env=stg两个问号

// plugin.query = parseQuery(plugin.query); // 使用query-string解析查询字符串
plugin.query = loaderUtils.parseQuery(plugin.query || '?'); // 使用loader-utils（webpack工具类）配合loader处理文件

原因:plugin.query = "?a=1"

d = require('querystring')
d.parse('?a=1') // { '?a': '1' } 解析结果不正确

c = require('loader-utils')
c.parseQuery('?a=1') // { a: '1' }

（2）剥离公共代码[发布npm包] (https://segmentfault.com/a/11...：@pa/platform-utils-js包含service.js用Promise封装ajax请求，实现从aladdin->ajax->xhr的优雅降级，browser.js通过window.navigator.userAgent提供运行环境判断，common.js提供异步加载js公共库，页面跳转等方法。
(3)下单页支持动态配置：在后管配置各类权益下单页需要填写的表单字段，包含字段类型（输入、下拉选择、级联选择、日历、地址选择等），是否必填、正则校验规则、依赖的父级字段。前端根据动态字段渲染动态组件，动态关联查询、动态校验，完成下单校验。
（4）编写公共Vue指令：限制输入长度（区分中英文）(https://cn.vuejs.org/v2/guide...

/**
 * 限制输入
 * 限制内容正则表达式由指令绑定值传入，如: v-restrict:15="/\D/" 限制输入非数字，长度限制15个字符
 * @directive: v-restrict
 */
export let restrict = {
  bind(el, binding) {
    const bindLen = isNaN(binding.arg) ? 500 : Number.parseInt(binding.arg)  // 默认限制长度500
    const bindReg = binding.value instanceof RegExp ? binding.value : new RegExp("") // 默认不限制输入内容
    const target = el instanceof HTMLInputElement ? el : el.querySelector("input")
    target.addEventListener("keydown", e => {
      // console.warn('v-restrict -- keydown -- e.target.value', e.target.value); // keydown, keypress 是获取触发事件之前的值
      // 如果HTML5 <input>标签的type=number，则输入字母后，获取的e.target.value变为空
      if (bindReg.test(e.target.value)) { // Regex check
        e.target.value = e.target.value.replace(bindReg, "")
      }
      if (e.target.value.length >= bindLen) {
        e.target.value = getSubStr(e.target.value, bindLen)
      }
      e.target.dispatchEvent(new Event("input"))
    })
    target.addEventListener("keyup", e => {
      if (bindReg.test(e.target.value)) { // Regex check
        e.target.value = e.target.value.replace(bindReg, "")
      }
      if (e.target.value.length >= bindLen) {
        e.target.value = getSubStr(e.target.value, bindLen)
      }
      e.target.dispatchEvent(new Event("input"))
    })

    target.addEventListener("paste", e => {
      if (bindReg.test(e.target.value)) { // Regex check
        e.target.value = e.target.value.replace(bindReg, "")
      }
      if (e.target.value.length >= bindLen) {
        e.target.value = getSubStr(e.target.value, bindLen)
      }
      e.target.dispatchEvent(new Event("input"))
    })
  }
}

（5）优化长列表页面性能：使用记录页面,分页加载
scrollHeight,clientHeight,scrollTop明晰
（4）webpack框架搭建和优化：webpack notes
（5）1积分秒杀活动：
开始前倒计时校准：使用服务器时间，服务器时间 减掉 AJAX从开始发送到接收到响应信息的耗时作为倒计时时间t1。
秒杀同步开始：使用new Date().getTime()来计时，而不是使用setInterval()函数（计时器很不稳定，误差也很大），但时间的显示与程序的逻辑必须基于本地时间和服务器时间求得的时间偏差t。
页面性能优化：压缩图片，小于8kb的图片做用base64编码，减少加载网页图片时对服务器的请求次数
js图片懒加载（可视区域加载）
[window.innerHeight和document.documentElement.clientHeight区别]
使用HTML5中的element.dataset（最好先判断浏览器是否支持dataset属性）
(https://www.cnblogs.com/suiha...
Element.getBoundingClientRect()
img元素srcset属性含义及作用

算法题
1、反转单项链表怎么做?
2、用二分法移除掉一个字符串中所有的字母字符
3、ES6的arr.flat(Infinity))能将数组扁平化，那对象扁平化怎么实现？
{ a:{b: {c: { d: 1 }}}, aa: 2, c: [1, 2] } -->{ 'a.b.c.d': 1, aa: 2, 'c[0]': 1, 'c[1]': 2 }
我的代码：

a = { a:{b: {c: { d: 1 }}}, aa: 2, c: [1, 2] }   
// a = { aa: 2, c: [1, 2] }   
var res = {}
var flatten = function(obj) {
    let res = {}
    function flat(obj, res) {
        for (const key in obj) {
            if (typeof obj[key] === 'object') {
                if (Array.isArray(obj[key])) {
                    for (let index = 0; index < obj[key].length; index++) {
                        if (typeof obj[key][index] === 'object') {
                            let temp =  {}
                                temp[`${key}[${index}]`] = obj[key][index]
                            flat(temp, res)
                        } else {
                            res[`'${key}[${index}]'`] = obj[key][index]
                        }
                    }
                } else {
                    for (const key2 in obj[key]) {
                        let temp = {}
                        temp[`${key}.${key2}`] = obj[key][key2]
                        flat(temp, res)
                    }
                }
            } else {
                res[`'${key}'`] = obj[key]
            }
        }
  }
  flat(obj, res)
  return res
}


console.log(flatten(a));

JavaScript对象的扁平化与反扁平化
JavaScript大数相加相乘实现