前端面试总结一

1.页面的重构和回流
重构：
改变每个元素的外观时所触发的浏览器的行为，如颜色、背景等样式发生改变而进行的重新构造新外观的行为。重构不会引发页面的重新布局，不一定伴随着回流。

重构时需要注意：
页面的健壮性：在页面排版时需要考虑数据极多或者极少的情况。
页面的扩展性：要考虑未来添加子模块或兄弟模块的状态，为将来留好css、html扩展的出入口。在将来添加模块的时候，尽可能少的去动原来的html结构，使html易于扩展，尽可能少的去修改css，使css能够继承可复用。一般的处理就是多套一层div，或其它解决办法。
页面的复用性：建议把表现形式的样式放在一个class中，物理属性放在一个class中。

页面重构通常包括：
（1）table布局改为div+css
（2）使网站前端兼容现代浏览器
（3）对移动平台的优化
（4）针对SEO进行优化
（5）减少代码间的耦合，让代码保持弹性
（6）严格按照规范编写代码
（7）设计可扩展的API
（8）替换旧的框架、语言
（9）增强用户体验
（10）针对速度进行优化
（11）压缩JS、css、image等前端资源（通常是由服务器来解决）
（12）采用CDN来加速资源加载
（13）对于JS DOM的优化
（14）HTTP服务器的文件缓存

回流：
浏览器为了进行重新渲染页面而进行的重新计算元素几何大小和位置，回流可以理解为渲染树重新进行计算，一般最好触发元素的重构避免元素的回流。比如通过添加class来添加css样式，而不是直接在DOM上设置，当需要操作某一块元素的时候，最好使其脱离文档流，这样就不会引起回流了，比如设置position：absolute或者fixed，或者display：none，等操作结束后在显示。

2.移动端的优化
（此处参考浅谈前端性能优化（移动端））
网络加载类
（1）首屏数据请求提前，避免JavaScript文件加载后才请求渲染
为了进一步提示页面加载速度，可以考虑将页面的数据请求尽可能提前，避免在JavaScript文件加载完成后才去请求数据。通常数据请求是页面内容渲染中关键路径最长的部分，而且不能并行，所以如果数据请求能提前的话，可以极大程度上缩短页面内容的渲染完成时间。
（2）首屏加载和按需加载，非首屏内容滚屏加载，保证首屏内容最小化
由于移动端网络相对较慢，网络资源有限，因此为了保证尽快完成页面内容的加载，需要保证首屏加载资源的最小化，非首屏的内容使用滚动的方式异步加载。一般推荐移动端页面首屏数据展示延迟不超过3秒。
（3）模块化资源并行下载
主要指模块化JavaScript资源的异步加载，例如AMD的异步模块，使用并行的加载方式能够缩短多个文件资源的加载时间。
（4）inline首屏必备的CSS和JavaScript
通常为了在HTML加载完成时能使浏览器中有基本的样式，需要将页面渲染时必备的CSS和JS通过script或style的方式内联到页面中，避免页面HTML载入完成到页面内容展示这段过程中页面出现空白。
（5）meta dns prefetch设置DNS预解析
设置文件资源的DNS预解析，能让浏览器提前解析获取静态资源的主机IP，避免等到请求的时候才发起DNS解析。

<meta http-equiv='x-dns-prefetch-control' content='on'>
<link rel="dns-prefetch" href="//x.autoimg.cn">

（6）资源预加载
首屏加载完成后可能会使用的资源，我们可以用 link标签声明特定文件的预加载

<link rel='subresource' href='main.css'>
<link rel='prefetch' href='secondary.js'>

注意：只有可缓存的资源才进行预加载，否则浪费资源！

（7）Pre render预渲染
预渲染意味着我们提前加载好用户即将访问的下一个页面，否则进行预渲染这个页面将浪费资源，慎用！

<link rel='prerender' href='//j.autohome.com.cn'>

（8）合理利用MTU策略
通常情况下，TCP网络传输的最大传输单元（MTU）为1500B，即一个RTT（Round-Trip Time，网络请求返回时间）内可以传输的数据量最大为1500字节（为什么以太网mtu值被设定为1500 - 知乎）。因此在前后端分离的开发模式中，尽量保证页面的HTML内容在1KB以内，这样整个HTML内容的请求就可以在一个RTT内完成，最大限度的提高了HTML载入速度。

缓存
（1）合理利用浏览器缓存
除了Cache-Control、Expires、Etag和Last-Modified来设置HTTP缓存外，在移动端还可以使用localstorage等来保存ajax返回的数据，或者使用localstorage保存CSS或JS等静态资源，实现移动端的离线应用，尽可能的减少网络请求，保证静态资源内容的快速加载。
（2）静态资源离线方案
对于移动端或者混合应用，可以设置离线文件或离线包机制让静态资源请求从本地读取，加快资源载入速度，并实现离线更新。这块推荐叶小钗大神的 前端优化带来的思考，浅谈前端工程化 。
（3）尝试使用 AMP HTML
AMP HTML 可以作为优化前端页面性能的一个解决方案，使用AMP Component中的元素来代替原始页面元素进行直接渲染[译]关于谷歌的AMP，你需要知道这些 。

