### 2\. 实现一个扇形
用CSS实现扇形的思路和三角形基本一致，就是多了一个圆角的样式，实现一个90°的扇形：
~~~
div{
border: 100px solid transparent;
width: 0;
heigt: 0;
border-radius: 100px;
border-top-color: red;
}
~~~
[](https://camo.githubusercontent.com/ba480f2eb32bfcb5e30076692033c07b222c48bbef17e1e081f8475f63a06807/68747470733a2f2f63646e2e6e6c61726b2e636f6d2f79757175652f302f323032302f706e672f313530303630342f313630333633363434343736372d32366461376262652d353437392d343465322d393038382d3530633932313164366330642e706e673f782d6f73732d70726f636573733d696d616765253246726573697a65253243775f35303023616c69676e3d6c65667426646973706c61793d696e6c696e65266865696768743d313930266d617267696e3d2535426f626a6563742532304f626a656374253544266f726967696e4865696768743d323334266f726967696e57696474683d3733382673697a653d30267374617475733d646f6e65267374796c653d6e6f6e652677696474683d363030)
- HTML
- 1. src和href的区别
- 2. 对HTML语义化的理解
- 3. DOCTYPE(⽂档类型) 的作⽤
- 4. script标签中defer和async的区别
- 5. 常⽤的meta标签有哪些
- 6. HTML5有哪些更新
- 7. img的srcset属性的作⽤？
- 8. 行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？
- 9. 说一下 web worker
- 10. HTML5的离线储存怎么使用，它的工作原理是什么
- 11. 浏览器是如何对 HTML5 的离线储存资源进行管理和加载？
- 12. title与h1的区别、b与strong的区别、i与em的区别？
- 13. iframe 有那些优点和缺点？
- 14. label 的作用是什么？如何使用？
- 15. Canvas和SVG的区别
- 16. head 标签有什么作用，其中什么标签必不可少？
- 17. 文档声明（Doctype）和<!Doctype html>有何作用? 严格模式与混杂模式如何区分？它们有何意义?
- 18. 浏览器乱码的原因是什么？如何解决？
- 19. 渐进增强和优雅降级之间的区别
- 20. 说一下 HTML5 drag API
- CSS
- CSS基础
- 1. CSS选择器及其优先级
- 2. CSS中可继承与不可继承属性有哪些
- 3. display的属性值及其作用
- 4. display的block、inline和inline-block的区别
- 5. 隐藏元素的方法有哪些
- 6. link和@import的区别
- 7. transition和animation的区别
- 8. display:none与visibility:hidden的区别
- 9. 伪元素和伪类的区别和作用？
- 10. 对requestAnimationframe的理解
- 11. 对盒模型的理解
- 12. 为什么有时候⽤translate来改变位置⽽不是定位？
- 13. li 与 li 之间有看不见的空白间隔是什么原因引起的？如何解决？
- 14. CSS3中有哪些新特性
- 15. 替换元素的概念及计算规则
- 16. 常见的图片格式及使用场景
- 17. 对 CSSSprites 的理解
- 18. 什么是物理像素，逻辑像素和像素密度，为什么在移动端开发时需要用到@3x, @2x这种图片？
- 19. margin 和 padding 的使用场景
- 20. 对line-height 的理解及其赋值方式
- 21. CSS 优化和提高性能的方法有哪些？
- 22. CSS预处理器/后处理器是什么？为什么要使用它们？
- 23. ::before 和 :after 的双冒号和单冒号有什么区别？
- 24. display:inline-block 什么时候会显示间隙？
- 25. 单行、多行文本溢出隐藏
- 26. Sass、Less 是什么？为什么要使用他们？
- 27. 对媒体查询的理解？
- 28. 对 CSS 工程化的理解
- 29. 如何判断元素是否到达可视区域
- 30. z-index属性在什么情况下会失效
- 页面布局
- 1. 常见的CSS布局单位
- 2. px、em、rem的区别及使用场景
- 3. 两栏布局的实现
- 4. 三栏布局的实现
- 5.水平垂直居中的实现
- 6. 如何根据设计稿进行移动端适配？
- 7. 对Flex布局的理解及其使用场景
- 8. 响应式设计的概念及基本原理
- 定位与浮动
- 1. 为什么需要清除浮动？清除浮动的方式
- 2. 使用 clear 属性清除浮动的原理？
- 3. 对BFC的理解，如何创建BFC
- 4. 什么是margin重叠问题？如何解决？
- 5. 元素的层叠顺序
- 6. position的属性有哪些，区别是什么
- 7. display、float、position的关系
- 8. absolute与fixed共同点与不同点
- 9. 对 sticky 定位的理解
- 场景应用
- 1. 实现一个三角形
- 2. 实现一个扇形
- 3. 实现一个宽高自适应的正方形
- 4. 画一条0.5px的线
- 5. 设置小于12px的字体
- 6. 如何解决 1px 问题？
- JavaScript
- 数据类型
- 1. JavaScript有哪些数据类型，它们的区别？
- 2. 数据类型检测的方式有哪些
- 3. 判断数组的方式有哪些
- 4. null和undefined区别
- 5. typeof null 的结果是什么，为什么？
- 6. intanceof 操作符的实现原理及实现
- 7. 为什么0.1+0.2 ! == 0.3，如何让其相等
- 8. 如何获取安全的 undefined 值？
- 9. typeof NaN 的结果是什么？
- 10. isNaN 和 Number.isNaN 函数的区别？
- 11. == 操作符的强制类型转换规则？
- 12. 其他值到字符串的转换规则？
- 13. 其他值到数字值的转换规则？
- 14. 其他值到布尔类型的值的转换规则？
- 15. 或 和 共 操作符的返回值？
- 16. Object.is() 与比较操作符 “===”、“==” 的区别？
- 17. 什么是 JavaScript 中的包装类型？
- 18. JavaScript 中如何进行隐式类型转换？
- 19. + 操作符什么时候用于字符串的拼接？
- 20. 为什么会有BigInt的提案？
- 21. object.assign和扩展运算法是深拷贝还是浅拷贝，两者区别
- ES6
- 1. let、const、var的区别
- 2. const对象的属性可以修改吗
- 3. 如果new一个箭头函数的会怎么样
- 4. 箭头函数与普通函数的区别
- 5. 箭头函数的this指向哪⾥？
- 6. 扩展运算符的作用及使用场景
- 7. Proxy 可以实现什么功能？
- 8. 对对象与数组的解构的理解
- 9. 如何提取高度嵌套的对象里的指定属性？
- 10. 对 rest 参数的理解
- 11. ES6中模板语法与字符串处理
- JavaScript基础
- 1. new操作符的实现原理
- 2. map和Object的区别
- 3. map和weakMap的区别
- 4. JavaScript有哪些内置对象
- 5. 常用的正则表达式有哪些？
- 6. 对JSON的理解
- 7. JavaScript脚本延迟加载的方式有哪些？
- 8. JavaScript 类数组对象的定义？
- 9. 数组有哪些原生方法？
- 10. Unicode、UTF-8、UTF-16、UTF-32的区别？
- 11. 常见的位运算符有哪些？其计算规则是什么？
- 12. 为什么函数的 arguments 参数是类数组而不是数组？如何遍历类数组?
- 13. 什么是 DOM 和 BOM？
- 14. 对类数组对象的理解，如何转化为数组
- 15. escape、encodeURI、encodeURIComponent 的区别
- 16. 对AJAX的理解，实现一个AJAX请求
- 17. JavaScript为什么要进行变量提升，它导致了什么问题？
- 18. 什么是尾调用，使用尾调用有什么好处？
- 19. ES6模块与CommonJS模块有什么异同？
- 20. 常见的DOM操作有哪些
- 21. use strict是什么意思 ? 使用它区别是什么？
- 22. 如何判断一个对象是否属于某个类？
- 23. 强类型语言和弱类型语言的区别
- 24. 解释性语言和编译型语言的区别
- 25. for...in和for...of的区别
- 26. 如何使用for...of遍历对象
- 27. ajax、axios、fetch的区别
- 28. 数组的遍历方法有哪些
- 29. forEach和map方法有什么区别
- 原型与原型链
- 1. 对原型、原型链的理解
- 2. 原型修改、重写
- 3. 原型链指向
- 4. 原型链的终点是什么？如何打印出原型链的终点？
- 5. 如何获得对象非原型链上的属性？
- 执行上下文/作用域链/闭包
- 1. 对闭包的理解
- 2. 对作用域、作用域链的理解
- 3. 对执行上下文的理解
- this/call/apply/bind
- 1. 对this对象的理解
- 2. call() 和 apply() 的区别？
- 3. 实现call、apply 及 bind 函数
- 异步编程
- 1. 异步编程的实现方式？
- 2. setTimeout、Promise、Async/Await 的区别
- 3. 对Promise的理解
- 4. Promise的基本用法
- 5. Promise解决了什么问题
- 6. Promise.all和Promise.race的区别的使用场景
- 7. 对async/await 的理解
- 8. await 到底在等啥？
- 9. async/await的优势
- 10. async/await对比Promise的优势
- 11. async/await 如何捕获异常
- 12. 并发与并行的区别？
- 13. 什么是回调函数？回调函数有什么缺点？如何解决回调地狱问题？
- 14. setTimeout、setInterval、requestAnimationFrame 各有什么特点？
- 面向对象
- 1. 对象创建的方式有哪些？
- 2. 对象继承的方式有哪些？
- 垃圾回收与内存泄漏
- 1. 浏览器的垃圾回收机制
- 2. 哪些情况会导致内存泄漏
- Vue
- 1. Vue的基本原理
- 2. 双向数据绑定的原理
- 3. 使用 Object.defineProperty() 来进行数据劫持有什么缺点？
- 4. MVVM、MVC、MVP的区别
- 5. Computed 和 Watch 的区别
- 6. Computed 和 Methods 的区别
- 7. slot是什么？有什么作用？原理是什么？
- 8. 过滤器的作用，如何实现一个过滤器
- 9. 如何保存页面的当前的状态
- 10. 常见的事件修饰符及其作用
- 11. v-if、v-show、v-html 的原理
- 13. v-if和v-show的区别
- 14. v-model 是如何实现的，语法糖实际是什么？
- 15. v-model 可以被用在自定义组件上吗？如果可以，如何使用？
- 16. data为什么是一个函数而不是对象
- 17. 对keep-alive的理解，它是如何实现的，具体缓存的是什么？
- 18. $nextTick 原理及作用
- 19. Vue 中给 data 中的对象属性添加一个新的属性时会发生什么？如何解决？
- 20. Vue中封装的数组方法有哪些，其如何实现页面更新
- 21. Vue 单页应用与多页应用的区别
- 22. Vue template 到 render 的过程
- 23. Vue data 中某一个属性的值发生改变后，视图会立即同步执行重新渲染吗？
- 24. 简述 mixin、extends 的覆盖逻辑
- 浏览器原理
- 浏览器安全
- 1. 什么是 XSS 攻击？
- 2. 如何防御 XSS 攻击？
- 3. 什么是 CSRF 攻击？
- 4. 如何防御 CSRF 攻击？
- 5. 什么是中间人攻击？如何防范中间人攻击？
- 6. 有哪些可能引起前端安全的问题**?**
- 7. 网络劫持有哪几种，如何防范？
- 进程与线程
- 1. 进程与线程的概念
- 2. 进程和线程的区别
- 3. 浏览器渲染进程的线程有哪些
- 4. 进程之前的通信方式
- 5. 僵尸进程和孤儿进程是什么？
- 6. 死锁产生的原因？ 如果解决死锁的问题？
- 7. 如何实现浏览器内多个标签页之间的通信?
- 8. 对Service Worker的理解
- 浏览器缓存
- 1. 对浏览器的缓存机制的理解
- 2. 浏览器资源缓存的位置有哪些？
- 3. 协商缓存和强缓存的区别
- 4. 为什么需要浏览器缓存？
- 5. 点击刷新按钮或者按 F5、按 Ctrl+F5 （强制刷新）、地址栏回车有什么区别？
- 浏览器组成
- 1. 对浏览器的理解
- 2. 对浏览器内核的理解
- 3. 常见的浏览器内核比较
- 4. 常见浏览器所用内核
- 5. 浏览器的主要组成部分
- 浏览器渲染原理
- 1. 浏览器的渲染过程
- 2. 浏览器渲染优化
- 3. 渲染过程中遇到 JS 文件如何处理？
- 4. 什么是文档的预解析？
- 5. CSS 如何阻塞文档解析？
- 6. 如何优化关键渲染路径？
- 7. 什么情况会阻塞渲染？
- 浏览器本地存储
- 1. 浏览器本地存储方式及使用场景
- 2. Cookie有哪些字段，作用分别是什么
- 3. Cookie、LocalStorage、SessionStorage区别
- 4. 前端储存的⽅式有哪些？
- 5. IndexedDB有哪些特点？
- 浏览器同源策略
- 1. 什么是同源策略
- 2. 如何解决跨越问题
- 3. 正向代理和反向代理的区别
- 4. Nginx的概念及其工作原理
- 浏览器事件机制
- 1. 事件是什么？事件模型？
- 2. 如何阻止事件冒泡
- 3. 对事件委托的理解
- 4. 事件委托的使用场景
- 5. 同步和异步的区别
- 6. 对事件循环的理解
- 7. 宏任务和微任务分别有哪些
- 8. 什么是执行栈
- 9. Node 中的 Event Loop 和浏览器中的有什么区别？process.nextTick 执行顺序？
- 10. 事件触发的过程是怎样的
- 浏览器垃圾回收机制
- 1. V8的垃圾回收机制是怎样的
- 2. 哪些操作会造成内存泄漏？
- 性能优化
- CDN
- 1. CDN的概念
- 2. CDN的作用
- 3. CDN的原理
- 4. CDN的使用场景
- 懒加载
- 1. 懒加载的概念
- 2. 懒加载的特点
- 3. 懒加载的实现原理
- 4. 懒加载与预加载的区别
- 回流与重绘
- 1. 回流与重绘的概念及触发条件
- 2. 如何避免回流与重绘？
- 3. 如何优化动画？
- 4. documentFragment 是什么？用它跟直接操作 DOM 的区别是什么？
- 节流与防抖
- 1. 对节流与防抖的理解
- 2. 实现节流函数和防抖函数
- 图片优化
- 1. 如何对项目中的图片进行优化？
- 2. 常见的图片格式及使用场景
- Webpack优化
- 1. 如何提⾼webpack的打包速度?
- 2. 如何减少 Webpack 打包体积
- 3. 如何⽤webpack来优化前端性能？
- 4. 如何提⾼webpack的构建速度？