前端基础

1.    Iframe一些问题

1. 服务端设置 X-Frame-Options Header头，拒绝页面被嵌套
2. 为 iframe 设置 sandbox 属性，通过它可以对iframe的行为进行各种限制，充分实现“最小权限“原则
3. 会阻塞主页面的onload，和主页面共享连接池
4. 不利于SEO搜索引擎优化

2.    h5新特性

• 新增选择器 document.querySelector、document.querySelectorAll
• 拖拽释放(Drag and drop) API
• 媒体播放的 video 和 audio
• 本地存储 localStorage 和 sessionStorage
• 离线应用 manifest
• 桌面通知 Notifications
• 语意化标签 article、footer、header、nav、section
• 增强表单控件 calendar、date、time、email、url、search
• 地理位置 Geolocation
• 多任务 webworker
• 全双工通信协议 websocket
• 历史管理 history
• 跨域资源共享(CORS) Access-Control-Allow-Origin
• 页面可见性改变事件 visibilitychange
• 跨窗口通信 PostMessage
• Form Data 对象
• canvas绘画

3.    CSS单位em/rem

Em 是相对于父元素，Rem 总是相对于根元素。

为了简化font-size的换算，我们在根元素html中加入font-size: 62.5%; 这样页面中1rem=10px,1.2rem=12px,1.4rem=14px,1.6rem=16px;使得视觉、使用、书写都得到了极大的帮助。rem支持IE9及以上。

4.     CSS重绘和重排

重绘(Repaint)：某个元素的外观被改变所触发的浏览器行为，浏览器会根据元素的新属性重新绘制。比如改变某个元素的背景色、文字颜色、边框颜色等。

重排(Reflow)：当渲染树的一部分必须更新并且节点的尺寸发生了变化，浏览器会使渲染树中受到影响的部分失效，并重新构造渲染树。比如添加删除dom, 元素位置变化，尺寸变化（margin,padding,width,heihgt等），浏览器窗口尺寸变化，获取某些属性（如offsetTop, scrollTop，offsetHeight等）

尽量避免重排：

不要一条一条的修改DOM，用集体的class去修改

动画使用css3+positon的定位去做

尽量不要用float，渲染时计算量比较大

尽量不要用table去做布局

5.    性能优化

减少HTTP请求数

缓存AJAX请求

按需加载

延迟加载资源（懒加载）

预加载资源

减少不必要的DOM元素

压缩图片、JS和CSS

减少DOM操作

减少Cookie

不滥用float，float在渲染时计算量比较大

减少重绘和重排

尽量使用事件代理

节流防抖

尽量使用CSS3动画代替js去实现

处理数据时候注意控制算法复杂度

6.    url加解密

encodeURIComponent(URIstring)

decodeURIComponent(URIstring)

7.    script标签的defer和async

defer script的执行在HTML解析完成之后，执行顺序与它们在document出现的顺序一致。应用：jquery之类的有依赖关系的script。

async script的执行会阻塞HTML解析，执行顺序依赖于它们下载完成的快慢。应用：像数据埋点之类相对独立的script。

8. 浏览器不能缓存的请求：

1. HTTP信息头中包含Cache-Control:no-cache等告诉浏览器不用缓存的请求，或HTTP响应头中不包含Last-Modified/Etag，也不包含Cache-Control/Expires的请求无法被缓存

2. 经过HTTPS安全加密的请求

3. 需要根据Cookie，认证信息等动态请求是不能被缓存的

4. POST请求无法被缓存