什么是语义化？就是用合理、正确的标签来展示内容，比如h1~h6定义标题。
语义化优点：
易于用户阅读，样式丢失的时候能让页面呈现清晰的结构。
有利于SEO（搜索引擎优化），搜索引擎根据标签来确定上下文和各个关键字的权重。
方便其他设备解析，如盲人阅读器根据语义渲染网页
有利于开发和维护，语义化更具可读性，代码更好维护，与CSS3关系更和谐。
1、<header>
<header>定义文档或者文档的部分区域的页眉，应作为介绍内容或者导航链接栏的容器。
2、<nav>
<nav>描述一个含有多个超链接的区域，该区域包含跳转到其他页面或页面内部其他部分的链接列表。
3、<main>
<main> 定义文档的主要内容，该内容在文档中应当是独一无二的，不包含任何在文档中重复的内容，比如侧边栏，导航栏链接，版权信息，网站logo，搜索框（除非搜索框作为文档的主要功能）。
4、<article>
<article>元素表示文档、页面、应用或网站中的独立结构，是可独立分配的、可复用的结构，如在发布中，它可能是论坛帖子、杂志或新闻文章、博客、用户提交的评论、交互式组件，或者其他独立的内容项目。
5、<aside>
<aside> 元素表示一个和其余页面内容几乎无关的部分，被认为是独立于该内容的一部分且可以被单独的拆分出来而不会影响整体。通常表现为侧边栏或嵌入内容。
6、<footer>
<footer>定义最近一个章节内容或者根节点元素的页脚。一个页脚通常包含该章节作者、版权数据或者与文档相关的链接等信息。
7、<section>
<section>表示文档中的一个区域（或节），比如，内容中的一个专题组。
前端安全问题及解决办法
1、XSS（Cross-Site Scripting）脚本攻击漏洞；
对输入进行转码
2、CSRF（Cross-sit request forgery）漏洞（跨站脚本攻击）；
增加token验证.因为cookie发送请求的时候会自动增加上，但是token却不会，这样就避免了攻击
Referer验证。页面来源的判断
3、iframe安全隐患问题；
使用安全的网站进行嵌入
4、本地存储数据问题；
很多开发者为了方便，把一些个人信息不经加密直接存到本地或者cookie，这样是非常不安全的，黑客们可以很容易就拿到用户的信息，所有在放到cookie中的信息或者localStorage里的信息要进行加密，加密可以自己定义一些加密方法或者网上寻找一些加密的插件，或者用base64进行多次加密然后再多次解码，这样就比较安全了。
5、第三方依赖的安全性问题；
6、.HTTPS加密传输数据；
客户端渲染和服务端渲染介绍与区别
客户端渲染：
在服务端放了一个html 页面，里面有<script>//发请求，拿数据，模版引擎渲染等，$.ajax ,</script>
客户端发起请求，服务端把页面（响应的是字符串）发送过去，客户端从上到下依次解析，如果在解析的过程中，发现ajax
请求，再次像服务器发送新的请求，客户端拿到ajax 响应结果，模板引擎渲染。
过程至少和服务端发起两次请求
服务端渲染：
sever 端页面+数据，服务端过程：1.读取index.html 2.模版进行渲染，在发送给客户端之前，在服务端已经把index.html 渲染处理了。var 渲染结果 = tempeter.render(模板字符串，｛解析替换对象｝) response.end(渲染结果)，服务端响应的就是最总的结果
服务端只请求一次
多数网站既有服务端渲染又有客户端渲染
服务端渲染和客户端渲染的区别
+ 客户端渲染不利于 SEO 搜索引擎优化
+ 服务端渲染是可以被爬虫抓取到的，客户端异步渲染是很难被爬虫抓取到的
+ 所以你会发现真正的网站既不是纯异步也不是纯服务端渲染出来的
+ 而是两者结合来做的
+ 例如京东的商品列表就采用的是服务端渲染，目的了为了 SEO 搜索引擎优化
+ 而它的商品评论列表为了用户体验，而且也不需要 SEO 优化，所以采用是客户端渲染
服务器端渲染：
优点：1使前端耗时少。
2有利于SEO
3无需占用客户端资源，解析模板的工作完全交给后端来做，客户端只需要解析HTML页面
客户端的资源占用少。
4后端生成静态化文件。即生成缓存片段，减少数据库查询的浪费时间。高效。
缺点：1不利于前后端分离，开发效率低。
2占用服务器资源。
客户端渲染：
优点：1前后端分离。前端专注UI，后端专注api开发。前端有更多选择性，不需要遵循后端特定 的模板
2体验更好。
缺点：1前端响应较慢。客户端渲染，前端还需要进行拼接字符串的过程，需要耗费额外的时间，不 如服务器渲染的速度快。
html渲染过程
1.解析html,生成dom树
2.根据css文件计算出样式数据
3.结合dom树和css文件，生成渲染树
4.浏览器根据渲染树，将页面绘制到屏幕上
前端项目（网站）优化
减少http请求：在YUI35规则中也有提到，主要是优化js、css和图片资源三个方面，因为html是没有办法避免的。因此，我们可以做一下的几项操作：
合并js文件
合并css文件
雪碧图的使用(css sprite)
减小资源体积：可以通过以下几个方面进行实施：
gzip压缩
js混淆
css压缩
图片压缩
缓存：可以通过以下几个方面来描述：
DNS缓存
CDN部署与缓存
http缓存
优化网页渲染：
css的文件放在头部，js文件放在尾部或者异步
尽量避免內联样式
DOM操作优化：
避免在document上直接进行频繁的DOM操作
使用classname代替大量的内联样式修改
对于复杂的UI元素，设置position为absolute或fixed
尽量使用css动画
使用requestAnimationFrame代替setInterval操作
适当使用canvas
尽量减少css表达式的使用
使用事件代理
强缓存和协商缓存
浏览器的缓存分为强缓存和协商缓存，当客户端请求某个资源的时候，获取缓存的流程如下
（1）先根据这个资源的http header判断它是否命中强缓存，如果命中，则直接从本地缓存中获取资源，不会则向服务器请求 资源。
（2）当强缓存没有命中时，客户端会发送请求到服务器，服务器通过另一些request header验证这个资源是否命中协商缓存，这个过程成为http再验证，如果命中，服务器直接返回请求而不返回资源，而是告诉客户端之间从缓存中获取，客户端收到返回后就直接从客户端获取资源
（3）强缓存和协商缓存的共同之处在于：如果命中缓存，服务器不会返回资源；区别是：强缓存不发送请求打服务器，但是协商缓存会发送请求到服务器
（4）当协商缓存没有命中时，服务器会返回资源给客户端
（5）当ctrl+F5强制刷新网页时，直接从服务器加载，跳过强缓存和协商缓存
（6）当F5刷新页面时，跳过强缓存但会检查协商缓存
强缓存
（1）Expires该字段是http1.0时的规范，值是一个绝对时间的GMT格式的时间字符串，代表缓存的过期时间
（2）Cache-Control:max-age该字段是http1.1的规范强缓存利用的是max-age的值来实现缓存资源的最大生命周期，单位是秒
协商缓存
（1）Last-Modified资源最后的更新时间，随着服务器的response返回
（2）If-Modified-Since通过比较两个时间来判断资源在两次请求期间是否有过修改，如果没有就命中协商请求
（3）ETag资源内容的唯一标识，随着服务器的response返回
（4）If-None-Match服务器通过请求头部的If-None-Match与当前资源的ETag是否一致来表示资源在两次请求中是否有过修改，如果没有修改，则命中协商缓存
