题目概览
- From表单提交时为什么会刷新页面
- position跟display、overflow、float这些特性相互叠加后会怎么样
- 对事件委托的理解
- 对CDN的理解
题目解答
From表单提交时为什么会刷新页面
- 原因：早期网页交互模型只能是浏览器提交数据给服务器，服务器做出响应重新返回一个页面，浏览器加载这个页面进行显示。早期前端没有编程式发送网络请求的 API，更没有前端路由管理的概念，所以表单提交跳转页面是广泛接受的方案。
- 阻止 form 表单默认提交行为的方式
- 使用button 按钮提交表单的时候，要设置type="button" button在浏览器中默认的类型为submit；
- 使用input 代替button ，设置type="button"
- event.preventDefault(); 在提交事件绑定的方法的最后 使用event.preventDefault();方法；
- 用onclick点击事件来return false
- 利用表单的onsubmit事件
position跟display、overflow、float这些特性相互叠加后会怎么样（参考）
转换对应表：
| 设定值 | 计算值 |
|---|---|
| inline-table | table |
| inline, run-in, table-row-group, table-column, table-column-group, table-header-group, table-footer-group, table-row, table-cell, table-caption, inline-block | block |
| 其他 |
对事件委托的理解
概念：即利用事件冒泡机制处理指定一个事件处理程序，来管理某一类型的所有事件
作用：利用冒泡的原理，将事件加到父级身上，触发执行效果，这样只在内存中开辟一块空间，既节省资源又减少DOM操作，提高性能；可以为动态添加的元素绑定事件
js实现事件委托的三大步骤：
- 给父元素绑定事件
- 监听子元素的冒泡事件
- 找到是哪个子元素的事件，通过匿名回调函数的参数e用来接收事件对象，通过target获取触发事件的目标
案例：ul中触发每个li来改变他们的背景颜色
<ul id='ul'> <li>111111</li> <li>222222</li> <li>333333</li> </ul> <button id='button'>添加元素</button>window.onload = function(){ let oUl = document.getElementById('ul'); let aLi = oUl.getElementsByTagName('li'); let but = document.getElementById('button'); let now = 3; // 事件源：event对象，不管在哪个事件中，只要你操作的哪个元素就是事件源 // ie：window.event.srcElement // 标准：event.target oUl.onmouseover = function(e){ let ev = e || window.event; let target = ev.target || ev.srcElement; if(target.nodeName.toLowerCase() == 'li'){ target.style.background = 'red'; } } oUl.onmouseout = function(e){ let ev = e || window.event; let target = ev.target || ev.srcElement; if(target.nodeName.toLowerCase() == 'li'){ target.style.background = ''; } } but.onclick = function(){ now ++; let newLi = document.createElement('li'); newLi.innerHTML = 111111 * now; oUl.appendChild(newLi); } }
对CDN的理解
- 概念：CDN指内容分发网络。具体来说，CDN就是采用更多的缓存服务器（CDN边缘节点），布放在用户访问相对集中的地区或网络中。当用户访问网站时，利用全局负载技术，将用户的访问指向距离最近的缓存服务器上，由缓存服务器响应用户请求。
- 优点：采用CDN技术，最大的好处，就是加速了网站的访问——用户与内容之间的物理距离缩短，用户的等待时间也得以缩短；此外，CDN还有安全方面的好处。内容进行分发后，源服务器的IP被隐藏，受到攻击的概率会大幅下降。而且，当某个服务器故障时，系统会调用临近的健康服务器，进行服务，避免对用户造成影响。目中使用过CDN，我们的图片和脚本都放在cdn上，这样用户访问这些资源会更快，因为这些资源在不同的域名下，会一定程度避免http1.1的队头堵塞。有的CDN采用http2，速度更快。
- 缺点：
- 大部分CDN是单独收费的
- CDN更新资源麻烦，可能需要手动来刷新CDN来刷新资源的缓存
- 如果CDN出了故障，需要联系CDN提供商来解决，中间增加了沟通耗时
- 可能对SEO有影响，CDN ip的多样性，部分ip可能对爬虫并不友好