浏览器的主要组件包括： 用户界面－ 包括地址栏、后退/前进按钮、书签目录
浏览器引擎－ 用来查询及操作渲染引擎的接口 渲染引擎－ 渲染界面:Firefox、Chrome和Safari是基于两种渲染引擎构建的，Firefox使用Geoko——Mozilla自主研发的渲染引擎，Safari和Chrome都使用webkit. 网络－ 用来完成网络调用，例如http请求 UI 后端－ 用来绘制类似组合选择框及对话框等基本组件，具有不特定于某个平台的通用接口，底层使用操作系统的用户接口 JS解释器－ 解释执行JS代码 数据存储－ 属于持久层，浏览器需要在硬盘中保存类似cookie的各种数据
2.Web安全,举例说明3.状态码4.同源:同端口,同域名,同协议5.对象继承6.ES6历史以及新特性有哪些?7.promise原理8.事件模型9.常见兼容性问题,列举(移动端/PC端)10.性能优化类似百度搜索的提示框，兼容各大浏览器，可用键盘控制. 勉强憋了出来，但是挂掉了，犯了一些低级错误，显示经验不足． 面试官建议多看书，多写组件.
流程： 解析html以构建dom树->构建render树->布局render树->绘制render树 参考文章
3.垂直居中4.数据类型判断5.路由实现6.数据本地存储7.跨域 参考8.数据双向绑定单向绑定优缺点懵逼了 总结一下其他方式
1.Comet技术：基于HTTP长连接的Web端实时通信技术 2.SSE：服务器发送事件,使用长链接进行通讯
4.服务器代理转发如何处理cookie(nginx) <span class="hljs-attribute">proxy_cookie_domain</span> localhost example.org; <span class="hljs-attribute">proxy_cookie_domain</span> ~\.([a-z]+\.[a-z]+)$ <span class="hljs-variable">$1</span>; <span class="hljs-attribute">proxy_cookie_path</span> /one/ /; <span class="hljs-attribute">proxy_cookie_path</span> / /two/; 5.对象继承6.this7.rem布局的优缺点一面(记录两个,其他都还好)
实现动画有哪些途径 CSS3JS帧动画,定时器,requestAnimateFrameCanvas动画SVG图片 对象继承的实现二面(跪了)
web安全 https加密过程,证书用途xss几种形式,防范手段,过滤哪些字符?xsrf原理,实例,防范手段(Laravel的token)Sql注入 性能优化 代码优化(html,css,js)网络性能优化: Cache缓存之强制缓存和协商缓存CDN原理及应用HTTP压缩之gzip 上下文环境对象设计模式(要求说出如何实现,应用,优缺点): 单例模式工厂模式发布订阅模式 跨域(产生原因) JSONP原理CORS如何设置Nginx代理 读过哪些框架源码?如何写一个CSS库,要注意哪些东西?(百度外卖业务:包含移动客户端(RN,hybrid),PC web端,H5,后台界面vue,桌面应用包含编辑器插件,前端构建工具,node中间层)
渲染上的差异: 1.将元素设置为display:none后，元素在页面上将彻底消失，元素本来占有的空间就会被其他元素占有，也就是说它会导致浏览器的回流和重绘。
2.设置元素的visibility为hidden，和display:none的区别在于，元素在页面消失后，其占据的空间依旧会保留着，所以它只会导致浏览器重绘而不会回流。 3.opacity:0,只是看不到元素,元素依然存在并且占有原有位置. 注: 事件绑定的差异: 1、display:none：元素彻底消失，不会触发绑定的事件. 2、visibility:hidden：无法触发其点击事件，有一种说法是display:none是元素看不见摸不着，而visibility:hidden是看不见摸得着，这种说法是不准确的，设置元素的visibility后无法触发点击事件，说明这种方法元素也是消失了，只是依然占据着页面空间。 3、opacity:0：可以触发点击事件，设置元素透明度为0后，元素只是相对于人眼不存在而已，对浏览器来说，它还是存在的，所以可以触发绑定事件 动画属性的差异: 1、display:none：完全不受transition属性的影响，元素立即消失 2、visibility：hidden：元素消失的时间跟transition属性设置的时间一样，但是没有动画效果. 3、opacity:0,动画属性生效,能够进行正常的动画效果. 代码演示地址
