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

一、什么是web语义化，以及他的优点

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

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

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

优点：

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

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

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

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

 

二、前端须要注意哪些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. 提升网站速度：网站速度是搜索引擎排序的一个重要指标

 

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

　　1）cookie

　　2）session

　　3）URL重写

　　4）隐藏input

　　5）ip地址

 

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

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

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

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

　　四、用CSS或JavaScript实现预加载

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

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

 

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

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

六、什么是渐进加强

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

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

　　核心原则以下：

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

 

七、哪些操做会形成内存泄漏

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

 

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

　　整体来讲分为如下几个过程　

1. DNS解析

2. TCP链接

3. 发送HTTP请求

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

5. 浏览器解析渲染页面

6. 链接结束

 

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

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

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

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

　　解决方案：

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

 

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

　　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小而且可缓存

 

十一、XSS和CSRF如何避免

　　防护XSS攻击：

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

　　防护CSRF攻击：

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