WEB前端面试总结
最近出去面试，写一下一些被问的东西，并且总结下自己
一、web标准以及语义化是什么,一些头部标签的意义
1.Web标准是一系列的标准，网页主要分为结构，表现，行为，相应的标准也是为3个，结构化标准主要包括xhtml和xml；表现标准主要指css，行为标准主要包括对象模型（如W3C DOM）、ECMAScript等。
2.所谓 web 语义化，从广义上来说，不仅要使机器（搜索引擎等）易于理解，也要使人易于理解。
举例h5标签：<header>,<footer>,<hgroup>,<nav>,<aside>,<section>,<article>(<h1-h6>之前的标签)等
Content-type 定义网络文件以及网页的编码，决定浏览器将用什么格式，什么编码读取文件
Cache-Control 请求和响应遵循的缓存机制
[1] no-cache ---- 不要读取缓存中的文件，要求向WEB服务器重新请求
[1] no-store ---- 请求和响应都禁止被缓存
[2] max-age： ---- 表示当访问此网页后的max-age秒内再次访问不会去服务器请求，其功能与Expires类似，只是Expires是根据某个特定日期值做比较。一但缓存者自身的时间不准确.则结果可能就是错误的，而max-age,显然无此问题.。Max-age的优先级也是高于Expires的
二、浏览器输入地址后会执行哪些操作？以及一些衍生问题（网络状态，跨域，请求类型等）
1.浏览器查找域名的IP地址;
2.浏览器给web服务器发送一个HTTP请求;
3.服务的永久重定向响应;
4.浏览器跟踪重定向地址;
5.服务器“处理”请求;
6.服务器发回一个HTML响应;
7.浏览器开始显示HTML;
8.浏览器发送获取嵌入在HTML中的对象;
========================================================================
========================================================================
此时会涉及到网络请求状态
比较常见的状态：
2xx （成功）
200 （成功） 服务器已成功处理了请求。 通常，这表示服务器提供了请求的网页。
3xx （重定向）
没有碰到过，具体不清楚
4xx（请求错误）
400 （错误请求） 服务器不理解请求的语法。
401 （未授权） 请求要求身份验证。 对于需要登录的网页，服务器可能返回此响应。
403 （禁止） 服务器拒绝请求。
404 （未找到） 服务器找不到请求的网页。
405 （方法禁用） 禁用请求中指定的方法。
5xx（服务器错误）
500 （服务器内部错误） 服务器遇到错误，无法完成请求。
503 （服务不可用） 服务器目前无法使用（由于超载或停机维护）。 通常，这只是暂时状态。
========================================================================
========================================================================
还有被到请求必定会问你跨域的解决方案：
首先讲一下什么是跨域，为什么会出现跨域问题：
跨域指一个域下的文档或脚本试图去请求另一个域下的资源
跨域问题是由于javascript语言安全限制中的同源策略造成的,简单来说,同源策略是指一段脚本只能读取来自同一来源的窗口和文档的属性,这里的同一来源指的是主机名、协议和端口号的组合.
一般常见的主要指：（脚本请求） js发起的ajax请求、dom和js对象的跨域操作等
常用的解决方案：
1.jsonp 需要目标服务器配合一个callback函数。
2.CORS 需要服务器设置header ：Access-Control-Allow-Origin。
3.nginx反向代理（我没有做过，至少比不知道好）
总之都是需要服务端配合解决
========================================================================
========================================================================
请求类型常见分为4种：get post put delete
get post的区别
从传输数据大小，post大于get
从安全性方面，post安全与get，主要是get通过url直接能看到，虽然post也能在F12里看到，都是明文，然而get会保存在浏览器历史记录中
还有个幂等，不太了解
========================================================================
========================================================================
回来说下页面渲染的问题，一般会问页面渲染是否是从上到下，具体的过程也要稍微了解下
HTML解析出DOM Tree
CSS解析出Style Rules
将二者关联生成Render Tree
Layout 根据Render Tree计算每个节点的信息
Painting 根据计算好的信息绘制整个页面
对于script标签放在head里和body里的区别
如果把javascript放在head里的话，则先被解析,但这时候body还没有解析。有可能会出现执行了方法但没办法获取body里对象的情况，一般都会写个
$(document).ready(function(){
//make your code
})
除此之外，从JavaScript对页面下载性能方向考虑：由于脚本会阻塞其他资源的下载（如图片等）和页面渲染，直到脚本全部下载并执行完成后，页面的渲染才会继续，因此推荐将所有的<script>标签尽可能放到<body>标签的底部，以尽量减少对整个页面下载的影响。
三、前端性能优化（基础）
1.请减少HTTP请求,包括雪碧图的使用，懒加载的使用
2.减少对Dom的操作，并且了解重绘（改变外观，不影响布局）和重排（影响到位置布局）的概念
3.高效使用标签元素
4.使用一些cdn去代替本地资源，并且CSS放头，JS放尾
5.就是去精简CSS和优化Js(比如少使用全局变量等)
6.注意控制Cookie大小和污染
四、浏览器渲染和服务器渲染的区别
1.浏览器端渲染，指的是用js去生成html，前端做路由。（比如单页应用的vue,react）
优势：后端只提供数据，前端做视图和交互逻辑，分工明确。服务器只提供接口，路由以及渲染都丢给前端，服务器计算压力变轻了
缺点：用户等待时间变长了，尤其在请求数多而且有一定先后顺序的时候，浏览器压力比较大
2.服务器端渲染，指的是用后台语言通过一些模版引擎生成html。（比如PHP文件、JSP文件）
优势：响应很快，用户体验会比较好，另外对于搜索引擎来说也是友好的，有SEO优化
缺点：增加了服务器计算压力
五、谈谈对于模块化开发的理解
1.为什么？
解决多文件引入引起的明明冲突；
解决代码合并带来的冲突以及组件库更新带来的升级问题
2.什么是模块化
模块化开发使代码耦合度降低，模块化的意义在于最大化的设计重用，以最少的模块、零部件，更快速的满足更多的个性化需求。
commonjs主要应用于服务器，实现同步加载，如nodejs
要求讲一下AMD和CMD的区别
CMD 推崇依赖就近（延后执行）=》SeaJS国内相对流行
AMD 推崇依赖前置（提前执行）=》RequireJS国外相对流行
AMD的API默认是一个当多个用，CMD的API严格区分，推崇职责单一
ES6中的Import export
export用于对外输出本模块（一个文件可以理解为一个模块）变量的接口
import用于在一个模块中加载另一个含有export接口的模块。
六、谈谈前后端分离的意义
主要还是分场景，对于SEO没有要求的app类型的场景前后端分离非常适合
可以让前后端开发明确自己的职责，提交前后端开发的效率，前端专注于展现效果，后端专心于逻辑层开发
，还有就是对于一些传统的JSP页面，代码层面上维护起来经过多次修改很难去维护，所以前后端分离有利于代码的维护，还有就是从优化角度讲，传统的优化只能在后端的基础上去做，而前后端分离后前端能在自己的空间发挥价值。
七、对于PC端和移动端兼容问题
PC端的问题主要还是IE下的问题就不举例子了
移动端问题（比较常见的的，其实还有很多）：
1.IOS移动端click事件300ms的延迟响应 ===>解决方案：fastclick可以解决在手机上点击事件的300ms延迟；
zepto的touch模块，tap事件也是为了解决在click的延迟问题；
2.一些情况下对非可点击元素如(label,span)监听click事件，ios下不会触发，css增加cursor:pointer就搞定了。
3.三星手机遮罩层下的input、select、a等元素可以被点击和focus(点击穿透)===》将可获取焦点元素加入的disabled属性
4.h5底部输入框被键盘遮挡问题==》
var oHeight = $(document).height(); //浏览器当前的高度
$(window).resize(function(){
if($(document).height() < oHeight){
$("#footer").css("position","static");
}else{
$("#footer").css("position","absolute");
}
});
或者让UI改图去（我比较倾向这种，上面的代码可能不能完全出现他们想要的效果）
5.在ios和andriod中,audio元素和video元素在无法自动播放==>
$('html').one('touchstart',function(){
audio.play()
})
6.fixed定位缺陷
ios下fixed元素容易定位出错，软键盘弹出时，影响fixed元素定位
android下fixed表现要比iOS更好，软键盘弹出时，不会影响fixed元素定位
ios4下不支持position:fixed
解决方案： 可用iScroll插件解决这个问题
7.Zepto点透的解决方案
此处还会涉及到冒泡或者捕获，阻止默认事件方面的问题
其实点透问题还是涉及到在移动端有个300ms延时的问题
解决方案
1.引入fastclick.js
2.用touchend代替tap事件并阻止掉touchend的默认行为preventDefault()
$("#cbFinish").on("touchend", function (event) {
event.preventDefault();
});
3.延迟300MS以上。。不推荐
八、如何优化首屏加载（vue）
1.分包处理
2.路由实现异步加载
3.CDN引入第三方
4.Nginx 启用gzip压缩（说实话我也并不懂为什么可以）
九、对于响应式和自适应的理解
响应式网页设计（Responsive web design，通常缩写为RWD），又称为自适应网页设计、回应式网页设计。
响应式与自适应的原理是相似的，都是检测设备，根据不同的设备采用不同的css，而且css都是采用的百分比的，而不是固定的宽度，不同点是响应式的模板在不同的设备上看上去是不一样的，会随着设备的改变而改变展示样式，而自适应不会，所有的设备看起来都是一套的模板，不过是长度或者图片变小了，不会根据设备采用不同的展示样式。自适应只是响应式的一个子集。
主要是bootstrap中的响应式布局影响的比较深，基本看项目开发的成本吧，跟设计讨论讨论再去实现效果吧
十、移动端布局技巧包括rem的使用和dpi的理解，还有flex布局
十一、js一些基础知识点
懒得写了，一般都会考你闭包啊，递归啊，数据类型啊，请求地址后会执行哪些操作等，垃圾回收机制啊，然后就是一般常见的面试题，可以去百度搜一下，，，比如for加settimeout的一些输出啊，挺多的
十二、ES6的常用语法
简单的会问一些symbol一些增加的数据类型，然后Let const的区别，const上一般会有引用对象能不能改变什么的，当然是能咯，，这是基础
然后多的就是Promise，generator，await async等等异步操作啊
数据去重的set啊。一些遍历的Map等
具体可以去阮一峰老是的手册看看，很详细的
十三、对于Vue和React的对比
================================
会有人要你回答两个框架的区别：
react跟Vue区别
状态管理 vs 对象属性
Jsx vs 模板
单向流，双向数据绑定
================================
十四、一些git常用的命令
首要理解git的缓存区，本地仓以及远程仓库
git pull 从远程拉倒本地
git add 保存到缓存区
git commit 推到本地仓库
git push 推到远程仓库
git init 把当前目录变成git 可以管理的仓库
git diff 查看详细修改内容
git log 查看修改记录
git merge 合并分支
git rm xx.xx 删除文件
十五、JS设计模式
目前还没搞懂。。。再说吧
十六、Webpack 工作原理
模块化
依赖管理：方便引用第三方模块、让模块更容易复用、避免全局注入导致的冲突、避免重复加载或加载不需要的模块。
合并代码：把各个分散的模块集中打包成大文件，减少HTTP的请求链接数，配合UglifyJS可以减少、优化代码的体积。
各路插件：babel把ES6+转译成ES5-，eslint可以检查编译期的错误
loader 用于对模块的源代码进行转换。loader 可以使你在 import 或"加载"模块时预处理文件。因此，loader 类似于其他构建工具中“任务(task)”，并提供了处理前端构建步骤的强大方法。Loaders是在打包构建过程中用来处理源文件的。
插件（Plugins）是用来拓展webpack功能的，它们会在整个构建过程中生效，执行相关的任务。
