让前端飞Web前端之路视觉艺术

【建议收藏】2021字节跳动、腾讯、阿里巴巴等一线互联网校招面试

2021-02-03  本文已影响0人  前前前端小飞

HTML 篇

说说 title 和 alt 属性

Html5 有哪些新特性、移除了哪些元素

浏览器是怎么对 Html5 的离线储存资源进行管理和加载的呢

如何使用：

在线的情况下，浏览器发现 html 头部有 manifest 属性，它会请求 manifest 文件，如果是第一次访问 app ，那么浏览器就会根据manifest文件的内容下载相应的资源并且进行离线存储。如果已经访问过 app 并且资源已经离线存储了，那么浏览器就会使用离线的资源加载页面，然后浏览器会对比新的manifest 文件与旧的 manifest 文件，如果文件没有发生改变，就不做任何操作，如果文件改变了，那么就会重新下载文件中的资源并进行离线存储。

iframe有那些缺点？

HTML W3C的标准

标签闭合、标签小写、不乱嵌套、使用外链 css 和 js 、结构行为表现的分离

Doctype作用? 严格模式与混杂模式如何区分？它们有何意义?

HTML全局属性(global attribute)有哪些

viewport的content属性作用

<meta name="viewport" content="" />
    width viewport的宽度[device-width | pixel_value]width如果直接设置pixel_value数值，大部分的安卓手机不支持，但是ios支持；
    height – viewport 的高度 （范围从 223 到 10,000 ）
    user-scalable [yes | no]是否允许缩放
    initial-scale [数值] 初始化比例（范围从 > 0 到 10）
    minimum-scale [数值] 允许缩放的最小比例
    maximum-scale [数值] 允许缩放的最大比例
    target-densitydpi 值有以下（一般推荐设置中等响度密度或者低像素密度，后者设置具体的值dpi_value，另外webkit内核已不准备再支持此属性）
         -- dpi_value 一般是70-400//没英寸像素点的个数
         -- device-dpi设备默认像素密度
         -- high-dpi 高像素密度
         -- medium-dpi 中等像素密度
         -- low-dpi 低像素密度

复制代码

附带问题：怎样处理 移动端 1px 被 渲染成 2px 问题?

局部处理：

全局处理：

meta 相关

<!DOCTYPE html> <!--H5标准声明，使用 HTML5 doctype，不区分大小写-->
<head lang=”en”> <!--标准的 lang 属性写法-->
<meta charset=’utf-8′> <!--声明文档使用的字符编码-->
<meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″/> <!--优先使用指定浏览器使用特定的文档模式-->
<meta name=”description” content=”不超过150个字符”/> <!--页面描述-->
<meta name=”keywords” content=””/> <!-- 页面关键词-->
<meta name=”author” content=”name, email@gmail.com”/> <!--网页作者-->
<meta name=”robots” content=”index,follow”/> <!--搜索引擎抓取-->
<meta name=”viewport” content=”initial-scale=1, maximum-scale=3, minimum-sc
<meta name=”apple-mobile-web-app-title” content=”标题”> <!--iOS 设备 begin-->
<meta name=”apple-mobile-web-app-capable” content=”yes”/> <!--添加到主屏后的标
是否启用 WebApp 全屏模式，删除苹果默认的工具栏和菜单栏-->
<meta name=”apple-mobile-web-app-status-bar-style” content=”black”/>
<meta name=”renderer” content=”webkit”> <!-- 启用360浏览器的极速模式(webkit)-->
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”> <!--避免IE使用兼容模式-->
<meta http-equiv=”Cache-Control” content=”no-siteapp” /> <!--不让百度转码-->
<meta name=”HandheldFriendly” content=”true”> <!--针对手持设备优化，主要是针对一些老的不识别viewport的浏览器-->
<meta name=”MobileOptimized” content=”320″> <!--微软的老式浏览器-->
<meta name=”screen-orientation” content=”portrait”> <!--uc强制竖屏-->
<meta name=”x5-orientation” content=”portrait”> <!--QQ强制竖屏-->
<meta name=”full-screen” content=”yes”> <!--UC强制全屏-->
<meta name=”x5-fullscreen” content=”true”> <!--QQ强制全屏-->
<meta name=”browsermode” content=”application”> <!--UC应用模式-->
<meta name=”x5-page-mode” content=”app”> <!-- QQ应用模式-->
<meta name=”msapplication-tap-highlight” content=”no”> <!--windows phone
设置页面不缓存-->
<meta http-equiv=”pragma” content=”no-cache”>
<meta http-equiv=”cache-control” content=”no-cache”>
<meta http-equiv=”expires” content=”0″>
复制代码

