文章目录
HTML5
1. 新标签
2. 标签语义化
3. web存储
- cookie
- localStorage
- sessionStorage
4. 盒模型
5. 五大浏览器及其内核
| 浏览器 | 内核 | |
|---|---|---|
| 1 | IE | Trident |
| 2 | Firefox | Gecko |
| 3 | Opear | Presto |
| 4 | Safari | Webkit |
| 5 | Chrome | Webkit/Blink |
CSS3
1. 选择器
2. 伪类和伪元素
- 伪类 单引号（:）
用来向选择器添加特殊的效果，或者查找不存在DOM树中的信息- :active
- :link
- :visited
- :hover
- :focus
- :nth-child
- :fist-child
- :last-child
- :disabled
- :checked 等等
- 伪元素 双引号（::）
为DOM树定义虚拟元素，这个虚拟元素不包含任何DOM元素，但是可以包含内容- ::before
- ::after
- ::first-letter
- ::first-line
3. 新属性
4. 动画
5. 水平垂直居中
内容水平垂直居中有一下几种类型
- 行内元素水平垂直居中
- 块元素水平垂直居中
- 已知宽高水平垂直居中
- 未知宽高水平垂直居中
采用以下方法解决
- 行高布局
- 绝对定位布局
- 绝对定位+translate 布局
- display: flex 布局
- display: table 布局
6. 清除浮动
- 简单清除浮动法
overflow: hidden;
- 万能清除浮动法
.clear{
zoom: 1;
}
.clear:after{
content: "";
display: block;
height: 0;
clear: both; /* 核心属性 */
visibility: hidden;
}
7. 优雅降级、渐进增强
- 优雅降级
先完成高版本浏览器功能，再针对低版本浏览器进行兼容
/*优雅降级写法*/
div{
/*先完成高版本浏览器功能*/
transition: all 1s;
/*再针对具体浏览器进行兼容*/
-webkit-transition: all 1s;
-moz-transition: all 1s;
-ms-transition: all 1s;
-o-transition: all 1s;
}
- 渐进增强
先完成低版本浏览器基本功能，再针对高版本浏览器进行优化
/*渐进增强写法*/
div{
/*先完成基本功能*/
-webkit-transition: all 1s;
-moz-transition: all 1s;
-ms-transition: all 1s;
-o-transition: all 1s;
/*再针对高版本浏览器进行优化*/
transition: all 1s;
}
ES5
1. 数据类型
js数据类型分为基本数据类型和引用数据类型
- 基本数据类型
- String
- Number
- Null
- Undefined
- Boolean
- Symbol（ES6新增）
- 引用数据类型
- Object
- Array
- Function
2. 数组操作方法
- push()
- pop()
- unshift()
- shift()
- concat()
- reverse()
- sort()
- join()
3. 字符串操作方法
- splice()
- splite()
- substring()
- substr()
4. dom操作方法
dom操作是前端经常面对的事情，具体分为增删改查
- 增加
- appendChild()
- insertBefore()
- 删除
- removeChild
- 修改
- innerHTML
- innerText
- 查询
- getElementById()
- getElementsByClassName()
- getElementsByTagNmae()
- getElementsByName()
- querySelect()
- querySelectAll()
- 复制
- cloneNode()
5. 跨域
（1）跨域
跨域一直是前端无法回避的问题，提到跨域就要提一下浏览器的同源策略
- 同源策略（Same origin policy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说 Web 是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。它的核心就在于它认为自任何站点装载的信赖内容是不安全的。当被浏览器半信半疑的脚本运行在沙箱时，它们应该只被允许访问来自同一站点的资源，而不是那些来自其它站点可能怀有恶意的资源。
- 同源指的是：协议、域名、端口全都相同，缺一不可
| 当前页面url | 请求的url | 是否跨域 | 原因 |
|---|---|---|---|
| http://www.baidu.com | http://www.baidu.com/index.html | 否 | 同源 |
| http://www.baidu.com | https://www.baidu.com/index.html | 是 | 协议不同 |
| http://www.baidu.com | http://www.daibu.com/index.html | 是 | 域名不同 |
| http://www.baidu.com | http://www.baidu.com:8888/index.html | 是 | 端口不同 |
（2）前端实现跨域方式
- jsonp
- cors
- 反向代理
- websocket
- window.domain
- postMessage
- iframe
1）jsonp跨域
6. 闭包
7. 原型链
8. 异步
9. call、apply、bind
10. 事件委托
11. 捕获、冒泡
12. 事件防抖、事件节流
防抖和节流能有效减少浏览器性能的损耗，防止出现页面堵塞卡顿现象
- 事件防抖，
顾名思义，防止频繁执行某个方法导致页面抖动卡顿，最终只会执行一次方法。
比如监听页面滚动加载更多，只有不滚动页面了，才会执行方法，如果继续滚动，就不执行。
页面滚动到底部加载更多 - 事件节流
顾名思义，节约流量，节约浏览器性能，固定间隔时间执行某个方法
比如input框监听用户输入内容，固定1秒或者2秒执行一次获取输入框内容的方法。
13. 面向对象
- 与面向过程的区别
- 特点（封装、继承、多态）
14. 继承
继承是面向对象模式的核心，通过继承，各个实例可以实现自己的属性和方法
- 原型继承
- 构造继承
- 组合继承（经典继承方法，也是目前最常用的继承方法）
15. 垃圾回收
- Javascript具有自动垃圾收集机制，执行环境会负责管理代码执行过程中使用的内存。
- 所需内存的分配及无用内存的回收实现了自动化管理。
- 原理：找出不再继续使用的变量，释放其内存。垃圾收集器会按照固定时间间隔，周期性执行这一操作。
16. 内存泄露
17. 去重
18. 查找最多字符
19. 理解new原理，并手动实现new
function Person(name, age){
this.name = name;
this.age = age;
}
Person.prototype.sayName = function(){
console.log(this.name);
}
//日常使用方式
var ming = new Person('xiaoming', 26);
console.log(ming.age); //26
ming.sayName(); //xiaoming
//手动实现new
function createNew(name, age){
//新建一个空对象
var obj = {};
//改变Person方法的this指向，指向新建的obj，并传入参数
Person.call(obj, name, age);
//新建对象的原型，指向Person的原型
obj.__proto__ = Person.prototype;
//返回该对象
return obj;
}
var hong = createNew('xiaohong', 18);
console.log(hong.age); //18
hong.sayName(); //xiaohong
ES6
1. promise
2. 继承
3. 数组新增方法
4. 字符串新增方法
5. 模块开发
6. async、await
7.解构
8.模板字符串
9.includes
库（Jq）、框架（Vue）
1. 生命周期
2. v-html、v-text、v-if、v-show区别
3. v-for里面的key作用
4. 虚拟dom原理
5. 数据视图双向绑定原理
6. mixins混合
7. vuex使用
8. 组件传值
9. 中央事件总线
10. 自定义指令
11. 自定义事件
12. 自定义全局变量
SCSS
1. 变量
2. 计算
3. 嵌套
4. 继承
5. 混合
6. 函数
移动端兼容性问题
1. 移动端1像素问题
2. 安卓手机行高问题
3. 安卓手机文字加粗问题
4. 苹果手机iphonex及以上，底部安全区域问题
5. 移动端适配
- px
- rem
- em
- vw
- vh
- rpx
混合开发Hybird App
1. 安卓、iso调取h5
2. h5调取安卓、ios
3. 低版本手机兼容ES6问题
UI库
GIT、SVN
1. git查看分支
//查看本地分支
git branch
//查看远程分支
git branch -a
2. git创建分支
git branch fenzhi
3. git切换分支
git checkout fenzhi
//新建并且切换分支
git checkout -b fenzhi
4. git删除分支
git branch -d fenzhi
5. git合并分支
//需要提前切换到其他分支 比如 git checkout master
git merge fenzhi
6. git合并多次本地commit
//合并分支次数，此处为4次
git rebase -i HEAD~4
7.git同步本地代码到最新版本
git pull origin master
8. git提交
git push origin fenzhi
9. git撤销提交
git reset HEAD <file> //撤销文件
git checkout -- <file> //回退到撤销文件之前的版本
10. git查看修改内容
1. git diff //尚未add前，查看修改的内容
2. git diff fileName //尚未add前，查看修改的某个文件
3. git diff HEAD~X //查看已经提交到版本库的修改内容，x代表几个版本
4. git diff 版本1 版本2 文件 //查看两个版本间，某个文件的修改内容
11. git查看提交记录
git log //查看所有提交记录
git log -3 //查看最近3次提交记录
12. git和svn的区别
Webpack
1. 构建方法
2. loaders、plugins区别
Node.js
1. express
Websocket
公众号开发（第三方页面）
1. 转发、分享
2. 调取摄像头
3. 上传图片
4. 获取图片
5. 支付
小程序
1. 生命周期
2. rpx
3. 登录
4. 获取地理位置
5. onhide区别（页面、app.js）
6. 组件使用
（1）. 组件传值
其他
1. 前端性能优化
性能优化意味着能提升页面流畅度，减少用户等待时间，提升用户体验
- HTTP性能优化
- http请求均采用异步，防止因为同步导致页面假死状态
- http请求尽量使用GET方式，POST请求把数据作为请求的主体，消耗的资源会更多一些
- 减少http请求，尽量合并http请求
- HTML代码优化
- 使用语义化标签
- 禁止使用无意义标签进行布局
- css文件放在head标签里，script标签放在body最后面位置
- 结构与样式分离，采用外联样式
- JS代码优化
- 减少dom操作，dom操作是影响浏览器性能的最大原因
- 减少使用 getElementsByTagName()，getElementsByClassName(),这些语句都会导致遍历dom元素，影响性能，可以使用querySelect()，querySelectAll()来替代
- 使用变量保存获取dom元素的信息，而不是每次需要都获取一遍。
- 减少使用全局变量
- 减少使用闭包，因为闭包在运行完毕后并不会释放内存，会导致内存泄漏
- 尽量使用事件委托（采用事件流里面的冒泡原理）
- 事件处理程序在使用过后，都将其设为null
- 压缩代码
2. SEO优化
搜索引擎优化，目的是让网络爬虫可以更好地爬到自己的页面，提高搜索排名
- html标签使用语义化标签，采用h5新标签（IE浏览器酌情考虑）
- 页面标题使用h1-h6，一个页面只出现一个h1标签
- a标签、img标签，合理使用 alt、title属性
- 页面增加友情链接，指向其他兄弟网站
- 增加meta标签，keywords、description
- 目录层级最多不超过三级
- 最有效的方法，花钱买排名?
3. 首页白屏优化
首页加载大量的内容，导致等待时间过长，以至于影响用户体验
- 增加加载动画，提示用户正在加载中
- 减少首页资源请求，优化首页代码
- 首页采用服务器渲染直接返回
4. IE兼容问题及hack
5. http、https区别
6. 服务器状态码
- 200
- 400
- 401
- 403
- 404
- 500
- 502
- 503
- 504
7. 从地址栏输入url到页面渲染整个过程
- DNS解析
- 三次握手
- 向服务器发送请求
- 服务器返回请求
- 四次挥手
- 浏览器渲染
- 浏览器回流和重绘
持续更新中…
如果这篇文章对你的面试有些许的帮助，不要忘了点个赞哦！！！(￣︶￣)
**
21万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
