万树IT：web前端小技巧，你都掌握了吗?

Posted 2020-10-31 wanshuit

web前端开发，新的知识点，html5新标签、性能优化、new操作符、性能优化，这些知识点你都掌握了吗？
1
HTML5多功能增加
HTML5现在已经不是SGML的子集，主要是关于图像，位置，存储，多任务等功能的增加。
(1)绘画canvas;
(2)用于媒介回放的video和audio元素;
(3)本地离线存储localStorage长期存储数据，浏览器关闭后数据不丢失;
(4)sessionStorage的数据在浏览器关闭后自动删除;
(5)语意化更好的内容元素，比如article、footer、header、nav、section;
(6)表单控件，calendar、date、time、email、url、search;
(7)新的技术webworker,websocket,Geolocation;
2
浏览器支持HTML5新标签
IE8/IE7/IE6支持通过document.createElement方法产生的标签，
可以利用这一特性让这些浏览器支持HTML5新标签，
浏览器支持新标签后，还需要添加标签默认的样式。
当然也可以直接使用成熟的框架、比如html5shim，
<!--[ifltIE9]>
<![endif]-->
3
简述一下你对HTML语义化的理解？
用正确的标签做正确的事情。
html语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析;
即使在没有样式CSS情况下也以一种文档格式显示，并且是容易阅读的;
搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重，利于SEO;
使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。
4
性能优化有哪些方法？
（1）减少http请求次数：CSSSprites,JS、CSS源码压缩、图片大小控制合适；网页Gzip，CDN托管，data缓存，图片服务器。
（2）前端模板JS+数据，减少由于HTML标签导致的带宽浪费，前端用变量保存AJAX请求结果，每次操作本地变量，不用请求，减少请求次数
（3）用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能。
（4）当需要设置的样式很多时设置className而不是直接操作style。
（5）少用全局变量、缓存DOM节点查找的结果。减少IO读取操作。
（6）避免使用CSSExpression（css表达式)又称Dynamicproperties(动态属性)。
（7）图片预加载，将样式表放在顶部，将脚本放在底部加上时间戳。
5
JavaScript知识点
数据封装类对象：Object、Array、Boolean、Number和String
其他对象：Function、Arguments、Math、Date、RegExp、Error
1.eval是做什么的？
它的功能是把对应的字符串解析成JS代码并运行；
应该避免使用eval，不安全，非常耗性能（2次，一次解析成js语句，一次执行）。
由JSON字符串转换为JSON对象的时候可以用eval，varobj=eval(‘(‘+str+‘)‘)。
2.new操作符具体干了什么呢?
（1）创建一个空对象，并且this变量引用该对象，同时还继承了该函数的原型。
（2）属性和方法被加入到this引用的对象中。
（3）新创建的对象由this所引用，并且最后隐式的返回this。