了解更多加入我们前端学习圈

div+css的布局较table布局有什么优点

src与href的区别

当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部

CSS 篇

link 与 @import 的区别

BFC 有什么用

清除浮动的几种方式

Css3 新增伪类 - 伪元素

了解更多加入我们前端学习圈

IE盒子模型 、W3C盒子模型

display:inline-block 什么时候不会显示间隙？

行内元素float:left后是否变为块级元素？

行内元素设置成浮动之后变得更加像是 inline-block （行内块级元素，设置 成这个属性的元素会同时拥有行内和块级的特性，最明显的不同是它的默认宽度不是 100% ），这时候给行内元素设置 padding-top 和 padding-bottom或者 width 、 height 都是有效果的

如果需要手动写动画，你认为最小时间间隔是多久，为什么？

多数显示器默认频率是 60Hz ，即 1 秒刷新 60 次，所以理论上最小间隔为 1/60*1000ms ＝ 16.7ms

CSS权重，计算规则

CSS REFACTORING中提到了算法的过程，取决于A、B、C、D的值，abcd是什么呢？

符号 计算方式
A ( 内联样式) 有内联样式时 A=1 否则0
B（ID选择器出现次数） 有两层ID选择器 B=2
C （类选择器出现的次数） 类选择器1个， 属性选择器1个，伪类选择器2个 C=4
D （标签、伪类选择器出现次数） 标签选择器2个，伪类选择器1个 D=3 
li                                  /* (0, 0, 0, 1) */
ul li                               /* (0, 0, 0, 2) */
ul ol+li                            /* (0, 0, 0, 3) */
ul ol+li                            /* (0, 0, 0, 3) */
h1 + *[REL=up]                      /* (0, 0, 1, 1) */
ul ol li.red                        /* (0, 0, 1, 3) */
li.red.level                        /* (0, 0, 2, 1) */
a1.a2.a3.a4.a5.a6.a7.a8.a9.a10.a11  /* (0, 0, 11,0) */
#x34y                               /* (0, 1, 0, 0) */
li:first-child h2 .title            /* (0, 0, 2, 2) */
#nav .selected > a:hover            /* (0, 1, 2, 1) */
html body #nav .selected > a:hover  /* (0, 1, 2, 3) */
复制代码

了解更多加入我们前端学习圈

stylus/sass/less区别

优点：就不用我多说了，谁用谁知道，真香。

rgba()和opacity的透明效果有什么不同？

水平居中的方法

垂直居中的方法

浏览器 篇

浏览器内核的理解

HTTP 的请求方式场景

了解更多加入我们前端学习圈

HTTP状态码

从浏览器地址栏输入URL后发生了什么？

基础版本

详细版

详细升级版

cookies ， sessionStorage 和 localStorage 的区别

localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据

sessionStorage 数据在当前浏览器窗口关闭后自动删除

cookie 设置的 cookie 过期时间之前一直有效，即使窗口或浏览器关闭

浏览器缓存

浏览器缓存分为强缓存和协商缓存。当客户端请求某个资源时，获取缓存的流程如下

强缓存-协商缓存：了解更多加入我们前端学习圈

JS 篇

说几条写JavaScript的基本规范

绕不过去的闭包

说说你对作用域链的理解

JavaScript原型，原型链 ? 有什么特点？

请解释什么是事件委托/事件代理

Javascript如何实现继承？

