前端面试问题CSS篇：https://my.oschina.net/u/3674939/blog/1637877

前端面试问题HTML篇：https://my.oschina.net/u/3674939/blog/1637883

前端面试问题JavaScript篇：https://my.oschina.net/u/3674939/blog/1640595

前端安全

XSS(Cross Site Script)：跨域脚本攻击

原理：向页面注入脚本攻击

防范：消毒

CSRF(Cross Site Request Forgery)：跨站请求伪造

原理：伪装来自受信任用户的请求来利用受信任的网站。用户登陆网站a，点击或触发网站b中能访问网站a某接口的链接

防范：进行token验证或各种验证

错误处理

前端错误：代码错误和资源加载错误

错误捕获方式：

代码错误：try...cath window.onerror

资源加载错误：object.onerror performance.getEntries() error事件

上报错误：ajax和image对象

(new Image()).src = 'http://api'

页面加载

从输入url到得到html的过程

浏览器根据DNS服务器解析获得域名的IP地址
向这个IP地址的机器发送http请求
服务器收到、处理并返回http请求
浏览器得到返回内容

参考：http://www.dailichun.com/2018/03/12/whenyouenteraurl.html

浏览器渲染页面的过程

根据HTML结构解析生成DOM Tree
根据CSS解析生成CSSOM
将DOM和CSSOM整合形成Render Tree（渲染树）
根据Render Tree开始绘制 5.浏览器将各层信息发送给GPU（渲染引擎），GPU将各层合成（composite），显示在屏幕上

参考：segmentfault.com/a/1190000014070240

重排（回流）和重绘

reflow（重排）：浏览器根据计算结果在页面中将元素重新排好位置，即重新布局
触发：

对dom操作，如增删改

修改某些样式，如宽高，边距

修改网页默认字体大小

repaint（重绘）：浏览器将要呈现的页面对元素进行重新绘制

-触发：

触发reflow后

修改样式

window.onload和DOMContentLoaded

页面的全部资源加载完才会执行，包括css、图片、视频等
DOM渲染完即可执行，此时css、图片、视频没加载完（jQuery、zepto.js方式）

性能优化

资源加载优化

静态资源的压缩合并
静态资源缓存（合理利用浏览器缓存）
使用CDN加速
使用服务器端渲染
DNS/链接预解析 6.减少http请求

参考：https://mp.weixin.qq.com/s/hzqhAykXJexMO5x5N51Fog

渲染优化

懒加载（图片懒加载、下拉加载更多）

图片懒加载原理代码：

<img id="img" src="preview.png" data-realsrc="real.png"/>
<script type="text/javascript">
  var img = document.getElementById('img');
  img.src = img.getAttribute('data-realsrc');
</script>

减少DOM查询，对DOM查询做缓存（如保存到变量）

缓存DOM查询代码

//未缓存
for (var i=0;i<document.getElementTagName('p').length;i++){
  //code...
}
//缓存
var plist = document.getElementTagName('p');
for (var i=0;i<plist.length;i++){
  //code...
}

减少DOM操作，多个操作尽量合并在一起执行
事件节流

有一些事件会频繁触发，如scroll、鼠标事件、键盘事件等。如果在这些事件绑定耗性能的函数或ajax请求，可能导致页面反应迟钝，用户体验差和性能差。

解决方法为事件节流即加定时器，如百度的输入文本马上显示结果

尽早执行操作（如DOMContentLoaded）

关于上线回滚流程

上线：

将测试完成的代码提交到git的master分支

将当前服务器的代码全部打包并记录版本号，备份

将master分支的代码提交覆盖到线上服务器，生成新的版本号

回滚：

前端面试问题其它篇（安全、性能、加載等）