图片类
（1）图片压缩处理
移动端通常要保证页面中一切用到的图片都是经过压缩优化处理，而不是以原图的形式直接使用的，因为那样很消耗流量，并且加载时间更长。
（2）使用较小的图片，合理使用base64内嵌图片
在页面使用的背景图片不多且比较小的情况下，可以把图片转成base64编码嵌入到html页面或者CSS文件中，这样可以减少页面的HTTP请求数。需要注意的是，要保证图片较小，一般超过5kb的就不推荐base64嵌入显示了（前端开发中，使用base64图片的弊端是什么？ - 知乎）。
（3）使用更高压缩比格式的图片
使用具有较高压缩比格式的图片，如webp等。在同等图片画质的情况下，高压缩比格式的图片体积更小，能够更快的完成文件传输，节省网站流量。
（4）图片懒加载
为了保证页面内容最小化，加速页面渲染，尽可能节省首屏网络流量，页面中的图片资源推荐使用懒加载实现，在页面滚动时动态载入图片。
（5）使用Media Query 或者 srcset 根据不同屏幕加载不同大小的图片
针对不同屏幕尺寸和分辨率，输出不同大小的图片或者背景图能保证用户体验不降低的前提下节省网络流量，加快部分机型图片载入速度。
（6）使用iconfont代替图片图标
iconfont体积较小而且是矢量图，因此缩放不会失真，还可以方便修改图片大小和呈现的颜色，但是需要注意iconfont引用不同webfont格式会有兼容问题。
（7）定义图片大小限制
加载单张图片不建议超过30KB，避免大图片加载时间过长而阻塞页面其他资源的下载。如果用户上传的图片过大，建议设置限制。

脚本类
（1）尽量使用id选择器
选择页面DOM元素时尽量使用id选择器，因为id选择器速度最快。
（2）合理的缓存dom对象
对于需要重复使用的dom对象，要优先设置缓存变量，避免每次使用时都要从整个dom树重新查找。

// 不推荐
$("#mod .active").removeClass('active');
$("#mod .not-active").addClass("active");

// 推荐
const $mod = $("#mod");
$mod.find(".active").removeClass("active")
$mod.find(".not-active").addClass("active")

（3）页面元素尽量使用事件代理，避免事件直接绑定
使用事件代理可以避免对每个元素都进行绑定。并且可以避免出现内存泄漏以及需要动态添加元素的事件绑定问题

// 不推荐
$(".btn").click( _ => console.log("hello") )

// 推荐
$(document).on("click", ".btn", _ => console.log("world"))

（4）使用touch代替click
由于移动端屏幕的设计，touch事件和click事件触发之间存在300ms延迟，所以在页面没有touchmove实现滚动处理的情况，可以用touchstart代替元素的click事件，加快页面点击的响应速度，提高用户体验。但同时也需要注意页面重叠元素touch动作的点透问题。

// 不推荐
$("body").on("click",".btn",function(){ console.log(this) });

// 推荐
$("body").on("tap",".btn",function(){ console.log(this) });
// tap为zepto用touch事件封装的

（5）避免touchmove，scroll等连续事件处理
需要对这类高频触发回调的事件设置函数节流（throttle | debounce），避免频繁的事件调用导致移动端页面卡顿。
（6）避免使用eval、with，使用join代替连接符+，推荐使用ES6的模板字符串
基本的安全脚本编写问题，尽可能使用高效率的特性来完成这些操作，避免不规范或者不安全的写法。
（7）尽量使用ES6+的特性来编程
ES6+在一定程度上更高效，在chrome59版本对ES6做了深度优化之后，很多特性速度提升了80%左右，这也是未来规范的需要。

渲染类
（1）使用viewport固定屏幕渲染，可以加速页面渲染内容
一般认为，在移动端设置viewport可以加速页面的渲染，同时可以避免缩放导致页面重排重绘。

// 利用meta标签对viewport进行控制
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