function Parent(){
this.name = 'wang';
}
function Child(){
 this.age = 28;
}
Child.prototype = new Parent();//继承了Parent，通过原型
var demo = new Child();
alert(demo.age);
alert(demo.name);//得到被继承的属性
复制代码

谈谈This对象的理解

事件模型

W3C 中定义事件的发生经历三个阶段：捕获阶段（ capturing ）、目标阶段 （ targetin ）、冒泡阶段（ bubbling ）

new操作符具体干了什么呢?

Ajax原理

如何解决跨域问题?

首先了解下浏览器的同源策略 同源策略 /SOP（Same origin policy） 是一种约定，由Netscape公司1995年引入浏览器，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到 XSS 、 CSFR 等攻击。所谓同源是指"协议+域名+端口"三者相同，即便两个不同的域名指向同一个ip地址，也非同源

var script = document.createElement('script');
script.type = 'text/javascript';
// 传参并指定回调执行函数为onBack
script.src = 'http://www.....:8080/login?user=admin&callback=onBack';
document.head.appendChild(script);
// 回调执行函数
function onBack(res) {
 alert(JSON.stringify(res));
}

复制代码

//父窗口：(http://www.domain.com/a.html)
<iframe id="iframe" src="http://child.domain.com/b.html"></iframe>
<script>
 document.domain = 'domain.com';
 var user = 'admin';
</script>

//子窗口：(http://child.domain.com/b.html)
document.domain = 'domain.com';
// 获取父窗口中变量
alert('get js data from parent ---> ' + window.parent.user);
复制代码

说说你对AMD和Commonjs的理解

块是同步的，也就是说，只有加载完成，才能执行后面的操作。 AMD 规范则是非同步加载 模块，允许指定回调函数

module.exports 或 exports 的属性赋值来达到暴露模块对象的目的

js的7种基本数据类型

Undefined 、 Null 、Boolean 、Number 、String 、Bigint 、Symbol 了解更多加入我们前端学习圈

介绍js有哪些内置对象

JS有哪些方法定义对象

你觉得jQuery源码有哪些写的好的地方

null，undefined 的区别

谈谈你对ES6的理解

了解更多加入我们前端学习圈

面向对象编程思想

如何通过JS判断一个数组

var arr = [];
arr instanceof Array; // true
复制代码

Array.isArray([]) //true
Array.isArray(1) //false
复制代码

var arr = [];
arr.constructor == Array; //true
复制代码

Object.prototype.toString.call([]) == '[object Array]'
// 写个方法
var isType = function (obj) {
 return Object.prototype.toString.call(obj).slice(8,-1);
 //return Object.prototype.toString.apply([obj]).slice(8,-1);
}
isType([])  //Array
复制代码

异步编程的实现方式

对原生Javascript了解方向

数据类型、运算、对象、Function、继承、闭包、作用域、原型链、事件、 RegExp 、JSON 、 Ajax 、 DOM 、 BOM 、内存泄漏、跨域、异步装载、模板引擎、前端MVC 、路由、模块化、 Canvas 、 ECMAScript

sort 快速打乱数组

var arr = [1,2,3,4,5,6,7,8,9,10];
arr.sort(()=> Math.random() - 0.5)
//利用sort return 大于等于0不交换位置，小于0交换位置
// [5, 8, 4, 3, 2, 9, 10, 6, 1, 7]
复制代码

数组去重操作

了解更多加入我们前端学习圈

JS 原生拖拽节点

深拷贝、浅拷贝

了解更多加入我们前端学习圈

节流防抖

了解更多加入我们前端学习圈

变量提升

当执行 JS 代码时，会生成执行环境，只要代码不是写在函数中的，就是在全局执行环境中，函数中的代码会产生函数执行环境，只此两种执行环境

js b() // call b console.log(a) // undefined var a = 'Hello world' function b() { console.log('call b') }

