知识点汇总

CSSHack与Web优化技巧

最新推荐文章于 2025-05-06 23:59:42 发布

转载最新推荐文章于 2025-05-06 23:59:42 发布 · 414 阅读

前端学习专栏收录该内容

37 篇文章

订阅专栏

本文介绍了CSSHack的概念及分类，对比了优雅降级与渐进增强的不同应用场景，并提供了JavaScript克隆函数、cookie与session机制的详细解释。此外还探讨了重排与重绘现象及其优化方法。

什么是CSS Hack
一般来说是针对不同的浏览器写不同的CSS,就是 CSS Hack。
IE浏览器Hack一般又分为三种，条件Hack、属性级Hack、选择符Hack。例如：
1. 条件Hack

<!--[if IE]>
<style>
.test{color:red;}
</style>
<![endif]-->

属性Hack

.test{
color:#090\9; / For IE8+ /
color:#f00; / For IE7 and earlier /
_color:#ff0; / For IE6 and earlier */
}

选择符Hack

html .test{color:#090;} / For IE6 and earlier /
html .test{color:#ff0;} / For IE7 /

什么叫优雅降级和渐进增强
渐进增强：
针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
优雅降级：
一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。
区别：

1. 优雅降级是从复杂的现状开始，并试图减少用户体验的供给
2. 渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要
3. 降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带

实现一个函数clone，可以对JavaScript中的主要的数据类型进行值复制

function clone(obj) { 
    var o; 
    switch (typeof obj) { 
        case "undefined": 
            break; 
        case "string": 
            o = obj + ""; 
            break; 
        case "number": 
            o = obj - 0; 
        case "boolean": 
            o = obj; 
            break; 
        case "object": // object 分为两种情况 对象（Object）或数组（Array） 
            if (obj === null) { 
                o = null; 
            } else { 
                if (Object.prototype.toString.call(obj).slice(8, -1) === "Array") { 
                    o = []; 
                    for (var i = 0; i < obj.length; i++) { 
                        o.push(clone(obj[i])); 
                    } 
                } else {
                    o = {}; 
                    for (var k in obj) { 
                        o[k] = clone(obj[k]); 
                    } 
                } 
            } 
            break; 
        default: 
            o = obj; 
            break; 
        } 
        return o; 
    }

cookie和session的机制是什么？有什么区别？

会话（Session）跟踪是Web程序中常用的技术，用来跟踪用户的整个会话，它可以弥补http协议无状态的不足。常用的会话跟踪技术是cookie与session。cookie通过在客户端记录信息确定用户身份，session通过在服务器端记录信息确定用户身份。
cookie有什么作用？

cookie可以解决http的无状态的问题，与服务器进行交互，作为http规范存在。它具有极高的简便性、可扩展性和可用性，也可以通过加密和SSL技术来提高其安全性。因此推荐使用cookie作为标识而不是身份验证的工具。
cookie的缺点

 1. 大小和数目受限制。浏览器对一个域cookie的条目数有上限要求，且每个cookie的大小不得超过4kb。
 2. 存在安全性问题，易被人拦截。
 3. 需要指定域，不可以跨域
 4. 浪费带宽，因为我每次请求一个新的页面，cookie都会被自动发送过去。
 5. 有的移动端浏览器不支持cookie或浏览器禁用cookie
 6. 有些状态不可能保存在客户端。例如，为了防止重复提交表单，我们需要在服务器端保存一个计数器。如果我们把这个计数器保存在客户端，那么它起不到任何作用

什么是重排和重绘？什么时候会发生重绘？如何避免重绘？
重绘是指的屏幕的一部分要重新绘制，比如元素的背景色发生了改变，但几何尺寸未发生改变。重排意味着元素的几何尺寸发生了改变，需要重新计算生成渲染树。
下面几种情况会发生重排：

 1. resize窗口时
 2. 修改网页默认字体时
 3. 修改CSS样式改变尺寸时
 4. JS操作dom树
 5. 一些影响布局的动画
 6. 使用JS脚本获得一些布局属性时，比如offsetTop

可以采取以下方法来减少重排:

 1. 不要一条条的修改DOM样式，改变className来“统一修改”（注：现代浏览器会进行增量异步reflow，即“攒够”一些修改后再统一修改）
 2. 把dom离线修改，比如将其至于内存或设置display:none。
 3. 为html动画原件使用position:absolute布局或fixed布局，这样不会引起重排和重绘。
 4. 不要使用table布局，因为稍加改动就会导致table的重新布局。
 5. 将offsetTop等属性缓存成局部变量

浏览器是如何渲染页面的？

 1. 浏览器会解析html\xhtml\svg，生成一个dom树，解析css文件生成css规则树，解析javascript以获得其对html和css的影响
 2. 解析完成后，浏览器会根据dom树和css规则树来生成渲染树。渲染树不包括像header元素这样页面中不会出现的元素。
 3. 会进行layout，定义元素的坐标
 4. 最后通过调用系统Native GUI的API绘制

网页中如何优化图像

去掉没有意义的修饰
使用css和矢量图代替位图
惰性加载图片
使用css sprites，将多张小图拼成一张大图

png和jpg格式的区别
png属于无损压缩，而jpg是有损压缩，一张图片多次使用jpg格式压缩的话会逐渐失真
png格式的图片存储空间明显大于jpg格式的图片

常见web攻击有哪些

跨站脚本攻击（XSS ，又称CSS，Cross Site Script）
分布式拒绝服务（DDOS，Distributed Denial of Service）
利用合理的请求占用服务器的大量资源，使正常用户无法得到服务器的响应
跨站请求伪造攻击（CSRF，Cross site request forgery）
攻击者通过各种方法伪造一个请求，模仿用户提交表单的行为，从而达到修改用户的数据，或者执行特定任务的目的
解决方法是尽量使用post请求
sql注入
攻击者主要针对后台使用sql拼接方式查询的情况，