前端面试题整理—性能优化及安全篇

1、什么是web语义化，以及他的优势

web语义化是指通过HTML标记表示页面包含的信息，包含了HTML标签的语义
化和css命名的语义化

HTML标签的语义化是指：通过使用包含语义的标签（如h1-h6）恰当地表示文
档结构

css命名的语义化是指：为html标签添加有意义的class，id补充未表达的语义，
如Microformat通过添加符合规则的class描述信息

优势：

　　1）去掉样式后页面呈现清晰的结构

　　2）盲人使用读屏器更好地阅读

　　3）搜索引擎更好地理解页面，有利于收录

　　4）便于团队项目的可持续运作及维护

2、前端需要注意哪些SEO

　　1. 合理的title、description、keywords：

　　title值强调重点即可，重要关键词出现不要超过2次，而且要靠前，不同页面title要有所不同；
　　description把页面内容高度概括，长度合适，不可过分堆砌关键词，不同页面description有所不同；
　　keywords列举出重要关键词即可
　　2. 语义化的HTML代码，符合W3C规范：语义化代码让搜索引擎容易理解网页
　　3. 重要内容HTML代码放在最前：搜索引擎抓取HTML顺序是从上到下，有的
　　搜索引擎对抓取长度有限制，保证重要内容一定会被抓取
　　4. 重要内容不要用js输出：爬虫不会执行js获取内容
　　5. 少用iframe：搜索引擎不会抓取iframe中的内容
　　6. 非装饰性图片必须加alt
　　7. 提高网站速度：网站速度是搜索引擎排序的一个重要指标

3、web开发中会话跟踪的方法有哪些

　　1）cookie

　　2）session

　　3）URL重写

　　4）隐藏input

　　5）ip地址

 4、前端开发中，如何优化图像

　　1、不用图片，尽量用css3代替。 比如说要实现修饰效果，如半透明、边框、圆角、阴影、渐变等等

　　2、使用矢量图SVG替代位图

　　3、使用字体图标webfont、CSS Sprites等

　　4、用CSS或JavaScript实现预加载

　　5、按照HTTP协议设置合理的缓存

　　6、WebP图片格式能给前端带来的优化。WebP支持无损、有损压缩，动态、静态图片，压缩比率优于GIF、JPEG、JPEG2000、PG等格式

5、你所了解到的Web攻击技术

　　（1）XSS（Cross-Site Scripting，跨站脚本攻击）：指通过存在安全漏洞的Web网站注册用户的浏览器内运行非法的HTML标签或者JS进行的一种攻击。
　　（2）SQL注入攻击
　　（3）CSRF（跨站点请求伪造）：指攻击者通过设置好的陷阱，强制对已完成的认证用户进行非预期的个人信息或设定信息等某些状态更新

6、什么是渐进增强

　　渐进增强是指在web设计时强调可访问性、语义化HTML标签、外部样式表和脚本。

　　保证所有人都能访问页面的基本内容和功能同时为高级浏览器和高带宽用户提供更好的用户体验

　　核心原则如下：

　　所有浏览器都必须能访问基本内容
　　所有浏览器都必须能使用基本功能
　　所有内容都包含在语义化标签中
　　通过外部CSS提供增强的布局
　　通过非侵入式、外部javascript提供增强功能

7、哪些操作会造成内存泄漏

　　内存泄漏指任何对象在您不再拥有或需要它之后仍然存在。
　　垃圾回收器定期扫描对象，并计算引用了每个对象的其他对象的数量。如果一个对象的引用数量为 0（没有其他对象引用过该对象），或对该对象的惟一引用是循         环的，那么该对象的内存即可回收。
　　setTimeout 的第一个参数使用字符串而非函数的话，会引发内存泄漏。
　　闭包、控制台日志、循环（在两个对象彼此引用且彼此保留时，就会产生一个循环）

 8、从输入URL到页面加载发生了什么

　　总体来说分为以下几个过程　

1. DNS解析

2. TCP连接

3. 发送HTTP请求

4. 服务器处理请求并返回HTTP报文

5. 浏览器解析渲染页面

6. 连接结束

9、介绍下重绘和回流（Repaint & Reflow），以及如何进行优化 

　　改变了背景颜色、边框、字体的颜色，浏览器重新绘制颜色的过程称为重绘

　　当页面的元素发生变化的时候（宽、高、位置、创建元素），都会导致整个页面重排，浏览器会重新计算结构位置，重新渲染页面，称为DOM回流

　　回流必定会发生重绘，重绘不一定会引发回流。

　　解决方案：

　　利用文档碎片 createDocumentFragment 或者利用模板字符串，将操作的元素进行字符串拼接，最后打包放入页面中

10、如何进行网站性能优化

　　content方向：

　　1. 减少HTTP请求：合并文件、CSS精灵、inline Image
　　2. 减少DNS查询：DNS查询完成之前浏览器不能从这个主机下载任何文件。方法：DNS缓存、将资源分布到恰当数量的主机名，平衡并行下载和DNS查询
　　3. 避免重定向：多余的中间访问
　　4. 使Ajax可缓存
　　5. 非必须组件延迟加载
　　6. 未来所需组件预加载
　　7. 减少DOM元素数量
　　8. 将资源放到不同的域下：浏览器同时从一个域下载资源的数目有限，增加域可以提高并行下载量
　　9. 减少iframe数量
　　10. 减少404页面

　　Server方面

　　1. 使用CDN
　　2. 添加Expires或者Cache-Control响应头
　　3. 对组件使用Gzip压缩
　　4. 配置ETag
　　5. Flush Buffer Early
　　6. Ajax使用GET进行请求
　　7. 避免空src的img标签

　　Cookie方面

　　1. 减小cookie大小
　　2. 引入资源的域名不要包含cookie

　　css方面

　　1. 将样式表放到页面顶部
　　2. 不使用CSS表达式
　　3. 使用不使用@import
　　4. 不使用IE的Filter

　　Javascript方面

　　1. 将脚本放到页面底部
　　2. 将javascript和css从外部引入
　　3. 压缩javascript和css
　　4. 删除不需要的脚本
　　5. 减少DOM访问
　　6. 合理设计事件监听器

　　图片方面

　　1. 优化图片：根据实际颜色需要选择色深、压缩
　　2. 优化css精灵
　　3. 不要在HTML中拉伸图片
　　4. 保证favicon.ico小并且可缓存

11、XSS和CSRF如何避免

　　防御XSS攻击：

　　a：HttpOnly 浏览器禁止页面的JS访问带有HttpOnly属性的Cookie。 
　　b：输入检查 XSS Filter 对输入内容做格式检查，类似“白名单”，可以让一些基于特殊字符的攻击失效。在客户端JS和服务器端代码中实现相同的输入检查
　　c：输出检查 在变量输出到html页面时，可以使用编码或转义的方式来防御XSS攻击

　　防御CSRF攻击：

　　a. 验证码、 Referer Check 检查请求是否来自合法的源（可被伪造）