（2）避免各种形式重排（reflow）重绘（redraw）
页面的重排重绘很耗性能，所以一定要尽可能减少页面的重排重绘，例如页面图片大小变化、元素位置变化这些情况都会导致重排与重绘。
（3）使用CSS3动画，开启GPU加速
使用CSS3动画可以设置transform: translateZ(0)来开启移动设备浏览器的GPU图形处理加速。GPU加速是什么。
（4）合理使用canvas和requestAnimationFrame
选择canvas或者requestAnimationFrame等更高效的动画实现方式，避免使用settimeout、setInterval等方式直接处理连续动画.
（5）SVG代替图片
部分情况下可以考虑使用SVG代替图片实现动画，因为SVG格式内容更小，而且SVG的DOM结构方便调整。
（6）不滥用float
在DOM渲染树生成后的布局渲染阶段，使用float的元素布局计算比较耗性能，所以尽量减少float的使用，推荐使用固定布局或者flex布局的方式来实现页面的元素布局。
（7）不滥用web字体或过多的font-size声明
过多的font-size声明会增加字体的计算大小。

架构协议
（1）尝试使用SPDY和HTTP2
在条件允许的情况下可以考虑使用SPDY协议来进行文件资源传输，利用连接复用加快传输过程，缩短资源加载时间。
（2）使用后端数据渲染
SSR（ Server Side Rendering，服务端渲染）的方式可以加速页面内容的渲染展示，避免空白页面的出现，同时可以解决页面SEO的问题。条件允许的话，SSR是一个很好的实践思路。百度SSP单页式应用性能优化实践，React 同构实践与思考。
（3）使用Native View代替DOM的性能劣势
可以尝试使用Native View的MNV* 开发模式来避免HTML DOM性能慢的问题，目前使用MNV* 的开发模式已经可以将页面内容渲染体验做到接近客户端Native应用的体验了。

3.PC端性能优化
（参考浅谈前端性能优化（PC版））
网络加载
（1）减少HTTP请求次数
根据需要合并静态资源图片、JavaScript代码和CSS文件，减少页面请求次数，这样可以缩短页面首次访问的等待时间，另外也要尽量的避免重复资源，防止增加多余的请求。
（2）减少HTTP请求大小
比如减少没必要的图片、JS、CSS以及HTML等，对文件进行压缩优化，开启GZIP压缩传输内容，缩短网络传输等待延迟。
（3）将CSS和JS放到外部文件中，避免使用style和script标签引入
在HTML文件中引入外部的资源可以有效利用浏览器的静态资源缓存。

<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js">script>

（4）避免页面中空的href和src
当link标签的href属性为空，或者script、img、iframe标签的src属性为空的时候，浏览器在渲染的过程中还是会把href和src的空内容进行加载，直到加载失败。这样就阻塞了页面中其他资源的下载进程，并且最后加载的内容是无效的，因此要尽量避免。

<img src="" alt="占位图"/>

（5）为HTML指定Cache-Control或者Expires
为HTML指定Cache-Control或者Expires可以将HTML内容缓存起来，避免频繁向服务器发送请求。在页面Cache-Control或Expires头部又消失，浏览器会直接从缓存读取内容，不向服务器发送请求。

<meta http-equiv="Cache-Control" content="max-age=7200" />
<meta http-equiv="expires" content="Wed, 20 Jun 2017 22:33:00 GMT">

（6）合理设置Etag和Last-Modified
对于未修改的文件，静态资源服务器会向浏览器端返回304，让浏览器从缓存中读取文件，减少下载的带宽消耗并能减少服务器的负载。

<meta http-equiv="last-modified" content="Mon, 03 Jan 2017 17:45:57 GMT">

（7）减少页面重定向
一次重定向大概600毫秒的时间开销，为了保证用户能尽快看到页面内容，尽量避免页面的重定向。
（8）静态资源不同域名存放
浏览器在同一时刻向同一个域名请求文件的并行下载数是有限的，因此可以利用多个域名的主机来存放不同的静态资源，增大页面加载时资源的并行下载数。
（9）使用静态资源CDN来存储文件
（10）使用CDN Combo下载传输内容
CDN的combo技术能把多个资源文件合并引用，减少请求次数。这样可以减少浏览器HTTP请求数，加快资源下载速度。比如淘宝的写法：

<link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/??sm.min.css,sm-extend.min.css">
<script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/??sm.min.js,sm-extend.min.js' charset='utf-8'>script>

（11）使用可缓存的AJAX
对于内容相同的请求，有时候没必要每次都从服务器拉取，合理的使用ajax缓存能加快ajax响应速度并减少服务器的压力。

