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

Posted 2021-02-11 theblogs

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、如何进行网站性能优化

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