本文是根据多份关于web前端面试试题抽取的企业面试时用到最多的一些试题，仅供参考。 web前端高频面试试题含答案 - 传智播客 怎么去设计一个组件封装？ 组件封装的目的是为了重用，提高开发效率和代码质量 　2.低耦合，单一职责，可复用性，可维护性 　3.前端组件化设计思路 js 异步加载的方式 渲染引擎遇到 script 标签会停下来，等到执行完脚本，继续向下渲染 defer 是“渲染完再执行”，async 是“下载完就执行”，defer 如果有多个脚本，会按照在页面中出现的顺序加载，多个async 脚本不能保证加载顺序 加载 es6模块的时候设置 type=module，异步加载不会造成阻塞浏览器，页面渲染完再执行，可以同时加上async属性，异步执行脚本（利用顶层的this等于undefined这个语法点，可以侦测当前代码是否在 ES6 模块之中） css 动画和 js 动画的差异 代码复杂度，js 动画代码相对复杂一些 动画运行时，对动画的控制程度上，js 能够让动画，暂停，取消，终止，css动画不能添加事件 动画性能看，js 动画多了一个js 解析的过程，性能不如 css 动画好 XSS 与 CSRF 两种跨站攻击 xss 跨站脚本攻击，主要是前端层面的，用户在输入层面插入攻击脚本，改变页面的显示，或则窃取网站 cookie，预防方法：不相信用户的所有操作，对用户输入进行一个转义，不允许 js 对 cookie 的读写 csrf 跨站请求伪造，以你的名义，发送恶意请求，通过 cookie 加参数等形式过滤 我们没法彻底杜绝攻击，只能提高攻击门槛

Continue reading

前端遇到的问题及解决方案: 页面内容不足以铺满屏幕高度时，footer 居底显示: 要实现的效果就是，在主要内容不足以铺满整个屏幕的情况下，footer居于屏幕低部显示，使得整个页面占满屏幕。而当主要内容高度大于整个屏幕高度的时候，footer跟随主要内容进行显示； 方法一： html <div class="page"> 主要页面 </div> <footer>底部</footer> css html,body{ height: 100%; margin: 0; padding: 0; } .page{ box-sizing: border-box;/*为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制*/ min-height: 100%; padding-bottom: 300px; } footer{ height: 300px; margin-top: -300px; opacity: 0.5; } 主要内容放在page内部，page最小高度为100%（注意这里html，body高度也要设为100%）。page有个padding-bottom大小为footer的高度（按需要调整），最重要的一点page的box-sizing:border-box，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制，也就是说page的padding-bottom也会设定在min-height：100%内。而footer的margin-top为负的自身高度，把自己拉到page的padding-bottom空白块上，从而达到需求效果。 优点：简洁明了，没有冗余的div盒子； 缺点：box-sizing:border-box; 的兼容问题,ie7以下包括ie7不支持； 方法二： html <div class="page-container"> <div class="page-main"> 主要页面 </div> <footer>底部</footer> </div> css html,body{ height: 100%; margin: 0; padding: 0; } .page-container{ position: relative; min-height: 100%; } .

Continue reading