江苏龙网

  1. 主页 > 生活百科 > >

前端开发中79条不可忽视的知识点汇总( 二 )

前端开发


3、高效率 你的网站做的再NB也不会NB过百度NB过google吧？一个好的CDNS会提供更高的效率，更低的网络延时和更小的丢包率 。
4、分布式的数据中心 假如你的站点布置在北京，当一个香港或者更远的用户访问你的站点的时候，他的数据请求势必会很慢很慢 。而CDNs则会让用户从离他最近的节点去加载所需的文件，所以加载速度提升就是理所当然的了 。
5、使用情况分析 一般情况下CDNs提供商（如百度云加速）都会提供数据统计功能，可以了解更多关于用户访问自己网站的情况，可以根据统计数据对自己的站点适时适当的做出些许调整 。
6、有效防止网站被攻击 一般情况下CDNs提供商也是会提供网站安全服务的
8.圣杯布局和双飞翼布局

参考连接
9.正则表达式匹配手机号
function checkPhone(){ if(!(/^1[34578]d{9}$/.test(phone))){ alert("手机号码有误，请重填"); return false; }}复制代码10.如何提高首频加载速度
1.js外联文件放到body底部，css外联文件放到head内 2.http静态资源尽量用多个子域名 3.服务器端提供html和http静态资源时最好开启gzip 4.在js,css,img等资源响应的http headers里设置expires,last-modified 5.尽量减少http requests的数量 6.js/css/html/img资源压缩 7.使用css spirtes，可以减少img请求次数 8.大图使用lazyload懒加载 9.避免404，减少外联js 10.减少cookie大小可以提高获得响应的时间 11.减少dom elements的数量 12.使用异步脚本，动态创建脚本
11.浏览器内核(渲染引擎)
IE/360/搜狗浏览器: Trident Chrome/Safari/Opera: WebKit(KHTML的一个开源的分支) (虽然我们称WebKit为浏览器内核，但不太适合直接称渲染引擎，因为WebKit本身主要是由两个引擎构成的，一个正是渲染引擎“WebCore”，另一个则是JAVAscript解释引擎“JSCore”，它们均是从KDE的渲染引擎KHTML及JavaScript解释引擎KJS衍生而来 。) (在13年发布的Chrome 28.0.1469.0版本开始，Chrome放弃Chromium引擎转而使用最新的Blink引擎（基于WebKit2——苹果公司于2010年推出的新的WebKit引擎），Blink对比上一代的引擎精简了代码、改善了DOM框架，也提升了安全性 。) (为了减少研发成本，Opera在2013年2月宣布放弃Presto，转而跟随Chrome使用WebKit分支的Chromium引擎作为自家浏览器核心引擎) Firefox/SeaMonkey: Gecko
12.浏览器渲染过程及优化建议
1）解析： 一个是HTML/SVG/XHTML，事实上，Webkit有三个C++的类对应这三类文档 。解析这三种文件会产生一个DOM Tree 。CSS，解析CSS会产生CSS规则树 。Javascript，脚本，主要是通过DOM API和CSSOM API来操作DOM Tree和CSS Rule Tree. 2）渲染：浏览器引擎会通过DOM Tree 和 CSS Rule Tree 来构造 Rendering Tree 。注意： Rendering Tree 渲染树并不等同于DOM树，因为一些像Header或display:none的东西就没必要放在渲染树中了 。CSS 的 Rule Tree主要是为了完成匹配并把CSS Rule附加上Rendering Tree上的每个Element 。也就是DOM结点 。也就是所谓的Frame 。然后，计算每个Frame（也就是每个Element）的位置，这又叫layout和reflow过程 。3）绘制：最后通过调用操作系统Native GUI的API绘制 。
减少reflow和repaint 1）不要一条一条地修改DOM的样式 。还不如预先定义好css的class，然后修改DOM的className 。
  1. 把DOM离线后修改 。如： 使用documentFragment 对象在内存里操作DOM 先把DOM给display:none(有一次reflow)，然后你想怎么改就怎么改 。比如修改100次，然后再把他显示出来 。clone一个DOM结点到内存里，然后想怎么改就怎么改，改完后，和在线的那个的交换一下 。3）不要把DOM结点的属性值放在一个循环里当成循环里的变量 。不然这会导致大量地读写这个结点的属性 4）为动画的HTML元件使用fixed或absoulte的position，尽量使用transfoem，那么修改他们的CSS是不会reflow的 5）尽量少使用table布局 。因为可能很小的一个小改动会造成整个table的重新布局
13. 页面导入样式时，使用link和@import有什么区别？
（1）link属于XHTML标签，除了加载CSS外，还能用于定义RSS, 定义rel连接属性等作用；而@import是CSS提供的，只能用于加载CSS; （2）页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载; （3）import是CSS2.1 提出的，只在IE5以上才能被识别，而link是XHTML标签，无兼容问题; (4)link支持使用js控制DOM去改变样式，而@import不支持;
14. 简述一下你对HTML语义化的理解？
用正确的标签做正确的事情 。html语义化让页面的内容结构化，便于对浏览器、搜索引擎解析; 即使在没有样式CSS情况下也以一种文档格式显示，并且是容易阅读的; 搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重，利于seo; 使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解 。


推荐阅读


上一篇：买的鸡腿肉一股腥臭味 鸡腿有腥味正常吗

下一篇：帮你理清楚Java反射应该如何写