$.ajax({
    url : url,
    dataType : "json",
    cache: true,
    success: function(data){ // to do something... }
});

（12）使用get请求
POST请求会首先发送文件头，然后发送HTTP正文的数据。而使用GET只发送头部，所以在拉取数据时使用GET请求效率更高。
（13）减少Cookie的大小并进行Cookie隔离
HTTP请求默认是会带上浏览器端的Cookie一起发送给服务器端的，所以在非必要的情况下要尽量减少Cookie。对于静态的资源，尽量使用不同的域名存放，因为Cookie默认也是不能跨域的，这就做到了不同域名下静态资源请求的Cookie隔离。
（14）减少favicon.ico 并缓存
一般一个web应用的favicon.ico是很少改变的，有利于favicon.ico的重复加载。
（15）异步的加载JavaScript资源
异步的JavaScript资源不会阻塞文档解析，所以浏览器会优先渲染页面，延迟加载脚本执行。

<script src="main.js" defer>script>
<script src="main.js" async>script>

（16）消除阻塞页面的CSS和JS
对于页面中加载时间过长的CSS或JS文件，需要进行合理的拆分或者延后加载，保证关键的资源能快速加载完成。
（17）避免使用CSS import 引用加载CSS
（18）使用prefetch来完成网站预加载
让浏览器预先加载用户访问当前页后极有可能访问的其他资源(页面，图片，视频等)，从而让用户有更好的体验。
（19）按需加载

页面渲染类
（1）把CSS资源引用放到HTML文件顶部
这样浏览器可以优先下载CSS并尽快完成页面渲染。
（2）JavaScript文件引用放到HTML文件底部
可以防止JavaScript的加载和解析执行对页面渲染造成阻塞。由于JavaScript资源默认是解析阻塞的，除非被标记为异步或者通过其他的方式异步加载，否则会阻塞HTML DOM解析和CSS渲染过程。
（3）不要在HTML中直接缩放图片
在HTML中直接缩放图片会导致页面内容的重排重绘，此时可能会使页面中的其他操作产生卡顿，因此要尽量减少在页面中直接进行图片缩放。
（4）减少DOM元素数量和深度
HTML中标签元素越多、层级越深，浏览器解析DOM并绘制到浏览器中所花的时间就越长。
（5）尽量避免使用table、iframe等慢元素
table内容的渲染是将table的DOM渲染树全部生成完并一次性绘制到页面上，所以在长表格渲染时很耗性能，应该尽量避免使用，可以考虑用ul代替。尽量使用异步的方式动态的加载iframe，因为iframe内资源的下载进程会阻塞父页面静态资源的下载以及HTML DOM的解析。
（6）避免运行耗时的JavaScript
长时间运行的JavaScript会阻塞浏览器构建DOM树、DOM渲染树、渲染页面。所以任何与页面初次渲染无关的逻辑功能都应该延迟加载执行，这和JavaScript资源的异步加载思路一致。
（7）避免使用CSS表达式和CSS滤镜
CSS表达式和滤镜的解析渲染速度是很慢的，再有其他解决方案的情况下应该尽量避免使用。

// 不推荐
.opacity{
   filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=10, MakeShadow=false)
} 

4.SEO优化
（参考前端SEO优化）
SEO简介:
　　全称Search Engine Optimization，搜索引擎优化。
　　存在的意义：为了提升网页在搜索引擎自然搜索结果中的收录数量以及排序位置而做的优化行为。
　　分类：白帽SEO和黑帽SEO。白帽SEO，起到了改良和规范网站设计的作用，使网站对搜索引擎和用户更加友好，并且网站也能从搜索引擎中获取合理的流量，这是搜索引擎鼓励和支持的。黑帽SEO，利用和放大搜索引擎政策缺陷来获取更多用户的访问量，这类行为大多是欺骗搜索引擎，一般搜索引擎公司是不支持与鼓励的。
　　白帽SEO能做什么呢？
　　（1）对网站的标题、关键字、描述精心设置，反映网站的定位，让搜索引擎明白网站是做什么的；
　　（2）网站内容优化：内容与关键字的对应，增加关键字的密度；
　　（3）在网站上合理设置Robot.txt文件；
　　（4）生成针对搜索引擎友好的网站地图；
　　（5）增加外部链接，到各个网站上宣传；
　　
SEO优化方案：
网站结构布局优化：
（1）控制首页链接数量：链接太少，搜索引擎往下爬到页内，影响网站收录数量；链接太多，影响用户体验。
（2）扁平化的目录层次：建立的网站结构层次越少，越容易被抓取，保持三层目录结构也是用户体验的需要。
（3）导航优化：导航尽量采用文字，也可以搭配图片导航，但图片需进行优化，如标签必须加’alt’和’title’属性；尽量加上面包屑导航，让用户更好了解当前所在位置，理解网站布局，让搜索引擎了解网站结构，同时增加了大量的内部链接，方便数据抓取。
（img图片标签alt和title属性的区别：alt是给搜索引擎识别，在图像无法显示时的替代文本；title是关于元素的注释信息，主要是给用户解读，当鼠标放到文字或是图片上时有title文字显示。）
（4）控制页面大小，减少http请求，提高网站加载速度。
（5）合理的网站布局

页面头部：logo、主导航、用户信息
页面主题：左边正文（包括面包屑导航及正文），右边热门文章和相关文章
页面底部：版权信息、友情链接

网站代码优化
（1）