变量提升 这是因为函数和变量提升的原因。通常提升的解释是说将声明的代码移动到了顶部，这其实没有什么错误，便于大家理解。但是更准确的解释应该是：在生成执行环境时，会有两个阶段。第一个阶段是创建的阶段，JS 解释器会找出需要提升的变量和函数，并且给他们提前在内存中开辟好空间，函数的话会将整个函数存入内存中，变量只声明并且赋值为 undefined ，所以在第二个阶段，也就是代码执行阶段，我们可以直接提前使用

b() // call b second
function b() {
 console.log('call b fist')
}
function b() {
 console.log('call b second')
}
var b = 'Hello world'

复制代码

js单线程

说说event loop

首先， js 是单线程的，主要的任务是处理用户的交互，而用户的交互无非就 是响应 DOM 的增删改，使用事件队列的形式，一次事件循环只处理一个事件 响应，使得脚本执行相对连续，所以有了事件队列，用来储存待执行的事件， 那么事件队列的事件从哪里被 push 进来的呢。那就是另外一个线程叫事件触 发线程做的事情了，他的作用主要是在定时触发器线程、异步 HTTP 请求线程 满足特定条件下的回调函数 push 到事件队列中，等待 js 引擎空闲的时候去 执行，当然js引擎执行过程中有优先级之分，首先js引擎在一次事件循环中， 会先执行js线程的主任务，然后会去查找是否有微任务 microtask（promise） ，如果有那就优先执行微任务，如果没有，在去查找 宏任务 macrotask（setTimeout、setInterval） 进行执行

了解更多加入我们前端学习圈

描述下this

this ，函数执行的上下文，可以通过 apply ， call ， bind 改变 this 的指向。对于匿名函数或者直接调用的函数来说，this指向全局上下文（浏览 器为window，NodeJS为 global ），剩下的函数调用，那就是谁调用它， this 就指向谁。当然还有es6的箭头函数，箭头函数的指向取决于该箭头函 数声明的位置，在哪里声明， this 就指向哪里

ajax、axios、fetch区别

ajax：

axios：

fetch：

了解更多加入我们前端学习圈

更多fetch知识前往：阮一峰 fetch

优化 篇

SEO优化

server优化

css优化

js方面

webpack优化点

其他优化点

为什么利用多个域名来存储网站资源会更有效？

Other 篇

从用户刷新网页开始，一次js请求一般情况下有哪些地方会有缓存处理？

常见web安全及防护原理

用过哪些设计模式

更多设计模式15种了解更多加入我们前端学习圈

Node的应用场景

那些操作会造成内存泄漏？

简单介绍下webpack

WebPack 是一个模块打包工具，你可以使用 WebPack 管理你的模块依赖，并编绎输出模块们所需的静态文件。它能够很好地管理、打包 Web 开发中所用到的 HTML 、 Javascript 、 CSS 以及各种静态文件（图片、字体等），让开发过程更加高效。对于不同类型的资源， webpack 有对应的模块加载器。 webpack 模块打包器会分析模块间的依赖关系，最后 生成了优化且合并后的静态资源。

谈谈你对gulp的了解

渐进增强和优雅降级

谈一谈你理解的函数式编程

想了解更多，移步这里：https://zhuanlan.zhihu.com/p/57708956

Vue的双向绑定数据的原理

vue.js 则是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty() 来劫持各个属性的 setter ， getter ，在数据变动时发布消息给订阅者，触发相应的监听回调

写个简单Loader

loader 就是一个 node 模块，它输出了一个函数。当某种资源需要用这个 loader 转换时，这个函数会被调用。并且，这个函数可以通过提供给它的 this 上下文访问 Loader API 。 reverse-txt-loader

// 定义
module.exports = function(src) {
 //src是原文件内容（abcde），下面对内容进行处理，这里是反转
 var result = src.split('').reverse().join('');
 //返回JavaScript源码，必须是String或者Buffer
 return `module.exports = '${result}'`;
}
//使用
{
test: /\.txt$/,
use: [{
'./path/reverse-txt-loader'
}]
},

复制代码

其他问题

上一篇下一篇

猜你喜欢

热点阅读